CSS : W3C标准盒子模型和IE盒子模型

最新推荐文章于 2026-05-11 11:18:33 发布

原创最新推荐文章于 2026-05-11 11:18:33 发布 · 2.8k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了两种常见的CSS盒子模型：W3C标准盒子模型与IE盒子模型，并通过代码示例展示了这两种模型下元素宽度及所占空间的不同计算方式。

在写html与css的过程中，我们可以将每一个元素看做一个盒子，对于普通的浏览器以及IE浏览器，有两套不同的解析盒子的方法，第一种是W3C标准盒子模型，第二种是IE盒子模型，下面重点介绍这两个盒子模型的区别。
1.如何区分
在CSS中有一个属性叫做box-sizing,对于标准的盒子模型，属性值为border-box,d对于IE来说叫做content-box。
2.内容区，盒子大小，所占空间的计算
标准盒子（以下以宽度计算，长度类推）
内容区宽度 = width;
盒子宽度 = width + padding-left + padding-right + border-left + border-right;
所占空间 = 盒子大小 + margin-left = margin-right ;
IE盒子（以下以宽度计算，长度类推）
内容区宽度 = width - padding-left - padding-right - border-left - border-right;
盒子宽度 = width ;
所占空间 = width + margin-left = margin-right ;
3.代码以及图示

<div>IE盒子</div>
<div>w3c盒子</div>


<style>
	div:first-child{
      width: 100px;
      height: 100px;
      border:10px solid red; 
      /*  IE盒子 width= contentWidth+2*padding+2*border */
    }
	div:nth-child(2){
      width: 100px;
      height: 100px;
      border:10px solid red;
      padding:10px;
      box-sizing: content-box;
	  /*w3c盒子width = contentWidth*/
    }
</style>