一聚教程网:一个值得你收藏的教程网站

热门教程

CSS教程 CSS盒模型(Box Model)问题详解

时间:2022-07-02 12:43:12 编辑:袖梨 来源:一聚教程网

width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同。左右Margin加倍的问题当box为float时,IE6中box左右的margin会加倍
W3C定义的盒模式如下:
  width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面。背景会填充padding和content部分。
  但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同。
左右Margin加倍的问题
  当box为float时,IE6中box左右的margin会加倍。比如:

 代码如下 复制代码














  左面的inner的左面margin明显大于5px。
  这时候,定义inner的display属性为inline。
外层box自动计算高度的问题
  根据W3C定义,没有float属性的外层box不会自动计算高度,要计算高度,必须在内层最后一个box加入clear:both。
  Opera、netscape、mozilla等不会计算外层box高度,但是微软ie6会自动计算外层高度。比如:

 代码如下 复制代码


热门栏目