CSS盒子模型

1. 内容区
通过width和height来设定宽高，元素中所有的子元素和内容文本都显示在这个区域里面

2. 边框
通过border-xxx来设定，常用属性如下：
border-width：边框的宽度
border-color：边框的颜色
border-style：边框的样式

详细说明如下：
border-width：分成上右下左四个方向，可以单独设定某一个方向的，也可以一次性设定所有方向的，省略不写的状况下，默认的大小是3个像素。

/* 设定一个值：一次代表了四个方向，例如设定四个边框都是10px */
border-width: 10px;

/* 设定两个值：格式为 上下 左右，例如上下=10px 左右=20px */
border-width: 10px 20px;

/* 设定三个值：格式为 上 左右 下，例如上=10px 左右=20px 下=30px */
border-width: 10px 20px 30px;

/* 设定四个值：格式为 上 右 下 左，例如上右下左方向分别是10px, 20px, 30px, 40px */
border-width: 10px 20px 30px 40px

可以通过属性来单独设定某一个方向的边框大小，如下：
border-top-width：上
border-rigth-width：右
border-bottom-width：下
border-left-width：左

border-color：跟border-width一样的，使用方式没有区别，省略不写的状况下，默认使用前景色color的值，如果没有设定color的话，color默认值是black。

border-style：跟border-width一样的，使用方式上没有区别，省略不写的状况下，默认使用的样式是none，即没有边框。一共有下面四种样式：
solid：实线
dotted：点状虚线
dashed：虚线
double：双线

border的简写：可以一次性设定width，color，style，方式如下：

/* width设定10px，color设定为red，style设定为solid
   注意：三个的顺序没有要求，写成width color style或者style width red显示的效果都是一样的
 */
border: 10px red solid

4. 内边距
内边距有四个方向，上右下左。跟边框的设定类似，可以分别通过四个单独的属性设定，也可以通过简写设定。

/* 设定上内边距 */
padding-top: 10px

/* 设定右内边距 */
padding-right: 10px;

/* 设定下内边距 */
padding-bottom: 10px;

/* 设定左内边距 */
padding-left: 10px

/* 简写：一次性设定四个方向的内边距，规则与边框的一致 */
padding: 10px;

盒子可见区域的大小是由内容区+内边距+边框决定的，计算盒子大小的时候，要将三个累加到一起计算。

5. 外边距
外边距不会影响到盒子可见区域的大小，但是会影响到盒子的位置，影响到盒子实际占用的空间。也一共分成了上右下左四个方向，设定方式和前面的都是类似的，但是外边距可以设定成负值，设定成负值会向相反的方向移动。

/* 设定上外边距 */
margin-top: 10px;

/* 设定右外边距 */
margin-right: 10px;

/* 设定下外边距 */
margin-bottom: 10px;

/* 设定左外边距 */
margin-left: 10px;

/* 简写：一次性设定四个方向的外边距，规则与边框的一致 */
margin: 10px;