盒子模式（模型）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。
通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。
css盒子模式（模型）又称为框模型 (Box Model) ，是由元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素组成的（如下图所示）。
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
盒子模型（Flexible Box） 属性
1. 内容区域设定(content)：
- width：宽度的设定
- height：高度的设定
宽度和高度的设定可以是具体的数值（带单位），也可以是百分比设置。
2. 内边距（padding）的设定：
- 盒子的内边距分为上右下左四个方向
- 内边距的设定用来控制盒子中装载的内容到盒子边缘（边框）之间距离。
- 盒子的内边距占据的是盒子里面的空间，最小为0，不允许出现负值。
| 属性 | 说明 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
3. 外边距（margin）的设定
- 盒子的外边距分为上右下左四个方向
- 外边距的设定用来控制盒子外围四周的距离，不属于盒子本身范畴
- 外边距的主要用途是控制盒子的位置，所以可以出现负值
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
4. 边框（border）的设定
-
大部分的元素对象在默认情况下是没有边框的
-
要设定边框，必须同时设定3个要素：宽度、样式和色彩。
- border 复合属性
-
边框按属性要素分类的扩展属性（border-width：边框宽度；border-style：边框样式；border-color：边框色彩）
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
