readonly="true" 不能写入字
maxlength="10" 最多输入10个字
ist-style:none 去掉padding值
overflow: scroll; 出现滚动条
background-origin:content-box; 定位背景图片的位置
在 body 元素中设置两个背景图像：
body { background-image:url(img_flwr.gif),url(img_tree.gif); }
设置透明:
filter: alpha(opacity=70);
opacity: 0.7;
设置文字与文字之间的间隙
letter-spacing: 5px;
设置单词与单词之间的间隙
word-spacing:5px ;
设置去掉button按钮在ios上的默认样式
-webkit-appearance: none;
可以使用 transition-duration 属性来设置 "hover" 效果的速度:
transition-duration: 0.1s;
鼠标放上去变为小手:
cursor:pointer;
把点击button按钮时显示的阴影去掉
-webkit-tap-highlight-color:rgba(255,255,255,0);
禁止textarea缩放
resize:none;
select标签属性:
1 multiple 设置多选选择框
2 size 设置多选选择框显示的行数
3 options获取所有的option元素
4 selectedIndex 获取选中项的索引
5 selected 设置选中项
HTML <textarea> 标签的 wrap 属性
wrap 属性
通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。
如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。
wrap="virtual" 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。
wrap="physical" 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。
如果把 wrap 设置为 off，将得到默认的动作。
适应手机端：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
做手机端页面body必须设置
不允许用户执行选中的操作
-webkit-user-select: none;
旋转屏幕的时候禁止调整文字大小
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
用来跳转到指定页面或者是获取当前页面的地址
location.href;
设置或者是获取锚点链接(以#开头)
location.hash;
给当前地址栏设置参数或者是获取当前地址栏的参数(以?号开头)
location.search;
html5
弹性盒:（谷歌）
display: -webkit-box;
-webkit-box-orient: vertical;垂直
display: -webkit-box;
-webkit-box-orient: horizontal;水平（默认）
-webkit-box-flex: 1;自动占满剩余的空间
overflow: scroll;加滚动条
弹性盒水平垂直都居中
-webkit-box-pack:center;
-webkit-box-align:center;
iscroll4默认情况下阻止浏览器的默认行为,在iscroll滚动的区域a标签input标签等会失效,需要我们重写方法来判断一下
iscroll5已经修正了浏览器的的默认行为,如果不是a标签input标签等它才会阻止浏览器的默认行为
flex-direction 顺序指定了弹性子元素在父容器中的位置。
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的*空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
在css文件中引入公共样式:
@import url（"reset.css"）；
调整背景图大小：
background-size：宽 高
自动换算padding和margin值:
-webkit-box-sizing: border-box;
调整背景图片位置
background-position: 左右 上下;
border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。
文字超出隐藏并显示省略号
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 20rem;/*不允许出现半汉字截断*/
滚动条进行隐藏:
overflow-y:auto;
&::-webkit-scrollbar{
width:0px;
}
placeholder是css3中表单元素input的一个占位符，适用于高级浏览器或者手机端的输入框的默认提示内容，通过下面几行代码就可以设置一个兼容的placeholder文字颜色。
修改所有的input
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {/* Firefox 18- */
color: red;
}
::-moz-placeholder{/* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
修改某个标签
#myInput::-webkit-input-placeholder {
color: red;
}
#myInput:-moz-placeholder {
color: red;
}
#myInput:-ms-input-placeholder {
color: red;
}
css旋转动画:
@-webkit-keyframes mycss{
0%{
background: #b7d2ff;
-webkit-transform:rotate(0deg)
}
25%{
background: blue;
-webkit-transform:rotate(72deg)
}
}
@keyframes(关键帧)作为CSS3动画的一部分，其该紧跟一个标识符(由开发者自定)，此标识符将在其他CSS代码中引用。在@keyframes和标识符之后，就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了。这一系列动画规则用大括号括起来隔开，然后再嵌在@keyframes之后的大括号里，类似其他@语法规则。
webkit表示这个动画效果只适用于webkit内核的浏览器，labelON就是这个动画里面关键帧的名字。
transform:rotate(45deg)（旋转45度，deg是degree的缩写，意为角度；当然这只是一个单位，还有别的单位，但不常用；你也可以直接采用数字而不用单位，这个数字会被自动转换为角度）
参考网址：http://www.cnblogs.com/happyPawpaw/archive/2012/09/12/2681348.html