CSS 盒模型简述盒模型是 CSS 中重要的模型。本文先介绍了内部和外部显示类型，再较为详细的介绍了盒模型，最后讲解了盒

前言

盒模型是 CSS 中重要的模型。本文先介绍了内部和外部显示类型，再较为详细的介绍了盒模型，最后讲解了盒模型水平布局的特点。

css 的盒模型有一个外部显示类型，来决定盒子是块级还是内联。同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。

但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。（摘自MDN）

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。（摘自MDN）

盒模型的组成：

鉴于本篇博文并不是细致入微文档百科，盒模型各种属性的详细介绍建议翻阅MDN文档。

盒模型有两种标准标准盒子模型与 IE 盒子模型。

标准盒子模型.png

box-sizing: content-box表示标准盒模型（默认值）。

标准盒模型的 width 和 height 属性的范围只包含了 content。

IE盒子模型.png

box-sizing: border-box表示IE盒模型（怪异盒模型）。

IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。

在很早以前 IE 低版本的浏览器默认使用的都是 IE 盒模型，但这不代表 IE 盒子模型是落后的，即使 IE 永久停用了，IE 盒子模型仍然可以在其他浏览器中使用，并且某些情况下十分好用。

块级盒子 (block box) 和内联盒子 (inline box)会在页面流（page flow）和元素之间的关系方面表现出不同的行为。（摘自MDN）

块级盒子特点：

内联盒子特点：

可以使用display属性，比如 inline 和 block 来控制盒子的外部显示类型。

元素在其父元素中水平方向的位置由以下几个属性共同决定：

父元素内容区的宽度 = 上述属性之和（必须满足）。

如果相加结果使等式不成立，则称为过度约束，则等式会自动调整：

我们经常利用最后一点实现水平居中。

width: 100px;
margin: 0 auto;