盒子就是一个元素（标签）的所辖范围，简单来说，基本就是一个“矩形区域”。
5.1 盒子概述
所谓盒子，就是将html网页中的标签在网页版面中所占据的平面范围，抽象出来的一个“视觉形状”。
一个最简单的理解就是：几乎所有标签，都可以看做是一个“矩形盒子”，具有一定的宽高（区域）。
总体上来说，一个盒子，是由若干个部分构成的，从内到外依次包括：
盒子内容区，内边距区，边框，外边距区
记住以下几个单词：
content：内容
padding：内边距，又称为内补白，是一片空白区域
border：边框
margin：外边距，又称为外补白，也是一片空白区域
top，right，bottom，left：上，右，下，左
特别注意：
1，一般情况下，一个盒子中放置内容或其他元素（元素也是盒子），实际是放在内容区的。
2，平常我们看不到内边距，边框和外边距，是因为他们默认都是0（宽度，或厚度）。
5.2 盒子的宽高属性 width和height
设置盒子的宽高属性，实际上设置的是盒子内容区的宽高。比如：
div{ width: 100px; height: 100px; }
而盒子实际占据的区域的宽高，可以这样来计算：
盒子所占宽：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
盒子所占高：
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
除了这两个基本宽高属性，还有以下4个范围限定性宽高属性，有时候也会用一用：
min-width： 设定最小宽度
max-width： 设定最大宽度
min-height： 设定最小高度
max-height： 设定最大高度
5.3 边框属性border
边框属性就是设置一个盒子的边框线的具体特性。
边框线的特性有3个：
border-style：
线型，属性值通常有：solid(实线)， dashed(虚线)， dotted(点线)
border-width：
线的粗细，长度单位，比如1px
border-color：
线的颜色，颜色值，比如red， rgb(255, 0, 0)， #FF3366
又由于一个盒子的边框有4个方位(top, right, bottom, left)，则总体上就至少有12个边框属性，形式为：
border-方位-特性，比如：
border-top-style， border-top-width，border-top-color， border-right-width， border-left-color，等等。
示例： border-top-style: solid; border-right-color: #FF0000; border-left-width: 2px;
实际上，还有若干个“单边综合属性”，比如：
border-top：一次性设置上边框线的特性；
border-left：一次性设置左边框线的特性；
....
示例： border-top: 1px solid blue; border-right: 5px dotted green;
应用中，最常用的其实是“border”这一个最大的综合属性，它一次性设置4个边的3个特性，比如：
border： 1px solid red; //表示4变的边框线都是宽度为1px的红色实线。
5.4 内边距属性 padding
含义：内边距是指在盒子结构中，盒子的边框线和内容之间的一段空白区域（内容放不进去）。
我们能设置的就是这个空白区域的大小（宽度）。
同样分4个方向，分别可以单独设置：
padding-top：1px； //上内边距
padding-right：2px； //右内边距
padding-bottom：4px； //下内边距
padding-left：8px； //左内边距
还有一个综合属性：
padding：宽度1 [宽度2] [宽度3] [宽度4]； //这个用的最多，推荐使用。
这个综合属性可以设置1-4个值，不同个数的值，其含义不同，如下所示：
1个值： 表示4个方向都是这个值。
2个值： 第1个表示上下边距的值，第2个表示左右边距的值。
3个值： 第1个表示上边距的值，第2个表示左右边距的值，第3个表示下边距的值。
4个值： 依次代表top， right， bottom， right这4个方向的内边距的值。
记忆： 按给出值的个数，按顺时针依次给上，右，下，左去“赋值”，没有的，就找对面。
5.5 外边距属性 margin
含义：
外边距是指在盒子结构中，盒子的边框线，跟盒子的外部其他元素之间的一段空白区域。
我们能设置的就是这个空白区域的大小（宽度）。
它的属性设置和含义，跟内边距（padding）非常类似：
margin-top：1px； //上外边距
margin-right：2px； //右外边距
margin-bottom：4px； //下外边距
margin-left：8px； //左外边距
margin：宽度1 [宽度2] [ 宽度3] [宽度4]； //同时设置4个方向，用的最多，推荐使用。
外边距的“重叠性”：
当两个垂直方向的外边距（即margin-top和margin-bottom）挨在一起的时候（就是垂直方向上相邻），则这两个外边会“重叠在一起”，表现为只有更大的那个外边距的高度(本来“按理”是两个相加的高度)。
情况1：
margin-bottom 和 margin-top 相邻（挨着）
情况2：
两个margin-top相邻（此时其实是两个嵌套的div）。（两个margin-bottom道理一样）
