解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

最新推荐文章于 2025-04-18 09:12:09 发布

xujie_0311

最新推荐文章于 2025-04-18 09:12:09 发布

阅读量1w

点赞数 1

分类专栏： CSS

CSS 专栏收录该内容

16 篇文章

订阅专栏

盒子模型分为两类：W3C标准盒子模型和IE盒子模型 （微软确实不喜欢服从他家的标准）

这两者的关键差别就在于：

W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含填充（padding）和边框（border）
IE盒子模型——属性高（height）和属性宽（width）这两个值包含填充（padding）和边框（border）

我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型（需要在页面中声明DOCTYPE类型）。

各浏览器盒模型的组成结构是一致的，区别只是在"怪异模式"下宽度和高度的计算方式，而“标准模式”下则没有区别。组成结构以宽度为例：总宽度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight（W3C标准盒子模型）。页面在“怪异模式”下，css中为元素的width和height设置的值在标准浏览器和ie系列(ie9除外)里的代表的含义是不同的（IE盒子模型）。

因而解决兼容型为题最简洁和值得推荐的方式是：下述的第一条。
一、将页面设为“标准模式”。
添加对应的dtd标识，如：

    Html代码   
    
 <!DOCTYPE html>

经测试，ie6/7/8/9,ff,chrome,opera均表现一致：

    Html代码   
    
  
 <!DOCTYPE html>  
 <html>  
 <head>  
 <style>  
 #box {width:100px;padding:0 10px;border:20px solid blue;margin:70px;}  
 </style>  
 <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>  
 </head>  
 <body>  
 <div id="box">  
 </div>  
 <script>  
 var box = $('#box');  
 var boxboxWidth=box[0].offsetWidth;//包括补白、边框和内容宽度  
 alert(boxWidth+":"+box.width());//专指内容的宽度  
 </script>  
 </body>  
 </html>  

注意：offsetWidth=borderLeft+paddingLeft+contentWidth+paddingRight+borderRight。
此时alert的值是160:100。即，各浏览器均认为css中的width就是100px即内容的宽度,和padding+border最终相加结果是：160px。
如果把doctype去掉，即进入“怪异模式”，此时，ie6/7/8的值均为100:40，证明它们认为css中width指的和offsetWidth是同一个值，除了内容的宽度外还都包含补白和边框，而内容的宽度则被压缩为40。而ie9,ff,chrome,opera这样的标准浏览器则依然是160:100。
二、使用hack或者在外面套上一层wrapper。
前提是页面处于“怪异模式”，“标准模式”不存在兼容性问题。
1、hack
依然使用上例：假设内容的宽度必须固定为100px。

    Html代码   
    
  
 #box {  
 width:100px !important; // ie9,ff,chrome,opera这样的标准浏览器
 width:160px; //所有的浏览器；它的本意是只对不认识!important的设置。可是ie7、ie8也认识
 +width:160px!important;//ie7
 width:160px/0!important;//ie8
 
 padding:0 10px;border:20px solid blue;margin:70px;  
 }  
 
  //不太正确 
 

2、wrapper

    Html代码   
    
  
 #box {  
 width:100px;  
 margin:70px;  
 float:left;  
 }  
 .wrapper {  
 padding:0 10px;border:20px solid blue;  
 }  

    Html代码   
    
  
 <div class="wrapper">  
 <div id="box"></div>  
 <div style="clear:both"></div>  
 </div>  

总结：使用“标准模式”即可实现兼容，不兼容只发生在“怪异模式”下。而且正常的页面基本上都选择前者，如果选择后者，麻烦不止于此，一些css技巧也将失灵，如将div居中：

    Html代码   
    
 div {margin:0 auto;}