DIV+CSS布局注意要点

DIV+CSS布局有很多值得学习的地方，这里向大家描述一下DIV+CSS布局注意要点，相信本文介绍一定会让你有所收获。

DIV+CSS布局注意要点

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

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

 
 
 
  
  
  <# div id="center">

　　相应的css为：

 
 
 
  
  
  #center{  
  
  
  margin:auto;  
  
  
  }

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

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

 
 
 
  
  
  <#divid="float_a"> 
  
  
  <#divid="float_b"> 
  
  
  <#divid="not_float_c">

　　这里的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">

　　相应的css为：

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

4、想要消除ul、li列表的缩进的问题。

解决方法：

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

【编辑推荐】

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容