草珊瑚的常见CSS经验技巧

1.css hack

:root #test { background-color:purple\9; } /*ie9*/
[;color:#f00;]; /*Webkit(chrome和safari)*/
color:#666\9; /*IE8*/
*color:#999; /*IE7*/
_color:#333; /*IE6*/

 

2.垂直居中

单行文字内容：line-height 和 height相等，加上overflow:hidden;
绝对定位居中：position:absolute;top:50%;margin-top:负元素高度;
box布局居中：display:box;box-align:center;

可以不考虑父元素的宽高情况

.element{
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto;
}

 

 

3.超长文本内容变省略号

text-overflow: ellipsis;/*这就是省略号喽*/
overflow: hidden;/*设置超过的隐藏*/
white-space: nowrap;/*设置不折行*/
width:200px;/*设置宽度*/

 

4.css reset

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}
ul,ol,li{margin:0; padding:0;}
ul{
list-style: none;
}
img { border:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }

 5.width:100%缩小浏览器出现空白区域

设置min-width:1240px;/*小于屏幕宽度*/