DIV+CSS布局注意要点

  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;   }

可以以心感悟,以此沉淀,足矣;耳听佳音,目极美好,

DIV+CSS布局注意要点

相关文章:

你感兴趣的文章:

标签云: