CSS 盒模型

一、概念（以下来源MDN）

CSS 基础框盒模型：CSS 规范的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距（padding）与外边距（margin ），并根据视觉格式化模型来生成元素，对其进行布置、编排、布局（lay out）。常被直译为盒子模型、盒模型或框模型。

CSS 视觉格式化模型:用来处理和在视觉媒体上显示文档时使用的计算规则

二、什么是盒子模型

1.它是一种CSS规范，名称为CSS basic box model，被翻译成盒子模型（在CSS1它的名字叫Formatting model，CSS2的初版定义叫Box model，目前叫CSS basic box model，大概意思就是本来没有盒子模型这个词，叫的人多了规范就变了。）
2.它的具体内容见CSS 基础框盒模型介绍
3.内容简述：

• 它将HTML中的元素用矩形盒子表示

• 每个盒子由四个部分组成（content、border、margin、padding）

  
  
  image.png

三、标准盒模型与IE盒模型

盒子模型由四个部分组成，每个部分都有其属性，其中内容区有三个属性，width、height 和overflow。不同的盒模型分歧出现在width、height的含义上面。

3.1 标准盒模型

标准盒模型是指W3C为CSS语言推荐的标准方式，参考前面2点。
标准盒模型坚持认定width、height就应该表示的是内容区的属性，因此浏览器中真实所占的宽度和高度为padding + border + width。

测试代码如下所示：

    <div style="background-color:green;display:inline-block;
    margin: 10px;
    padding: 20px;
    border: 5px solid red;
    width: 100px;height:100px;">内容区域</div>

示例图如下图所示：

浏览器中表现

盒子模型图

由上可见，width、height就是内容区的宽高，真实高宽变成了150。

3.2 IE盒模型

在IE6之前的IE浏览器都是默认使用IE盒模型，IE6及其以上的版本在标准兼容模式下使用的是标准盒模型，但是仍然支持IE盒模型。
IE盒模型与标准盒模型的区别就是它坚持认为width、height指的是盒子的宽度高度（即属性设置的浏览器中的真实宽高）。用过box-sizing:border-box;应该会有体会，这种属性对于开发者来说还是很方便的。

在IE盒模型下，盒子的表现如下图：

image.png

可以看见内容区被压缩了，此时浏览器中真实宽高=(width,height)正好是我们设置的，很多情况下，我们不会关心内容区域的宽高，只会关心元素在浏览器中的宽高。如果压缩之后内容区域不够显示内容怎么办呢？这时可以设置overflow来调整。

四、两种盒模型的切换

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

• border-box （IE盒模型）
• content-box (标准盒模型)

五、补充

外边距也属于盒子的一部分，但是宽度和高度计算是不包括外边距的（margin）

六、总结

1. 盒子模型是一种CSS规范
2. 盒子模型规定一个元素由4个部分组成（content、border、margin、padding）
3. 有两种盒模型，在CSS3中可以通过box-sizing属性自由设置
4. 不同盒模型的区别在于width、height属性的计算方式上、标准盒模型认为width、height是内容区的，但是IE盒模型认为是指盒子的。

参考

CSS 基础框盒模型
CSS 基础框盒模型介绍
视觉格式化模型
百度百科-CSS盒子模型
百科-IE盒模型缺陷
CSS box-sizing