盒子模型

即box model。无论是div、span、还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

• width和height：==内容==的宽度、高度（不是盒子的宽度、高度）。
• padding：内边距。
• border：边框。
• margin：外边距。

真实占有宽度 = 左border + 左padding + width + 右padding + 右border

如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width

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;

上面的padding对应盒子模型为：

下面的写法：

padding-left: 30px;
padding: 20px;

第一行的小属性无效，因为被第二行的大属性层叠掉了。

认识border

border就是边框。边框有三个要素：像素（粗细）、线型、颜色

border的所有的线型如下：

（1）按三要素拆：

border-width:10px;    //边框宽度
border-style:solid;   //线型
border-color:red;     //颜色。

(2)按方向来拆：

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)

    border-top-width:10px;
    border-top-style:solid;
    border-top-color:red;
    border-right-width:10px;
    border-right-style:solid;
    border-right-color:red;
    border-bottom-width:10px;
    border-bottom-style:solid;
    border-bottom-color:red;
    border-left-width:10px;
    border-left-style:solid;
    border-left-color:red;

一个border属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;