这是我学习前段期间的一些笔记可能有点乱 主要是一些不常用的标签属性~项目中常用的标签用法以及一些常用的小插件 希望能帮助到刚入门的小白 html： ； ：空格占位符 &ensp：占据的宽度正好是1/2个中文宽度的空格 &emsp：其占据的宽度正好是1个中文宽度的空格 br：换行 clearfix或clear：both：清除浮动 <a target="_blank">使网页在新的窗口中打开 border：边框 加粗标签：strong 改变文字的方向：bdo 使用 blockquote 元素的话，浏览器会插入换行和外边距 光标样式cursor input：submit提交按钮 text输入框 password密码 radio单选 checkbox多选 file 上传文件value Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框， 单选/复选框，提交/重置按钮等 placeholder 提示信息输入文字后消失 css： 当手机页面文字需要小于12px时：-webkit-transform:scale(0.83333); overflow：如果元素中的内容超出了给定的宽度和高度属性， visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 text-overflow:ellipsis：使文本超出部分以省略号代替 text-overflow:ellipsis：如果元素中的文本超出了给定的宽度和高度属性以省略号代替 white-space:nowrap; overflow: hidden; text-overflow:ellipsis;如果元素中的文本超出了给定的宽度和高度属性以省略号代替 去下划线：text-decoration:none text-decoration: overline 上边 text-decoration: line-through 中间 text-decoration: underline 底下 调整图片位置：vertical-align 可接具体数值 middle与文字居中对齐 使文本不换行：white-space: nowrap 设置背景：background：url /*no-repeat 不平铺/*center cneter 使图片居中 background-size:100% 100%;手机页面中使背景铺满 background-position:top left right bottom 设置背景位置 background:transparent 背景透明 如果想显示下面的内容需要将上一层背景设为透明 opacity:.2 透明度 z-index :你定义的CSS中有position属性值为absolute、relative或fixed， 用z-index此取值方可生效。 此属性参数值越大，则被层叠在最上面。 字体大小：font-size /*后跟百分比或具体像素 设置字体大小：font-weight /* normal标准 /* bold 粗体/* bolder 更 粗的/* lighter 更细的/* 100~900 400=normal 700=bold 文本居中：text-align: center; 首行缩进：text-indent 设置边框类型;display 使文字和英文左右对齐：text-align:justify 设置边框样式：border-style 点状 dotted 实线solid 双线double 虚线 dashed 设置边框圆角：border-radius 后接具体像素或百分比 border-top-right-radius可以指定一个角 设置外边距：margin 设置内边距：padding 设置行高：line-height 设置光标样式：cursor 设置文字阴影 水平阴影、垂直阴影、模糊距离，以及阴影的颜色：text-shadow 0px 0px 0px # 允许对长单词进行拆分，并换行到下一行 word-wrap:break-word; box-shadow：设置容器阴影 去除列表的点：list-style:none 平分成几列：column-count 规定列之间间隔：column-gap:40px; 设置列之间的样式 ：column-rule:3px outset #ff00ff; 绘制轮廓：outline:2px solid red; outline-offset:15px; 规定元素的定位类型：position /*fixed 绝对定位相对于浏览器窗口/absolute绝对定位相对于static 定位以外的第一个父元素进行定位/relative 相对定位 提高指定CSS样式规则的应用优先权：!important 选择列表：select <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> 可插入<optgroup label="Swedish Cars">当做option的标题 select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; /*为下拉小箭头留出一点位置，避免被文字覆盖*/ padding-right: 14px; } /*清除ie的默认选择框样式清除，隐藏下拉箭头*/ select::-ms-expand { display: none; } ：link 未访问 ：visited 已访问 :hover 悬浮 :active 活动链接 class在css中用点 id用# 更改input按钮样式 input[type="checkbox"] { -webkit-appearance: none; }取消原有样式 input[type="checkbox"] { -webkit-appearance: none; background: #fff url(i/blue.png); height: 22px; vertical-align: middle; width: 22px; }添加样式 input[type="checkbox"]:checked { background-position: -48px 0; }添加选中样式 csss3： 使图片模糊： -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); 移动端弹窗 <div class="layer"> <div class="labg"></div> <div class="laycont"> <img src="style/images/photo_img_3.png"> </div> </div> <script type="text/javascript" src="style/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $("#dk").click(function(){ $(".layer").show(); }) $(".layer").click(function(){ $(".layer").hide() }); </script> 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>.... 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>..... 常用的内联块状元素有： <img>、<input> 转换成块：display:block 换成内联：display:inline 转换成内联块状：display:inline-block 内联元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 内联块状 元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。