标准盒模型与IE盒模型的区别

标准盒模型

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
  }
</style>
<div class="box">
  盒子模型
</div>

标准盒模型的模型图如上，不难看出它的宽高定义为：

盒子总宽=width+padding+border+margin
盒子总高=height+padding+border+margin

所以标准盒子的width/height只有文本自身的宽高，不包含padding+border

所以在上述代码中，元素的height设置为100px，但因为padding的存在，所以它的盒子高140px。

IE怪异盒模型

同样看看它的盒模型图：

可以看出，它的盒子宽高如下:

盒子总宽=width+margin
盒子总高=height+margin

由此可见，IE盒模型的width/height是包含padding+border的。

Box sizing

CSS 中的 box-sizing 属性定义了引擎如何计算一个元素的总宽度和总高度。

• content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致。
• border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致。
• inherit 指定 box-sizing 属性的值，应该从父元素继承。

如果将上述代码改为如下内容：

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
<div class="box">
  盒子模型
</div>

则盒子所占据的高为100px。