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  ，那么父元素是视口。

版权声明：本文为博主原创文章，未经博主允许不得转载。