【CSS】浅谈CSS中的包含块

来源：互联网发布：知乎的经典评论编辑：程序博客网时间：2024/06/04 01:14

今天同大家浅谈一下css中的包含块。鄙人才疏学浅，文中误笔，还请不吝指出。

包含块是什么

一般情况下，在css中，一个元素的位置和尺寸的计算都相对于一个矩形，这个矩形被称为包含块。举例说明，比如，子元素的初始化布局总是在父元素的左上角。

包含块是一个相对概念，它不一定是绝对的某个元素。

这里有很多人把包含块同父级元素混为一谈，这是不符合CSS机制的。

在HTML中，根元素的包含块叫做初始包含块，具体创建由客户端决定；
当定位为fixed时，则包含块由view（视口）创建；（根据window）
当定位值为relative、static、或者没有设定定位，则包含块由最近的父元素或者祖先元素创建；
当定位position为absolute，则包含块由最近的relative、absolute、fixed创建，如果没有定位的祖先元素，则包含块为初始包含块(view)，也就是客户端窗口；
当祖先元素是行内元素时，包含块取决于父元素或者祖先元素的direction属性。

<body>    <div>        <span>            <em></em>        </span>    </div></body>

父元素 body > div > span > em
但是包含块只能暂时说，em的包含块是span创建的。
因为如果我给em加一个position:absolute,div加position:relative;那么，em的包含块就变成了div。

<body>    <div style="position:relative;">        <span>            <em style="position:absolute;"></em>        </span>    </div></body>

今天就简单谈到这里。以上是我的理解。
希望我的博文对大家有些许帮助。
挚谢阅读。

阅读全文

0 0