盒模型一二三（一）：盒世界，知几何

学习 HTML 和 CSS 将近一个月，我以为：层级（嵌套）关系和盒模型（Box Model）是理解和学习这两门语言的基石，正如图层概念是 Photoshop 的基础。因此，充分理解盒模型有助于对于布局的掌控。

以上是我在网上随手截取一张盒模型的示意图，可以看出盒模型主要分为四部分：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。网络上对盒模型有各种各样的比喻，简而言之，可以将盒模型理解为二维世界的盒子（正如其中文字面意思），内容=盒子盛放的东西，内边距=盒内物品与盒壁的空隙，边框=盒子四壁，外边距=盒子与盒子之间的空隙。

这里提一个不太相关的翻译问题，由于很多东西都是外来物（比如HTML），以英语为主，因此在翻译上会存在分歧。比如 Box Model 在 W3C 中文官网上翻译为“框模型”，也有人翻译为“盒子模型”；而对于 padding 和 margin 的翻译也存在较大的差异，比如有人将其翻译为“填充”和“边界”。如何翻译，问题不大，但是一要选择自己易于理解的；二要前后一致，如不能翻译为“填充“和”外边距”，这样就显得不伦不类了（就像在缩进时同时使用空格和Tab），时尚界可以混搭，但前端开发依然属于严谨规范的比特世界。另外，这也告诫我们还是要尽可能多读英文原版内容。

盒模型

回归盒模型的话题，图片中的T、R、B、L分别代表Top、Right、Bottom、Left，比如TP=Top padding，可以看出除content外，padding/border/margin都有上、右、下、左这四个属性。记住上、右、下、左的顺序也很重要，这牵涉到复合的问题。为何是上、右、下、左的顺序？因为外国人在指认方向时通常采用顺时针的顺序（如某物在你的9点钟方向）。

盒模型的大小：
Box Width = LB + LP + Content Width + RP + RB
Box Height = TB + TP + Content Height + BP + BB

盒模型的常用属性有：

1. 3个：padding/border/margin

2. 4个：top/right/bottom/left

3. 3个：color/style/width （radius/image 是 CSS3 新增属性）

这些属性大多可以进行复合，如padding-top、border-left-width，但是有几点需要注意：

1. padding 和 margin 只有 top/right/bottom/left 四个属性。
   如 padding-top = the top width of padding，以上面所提盒子的比喻来理解，间隙本来就只是空间属性而已。

2. 盒模型的属性值通常成对出现。
   比如margin: 10px 表示上下左右都是10像素；块元素居中的样式margin: 0 auto，0 表示上下、auto表示左右；而margin: 0 auto 10px 表示上=0，左右=auto，下=10px。

3. 浏览器对块元素的默认样式问题：如 IE7 下块元素的盒模型样式：
   

4. 复合属性写法：
   如果我们想给 div 添加样式，可以这样写：

div {
    border-width:5px;
    border-style: solid;
    border-color: red;
}

为了精简代码，也可以采用如下的复合属性写法：

div {
  border:5px solid red;
}