CSS的十条常用技巧

CSS的十条常用技巧

---------------37期 安正超

1. 元素的垂直居中：
元素加上行高line-height等于自身高度的情况下,该元素内的文本会垂直居中对齐。
2. 元素的水平居中：
1) 在网页拥有DTD文件的情况下直接对居中目标加上CSS的margin:0 auto;属性即可；
2) 网页不存在DTD文件的情况下解决IE居中问题，现在body加上text-align:center;然后再对目标元素加上margin:0 auto;属性；

3. DIV的绝对定位：
元素的绝对定位属性是以离本身最近的一个拥有相对或者绝对定位的父级元素作为参照物的，如果没有找到，即以浏览器为参照物，而不是以body为参照。

4. 列表的列表项图像：
尽量对li元素使用背景图片来实现，因为使用list-style-image属性不好控制图标的位置；

5. CSS的书写和命名：
1) 尽量采用关联选择器，这样有利于修改时方便查找定位；
2) 一定要写上注释，比如公用的CSS样式前面请写上/*======common======*/，这样使代码更加清晰，增加可读性；
3) 选择器命名要有意义，避免出现p1,p2,one,two,three这样无意义名称，头部就header，主要的部分就main，底部就footer，这样很清晰的就知道各部分的作用；
4) 能缩写的尽量所写，比如背景background，外边距margin，内边距padding等。
5) 不要用大写；

6. clear元素的使用：
在每次多数float的时候或者一部分结尾浮动的时候请加上一个clear的div清除一下浮动，我建议大家把它的作用理解为：把它的上面和下面的内容分界，互不影响。

7. 盒子模型的计算：
分别对IE和非IE进行定义宽和高，或者尽量少把padding和width或者height加在一起使用，因为IE和非IE对和模型的计算是不一样的。
IE对盒模型的计算：margin+border+(width/height)
非IE对盒模型的计算：margin+border+padding+(width/height)

这就是为什么有时候加了padding以后盒子在非IE浏览器下会被撑大的原因，所以在拥有padding的情况下请分别定义width或者height。

8. 关于height和width：
1) 如果对元素加了height:100%;或者width:100%;它会以父级元素的指定尺寸来计算自己的宽和高，所以在使用width:100%或者height:100%的时候请检查一下它的父级元素有没有具体指定的高度；
2) DIV如果不需要行内排列，也就是DIV不浮动或者独占整行的情况下，请不用写width，因为DIV是块级元素，本身就是无限宽；

9. DIV的尺寸特性：
1) DIV在没有指定宽度的情况下会尽可能的宽；
2) DIV在不指定宽度的情况下加上float属性，宽度会尽可能小，小到内容宽度；
3) DIV在不指定宽度情况下加上position绝对定位absolute属性，也会尽可能缩小；

10. 导航菜单的li：
请使用padding来替代width来定义导航菜单的宽度，因为width是死的，文字过长会错乱，而通过padding给li内容左右两边加上填充更加灵活。

希望能对大家有解惑特效!! 哈哈 :win8中文网, 求关注!

原文地址：