CSS BOX模型

对于box模型概念的理解以及它与决定元素最终尺寸的方式有何关系，是理解如何设定网
页上的元素位置的基础。box模型应用到块级元素。一个随之而来的概念，内联布局模型
定义了如何设定内联元素的位置。
对于静态（非定位）元素和相对定位元素，计算宽带就是包含块的宽度减去任何水平边距
、边框、填充和滚动条的值。也就是，当从包含块的宽度减去水平边距、边框、填充和滚
动条的值。剩下的部分。
包含块是参考矩形，它的位置和尺寸都用于后代元素位置和尺寸的相对计算，尽管这些元
素都是根据他们的包含块来设定位置，但是并不是通过它们（父元素）来限制它们（子元
素）。子元素也许会超出范围。
根据position熟悉的值判断父元素，然后根据父元素进行定位
如果position属性值是static(默认)或者relative,那么最近的祖先元素的内容box边界
构成包含块，祖先元素的属性可以是以下之一:
block 、 inline-block、list-item 、run-in 、table、 table-cell
如果position属性值是absulte，那么它的父元素就是最近的定位祖先元素----
最近的的祖先元素的position 属性值是 absolute 、fixed、 relative。那么祖先元素
的填充边界构成包含块。

如果position属性值是 fixed  ，那么父元素是视口。