标准盒模型和怪异盒模型

先来看看一个CSS属性

box-sizing:content-box   
box-sizing:border-box
box-sizing:inherit

• content-box 设置为标准盒模型
  在标准盒模型中，设置width的宽度就是content的宽度
  整个盒子的宽度为:contentWidth+padding+border +margin
  看下面一段代码，他的总宽度为：500px+20px+10px+0

    .standard {
      width: 500px;
      height: 500px;
      box-sizing: content-box;
      padding:10px;
      border: 5px solid black;
    }

image.png

• border-box 设置为怪异盒模型
  怪异盒模型的宽度为：width(padding和border都计算在width中)+margin
  让我们把上面的CSS改成怪异盒模型看一看效果
  我们设置的width是500，结果contentWidth+padding+border 的总宽度为500，

 .monstrous {
      box-sizing: border-box;
      width: 500px;
      height: 500px;
      padding:10px;
      border: 5px solid black;
    }

image.png

• inherit 规定应从父元素继承 box-sizing 属性的值。

---

应用

• 一般情况下使用标准盒模型
• 如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式
• 在宽度使用百分比的情况下，使用怪异盒模型会方便很多，应为你很难计算加上border跟padding之后应该占百分之几