常用css
1、reset
/* 重置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,
dl,dt,dd,ul,ol,li,pre,
fieldset,lengend,button,input,textarea,
table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;}
body { background:#FFF; color:#333;font:14px/1 microsoft yahei,simsun, sans-serif }
h1,h2,h3,h4,h5,h6{font-size:100%;}
small{font-size:12px;}
li{list-style:none;}
table,tr,td{border-collapse:collapse;border-spacing:0}
a{color:#666;text-decoration:none;}
a:hover{text-decoration:underline}
legend{color:#000;}
fieldset,img{border:none;}
button,input,select,textarea{font-size:100%;}
dfn,em,i{ font-style:normalfont-size:12px; font-family:Arial }
/* 背景图 */
/* 功能 */
.clearfix{ *zoom:1; }
.clearfix:after{ clear:both; content:'.'; display:block; height:0; overflow:hidden; }
/* 布局 */
2、css实现的小三角
请输入帐号 请输入帐号 请输入帐号 请输入帐号
3.1、多行文字垂直居中
3.2多行文字垂直居中
<div style="width:500px; height:300px; background:pink">
<p style="height:100%;vertical-align:middle">
<b style="display:inline-block;vertical-align:middle">我是垂直居中最简单的办法我是垂直居中最简单</b><i style="display:inline-block;height:100%; vertical-align:middle"></i>
</p>
</div>
4、背景透明，内容不透明
5、日期(span)始终在链接(a)的右侧，当链接(a)字数达到li的宽度则固定在li的右侧
6、文字超出宽度显示省略号
7、自定义上传按钮样式
8、当你为一个设置了overflow:auto的元素指定背景图片的时候，当内容太多而出现滚动条后，拖动滚动条就会发现背景图片的位置是固定的，而不是随着滚动条移动。如果你想要背景图片随着内容而滚动，可以设置background-attachment:local。
9、把网站变灰色
html { filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”); /* Firefox 3.5+ */
-webkit-filter: grayscale(100%); /* chrome+ */
filter: grayscale(100%); /* 未来浏览器 */
filter: gray; /* ie6-8 */
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*ie6-9 */
}
10、chrome下input的placeholder设置了line-height不能垂直居中，其他支持placeholder的浏览器没问题，解决方案 height:30px; line-height:normal; line-height:30px \9;