CSS盒模型的四个边界
- Content edge内容边界
- padding edge内边距边界
- Border edge边框边界
- Margin edge外边框边界
box-sizing的使用
定义了user agent应该如何计算一个元素的总宽度和总高度。
box-sizing:content-box;则标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。
box-sizing:border-box; width 和 height 属性包括内容，内边距和边框，但不包括外边距。
工作中常用的是border-box
盒子的种类
块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为.
一个被定义成块级的（block）盒子会表现出以下行为:
- 每个盒子都会换行
- width 和 height 属性可以发挥作用
- 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 盒子不会产生换行。
- width 和 height 属性将不起作用。
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
