1. 前言
盒子模型，英文即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
2. 盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
盒子模型的示意图：
标准盒子模型：
上图显示：
- 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： 内容、内边距、边框、外边距。
- 在 CSS的标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
3. 认识padding
3.1 padding区域也有颜色
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有boder以内的区域。
3.2 padding有四个方向
padding是4个方向的，所以我们能够分别描述4个方向的padding。方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
小属性的写法：
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
padding:30px 20px 40px 100px;
如果写了四个值，则顺序为：上、右、下、左。
如果只写了三个值，则顺序为：上、右、下。??和右一样。
如果只写了两个值，比如说：
padding: 30px 40px;
则顺序等价于：30px 40px 30px 40px;
要懂得，用小属性层叠大属性。比如：
padding: 20px; padding-left: 30px;
4. 认识border
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
4.1 border-style
border的所有的线型如下：（我们可以通过查看CSS参考手册得到）
4.2 border拆分
border是一个大综合属性。比如说：
border:1px solid red;
就是把4个边框，都设置为1px宽度、线型实线、red颜色。
border属性是能够被拆开的，有两大种拆开的方式：
- （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
- （2）按方向拆开：border-top、border-right、border-bottom、border-left。
现在我们明白了：一个border属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：
border-width:10px 20px; border-style:solid dashed dotted; border-color:red green blue yellow;
(1）按三要素拆：
border-width:10px; //边框宽度 border-style:solid; //线型 border-color:red; //颜色。
等价于：
border:10px solid red;
(2)按方向来拆：
border-top:10px solid red; border-right:10px solid red; border-bottom:10px solid red; border-left:10px solid red;
等价于：
border:10px solid red;
转自：https://www.cnblogs.com/smyhvae/p/7256371.html
原文地址：https://www.cnblogs.com/sunfie/p/8407445.html