导言：当HTML 定义了各类元素以后，由CSS将所有的元素置于不同的盒子，一个个盒子和其中所包含的的元素组成了一个网页的基本部分...
一、CSS的盒模型
- Content box: 这个区域是用来显示内容，大小可以通过设置
width和height. - Padding box: 包围在内容区域外部的空白区域； 大小通过
padding相关属性设置。 - Border box: 边框盒包裹内容和内边距。大小通过
border相关属性设置。 - Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过
margin相关属性设置。
1.标准盒模型
一般在标准盒模型中，设置的height和width都只对content-box起作用，padding、margin和border需另外进行设置。
tips:
<1> margin并不计入实际大小，但是仍然会影响页面所占的空间（影响盒子外部所占的空间）一般盒子的范围到边框为止，并不涉及到margin。
<2> 且牢记模型的总宽度和总高度=各部分*2（除content-box仅计算一次即可）后的总和
2.替代（IE）盒模型
该种盒模型下的宽度都是可见宽度，因此内容宽度是该宽度减去边框和填充部分
通俗点来讲：可以一次性设置想要的呈现方式，不必再单独设置padding，border等元素的参数；
二、宽高部分解释
① 宽高：
width被认定为左内边界到右内边界的距离
② 高度：
height一般被认为是上内边界到下内边界的距离
tips：
在CSS中任何块级的元素均可被设置显示高度，如若 设置的显示高度小于内容高度，则自动添加一个滚轮，若大于内容高度，则依据浏览器的overflow属性
宽高和margin均可设置为auto：
对于块级元素：
（1）宽度设置为auto：则会尽可能的宽，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距
（2）高度设置为auto：则会尽可能的窄，元素高度=恰好足以包含其内联内容的高度
