【CSS】浅谈CSS中的包含块

最新推荐文章于 2024-05-12 09:11:30 发布

码婆Doph

最新推荐文章于 2024-05-12 09:11:30 发布

阅读量1k

点赞数

分类专栏：原创 css

本文链接：https://blog.csdn.net/liu_jiachen/article/details/78625329

版权

58 篇文章 3 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

今天同大家浅谈一下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>

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

关注