盒子的大小 = 内容区 + 内边距 + 边框
盒子模型：
盒子分为： 内容区（content）
内边距（padding）
边框（border）
外边距（margin）
内容区：
盒子放置内容的区域，即为文本内容，子元素都存在于内容区中。
如果没用设置边框，内边距，默认盒子和内容区的大小是相同的。
width height (这两个属性设置内容区的大小 只使用于块元素)
内边距：
内容区 与 边框 之间的空间。
1. padding ：10px 20px 30px 40px
这样就是设置了上 右 下 左 的四个方向的内边距。
2. padding ：10px 20px 30px 上 左右 下
3. padding ：10px 20px 上下 左右
4. padding ： 10px 四个边框都是10px
边框：
border
设置盒子的边框：
border ： 1px red solid；
边框大小 颜色 样式
也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框
边框的样式：
none （没有边框）
dotted （点线）
dashed (虚线)
double （双线）
groove（脊线）
inset (凹边)
outset （凸边）
外边距：
外边距是元素边框与周围元素相距的空间。
使用margin 设置外边框。
当将左右外边距设置为auto时，浏览器会将左右外
边距设置为相等，所以这行代码margin:0 auto可
以使元素居中。
