DIV+CSS布局注意要点

开发 前端
本文向大家介绍一下DIV+CSS布局注意要点,主要包括对DIV设置水平居中的问题,用float属性的div布局问题和用float属性时margin属性加倍的问题等内容。

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

DIV+CSS布局注意要点

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

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

  1. <#divid="center"></#div> 
  2.  

  相应的css为:

  1. #center{  
  2. margin:auto;  
  3. }  

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

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

  1. <#divid="float_a"></#div> 
  2. <#divid="float_b"></#div> 
  3. <#divid="not_float_c"></#div> 
  4.  

  这里的not_float_c并不希望继续平移,而是希望往下排。
  解决方案是在not_float_c的div里面加上clear:both;属性即可。

相应的css为:

  1. #not_float_c{  
  2. clear:both;  
  3. }  
  4.  

3、用float属性时margin属性加倍的问题。

  设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
  解决方案是在这个div里面加上display:inline;属性即可;
例如:

  1. <#divid="add_float"></#div> 
  2.  

  相应的css为:

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

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

解决方法:

  1. <#divid="div"></#div> 
  2.  
  3. #div{  
  4. padding:0px;  
  5. margin:0px;  
  6. list-style:none;  
  7. }  
  8.  

 其中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推荐样式。

  1. #row{  
  2. word-wrap:break-word;  
  3. overflow:hidden;  
  4. }  
  5.  

9、兼容IE和FF的限行CSS推荐样式。

  1. #row{  
  2. height:200px;  
  3. overflow:hidden;  
  4. }  
  5.  

【编辑推荐】

  1. DIV CSS网页布局开发参考规范
  2. IE6.0对padding的解读分析
  3. DIV+CSS网页错位诊断和解决方法
  4. Float构建三栏DIV CSS网页布局
  5. 技术分享 如何使用CSS控制超链接文字样式

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-23 14:30:14

DIV+CSS

2010-09-03 13:51:59

DIVCSS

2010-08-17 13:28:31

DIVCSS

2010-09-03 10:58:45

DIVCSS

2010-08-23 10:50:39

DIV+CSS

2010-09-03 15:09:08

DIV+CSS

2010-08-23 09:59:16

DIV+CSSSEO

2010-08-27 13:46:58

DIV+CSS

2010-09-10 10:30:39

DIV+CSS

2010-08-24 13:01:13

DIV+CSS

2010-08-30 14:57:21

DIV+CSS

2010-08-27 13:58:06

DIV+CSS

2010-08-16 14:18:49

DIV+CSS

2010-08-16 09:32:01

DivCSS

2010-08-24 10:26:47

DIV+CSS

2010-09-07 14:14:46

DIV+CSS

2010-08-16 09:44:52

DIVCSS

2010-08-27 17:41:03

DIV+CSS

2010-08-25 09:11:57

DIVCSS

2010-08-16 11:05:54

DIV+CSS
点赞
收藏

51CTO技术栈公众号