Div + Css布局注意要点及解决方案

1、对div设置水平居中的问题。

    只要在这个div里面加上一句"margin:auto"即可;
    例如：

<#div id="center"></#div>

　　相应的css为：

#center {
     margin:auto;
}

2、用float属性的div布局问题。

　　例如：(其中floatA、floatB的属性已经设置为float:left;)

<#div id="float_a" ></#div>
<#div id="float_b" ></#div>
<#div id="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;属性即可;
    例如：

<#div id="add_float"></#div>

　　相应的css为：

#add_float {
    float:left;
    margin:5px;/*IE下理解为10px*/
    display:inline;/*IE下再理解为5px*/
}

4、想要消除ul、li列表的缩进的问题。
    解决方法：

<#div id="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;
}