盒子模型.md

# 盒子模型(Box Model)

当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 **CSS 基础框盒模型（CSS basic box model）**，将所有元素表示为一个个矩形的盒子。所有 HTML 元素可以看作盒子，在 CSS 中，**Box Model** 这一术语是用来设计和布局时使用。

**CSS 盒模型**本质上是一个盒子，封装周围的 HTML 元素，每个盒子由四个部分（或称区域）组成：**内容（Content）**，**内边距（Padding）**，**边框（Border）**，**外边框（Margin）**。**盒模型**允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了**盒子模型（Box Model）**：

![css 盒模型](https://github.com/JofunLiang/css-key-concepts/blob/master/img/box-model.gif)

**CSS 盒模型**不同组成部分的说明：
* **Content（内容）** - 由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。
* **Padding（内边距）** - 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。当其取值为百分比时，该百分比都是相对于包含该元素的块的**宽度**（相对于该块的百分比）。
* **Border（边框）** - 由边框边界限制，扩展自内边距区域，是容纳边框的区域。即围绕在内边距和内容外的边框。
* **Margin（外边距）** - 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。当其取值为百分比时，该百分比都是相对于包含该元素的块的**宽度**（相对于该块的百分比）。


## 标准盒模型与怪异盒模型

**盒子模型**分为两种：第一种是 **W3C 标准的盒子模型（标准盒模型）** 、第二种 **IE 标准的盒子模型（怪异盒模型）**。

当前大部分的浏览器支持的是 **W3C 的标准盒模型**，也保留了对**怪异盒模型**的支持，当然 IE 浏览器沿用的是**怪异盒模型**。**怪异模式**是“部分浏览器在支持 W3C 标准的同时还保留了原来的解析模式”，**怪异模式**主要表现在 **IE 内核**的浏览器。

**标准盒模型**与**怪异盒模型**的表现效果的区别：
* **标准盒模型**中 width 指的是**内容（Content）区域**的宽度；height 指的是**内容（Content）区域**的高度。标准盒模型下**盒子的大小** = width + Border + Padding + Margin。
* **怪异盒模型**中的 width 指的是内容（Content）、边框（Border）、内边距（Padding）总和的宽度，即 width = Content + Border + Padding；height 指的是内容（Content）、边框（Border）、内边距（Padding）总和的高度。怪异盒模型下**盒子的大小** =width + Margin

> **注意**：**W3C 的标准盒模型**和**IE 怪异盒模型**主要区别是：盒模型中的 width 是否包含 border 和 padding。**W3C 的标准盒模型**的 width 不包含 border 和 padding，而**IE 怪异盒模型**的 width 中包含 border 和 padding。


## 浏览器如何解析盒模型

如果是定义了完整的 doctype 的标准文档类型，无论是哪种模型情况，最终都会触发**标准模式**，如果 doctype 协议缺失，会由浏览器自己界定，在 IE 浏览器中 IE9 以下（IE6、IE7、IE8）的版本触发**怪异模式**，其他浏览器中会默认为 **W3C标准模式**。


## 设置盒模型解析模式

我们还可以通过设置 HTML 元素的 **box-sizing** 来设置盒子模型的解析模式

**box-sizing** 的属性值：
* **content-box**： 默认值，border 和padding 不算到 width 范围内，可以理解为是 **W3C 的标准模型**
* **border-box**：border 和 padding 划归到 width 范围内，可以理解为是 **IE 的怪异盒模型**
* **padding-box**：将 padding 算入 width 范围

当设置为 **box-sizing: content-box** 时，将采用标准模式解析计算（默认模式），当设置为 **box-sizing: border-box** 时，将采用怪异模式解析计算。如：
```html
<!-- 将 div 设置为怪异盒模型解析模式 -->
<div style="box-sizing: border-box;"></div>
```

**关于更多CSS核心概念的文章请关注GitHub[CSS核心概念](https://github.com/JofunLiang/css-key-concepts)**。