盒模型简介：
HTML元素可以分为三类：
块状元素（block）,
行内元素（inline）,
行内块元素（inline-block）
块状元素：
- 在默认情况下，宽度会自动铺满于父元素，也就是一个块级元素会独占一行，而且他后面的元素会另起一行显示；
- 宽（width),高（height），内边距，外边距是可以进行具体设置的 ；
行内元素：
- 行内元素不会独占一行 ，相邻的行内元素会依次排列，不足则换行；
- 宽高是无法指定的，其大小是由里面的内容撑开决定；
- 虽然宽高无法指定，但是水平方向上的内边距，外边距是可以进行设置的；
对于一个盒子来说，它是由四部分组成，其中 margin叫做外边距，border叫做边框 ，padding叫做内边距，content叫做内容边距；
注意：
盒子在计算大小的时候有两套你不同的标准，即有两种盒模型 ：
- W3C的标准模型：盒子的空间占有度：content width +padding +border+ margin;
- IE的怪异盒模型：盒子的空间占有度：width(padding和border包含在内) +margin;
在CSS的标准盒模型中，width和height指的是内容区域的宽度和高度，增加内边距，边框 ，外边距不会影响内容区域的尺寸，但是会增加盒子的大小；<这个问题可以通过 box-sizing属性来解决，>
box-sizing:
该属性用于更改默认CSS盒模型的类型；
box-sizing属性的默认值为:content-box,也就是标准盒模型 ；
box-sizing的另外一个属性值:border-box,指的是IE怪异盒模型；