CSS Box Model

盒子模型：margin(外边距)，border(边框)，padding(内边距)，content(内容)。

类别

由于历史的原因，盒子模型有两个标准：

• IE盒子模型
• 标准盒子模型

这两个标准产生于浏览器厂商之间的竞争。

IE 盒子模型

IE 盒子模型认为：content = border + padding = width

盒子总宽度 = content + margin;

#container {
  box-sizing: border-box; /* 将模型调整为 IE 盒子模型 */
  
  width: 300px;
  padding: 20px;
  margin: 10px;
  
  border: 10px solid green;
  background: blue;
} 

我们可以使用谷歌浏览器查看一下，整个盒子的总长度为 320px

width +margin-left + margin-right = 300 + 10 + 10 = 320px。

borderBox.png

我们将width调整为300px，只有外边距可以影响盒子的宽度。

标准盒子模型

标准盒子模型认为 width = margin + border + padding + content

#container {
  box-sizing: content-box; /* 将模型调整为标准盒子模型 */
  -moz-box-sizing: content-box;
    
  width: 300px;
  padding: 20px;
  margin: 10px;
  
  border: 10px solid green;
  background: blue;
} 

当我们设置宽度时，content会自动调整，我们设置margin/border/padding都不会影响盒子的宽度。

contentBox.png

当我们设置width 的时候：盒子的长度就等于内容的长度，其余部分很容易计算。