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


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

原文地址:https://www.cnblogs.com/andy-2014/p/4964245.html