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会自动计算外层高度。比如：

代码如下	复制代码

推荐专题

最新下载

热门教程

CSS教程 CSS盒模型（Box Model）问题详解

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程