DIV+CSS布局有很多值得学习的地方，这里向大家描述一下DIV+CSS布局注意要点，相信本文介绍一定会让你有所收获。
DIV+CSS布局注意要点
1、对DIV设置水平居中的问题。
只要在这个DIV里面加上一句"margin:auto"即可;
例如：
- <#divid="center"></#div>
相应的css为：
- #center{
- margin:auto;
- }
2、用float属性的div布局问题。
例如：(其中floatA、floatB的属性已经设置为float:left;)
- <#divid="float_a"></#div>
- <#divid="float_b"></#div>
- <#divid="not_float_c"></#div>
这里的not_float_c并不希望继续平移，而是希望往下排。
解决方案是在not_float_c的div里面加上clear:both;属性即可。
相应的css为：
- #not_float_c{
- clear:both;
- }
3、用float属性时margin属性加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;属性即可;
例如：
- <#divid="add_float"></#div>
相应的css为：
- #add_float{
- float:left;
- margin:5px;/*IE下理解为10px*/
- display:inline;/*IE下再理解为5px*/
- }
4、想要消除ul、li列表的缩进的问题。
解决方法：
- <#divid="div"></#div>
- #div{
- padding:0px;
- margin:0px;
- list-style:none;
- }
其中padding属性是指div边框向内增加，margin属性是指div边框向外增加。
5、关于FF与IE的Hack的支持。
FF:支持!important,IE则忽略,可用!important为FF特别设置样式，值得注意的是，一定要将xxx!important这句放置在另一句之上
6、关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
7、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
8、兼容IE和FF的换行CSS推荐样式。
- #row{
- word-wrap:break-word;
- overflow:hidden;
- }
9、兼容IE和FF的限行CSS推荐样式。
- #row{
- height:200px;
- overflow:hidden;
- }
【编辑推荐】