本文共 894 字，大约阅读时间需要 2 分钟。

原作者charlee、原始链接以及本声明。

box模型即由<div>等块元素的 margin、padding、border、width、height 等属性构成的显示模型，它是CSS布局的基础。通过设置<div>的各种属性，可以得到任何想要的页面效果。

各个元素的含义如下：

• margin: box外边界到外层元素的距离，即余白。
• border: box的边界宽度。
• padding: box内的内容到box内边界的距离，即边距。
• width: box的宽度。
• height: box的高度。

其中有问题的就是 width 和 height 的定义。一般的浏览器将 width 和 height 定义为除掉 margin、padding、border 之后的box内容的大小，实际上 box 所占有的面积为定义的 width/height 再加上 margin、padding、border的大小。

下图演示了一个box模型的大小计算方式，背景中每个方格为 10px。源代码如下：

#box {  width: 150px;  height: 100px;  background: #F00;  border: solid 20px green;  padding: 30px;  margin: 10px;}
   
  
    
   

可以看到，这个 150x100 的 box 实际上中间的内容部分为 150x100，算上 margin、border、padding 的总大小为 270x220。

而 IE 在 Quirk模式(兼容模式)下，计算width和height时会将margin、border、padding算进去， width和height成为了box的总大小。上面的代码在 IE 下显示结果如下：

那么如何让 IE 与其他的浏览器显示效果相同？可以通过在HTML文档开头指定 DOCTYPE 使 IE 工作在 Standard模式而不是 Quirk模式下。例如：

....

下面是各种 DOCTYPE 下IE对box模型的渲染方法的测试页面，有兴趣的可以用IE打开看看。

转载地址：https://linuxstyle.blog.csdn.net/article/details/3291837 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！