CSS学习之盒子模型

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