什么是 "containing block"

henry14 发布于2019-08-28 17:56 / 1620人阅读

摘要：简写为有以下几种情况根元素所在的包含块是一个长方形，称为初始的包含块。假如元素的设为或，包含块是由最近的父容器块的内容区边缘形成的。假如元素的设为，包含块是由所在的或决定。

官方定义：一个元素盒子的位置和大小有时相对于某个矩形来计算的，此矩形称为此元素的包含块。简写为：C.B.
有以下几种情况：
1、根元素所在的包含块是一个长方形，称为初始的包含块。
2、假如元素的position设为‘relative’或‘static’，包含块是由最近的父容器块的内容区边缘形成的。
3、假如元素的position设为‘fixed’，包含块是由所在的viewpoint或page area决定。
4、假如元素的position设为‘absolute’，包含块是由最近带有‘position’属性的祖先决定。

祖先元素是行内元素，包含块是第一个和最后一个内联盒子所包围的填充盒子，在CSS2.1，行内元素跨越多行，那么包含块是未定义的，否则，包含块是由祖先的补白形成。（~~翻译的有些不清楚~~）

假如没有那样的祖先，包含块就是初始 C.B.

代码示例：



    
       Illustration of containing blocks
    
    
        
            This is text in the first paragraph...
            This is text  in the 
            second paragraph.

元素 --- 包含块
html --- 初始 C.B.
body --- html
div1 --- body
p1 --- div1
p2 --- div1
em1 --- p2
strong1 --- p2

假如设置div1:

#div1 { position: absolute; left: 50px; top: 50px }

div1的包含块将不是body，而变成html.

假如也设置em1:

#div1 { position: absolute; left: 50px; top: 50px }
#em1  { position: absolute; left: 100px; top: 100px }

上述包含块发生什么变化？

元素 --- 包含块
body --- html
div1 --- 初始 C.B.
p1 --- div1
p2 --- div1
em1 --- div1
strong1 --- p2

W3c传送门：containing-block-details

参考：
1、CSS核心：包含块（Containing Block）
2、CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？

云服务器 GPU云服务器 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110903.html

img[src=&quot;&quot;] img无路径情况下，灰色边框去除解决方案

摘要：标签无路径情况下，灰色边框去除解决方案解决办法图片出错的时候调用默认的图片绝对定位聚焦解决方案聚焦解决方案聚焦解决办法聚焦解决方案隐藏 img[src=] img标签无路径情况下，灰色边框去除解决方案 1.Js解决办法 function whenError(a){ ...

MyFaith 2019-08-29 12:12 评论0 收藏0
img[src=&quot;&quot;] img无路径情况下，灰色边框去除解决方案

摘要：标签无路径情况下，灰色边框去除解决方案解决办法图片出错的时候调用默认的图片绝对定位聚焦解决方案聚焦解决方案聚焦解决办法聚焦解决方案隐藏 img[src=] img标签无路径情况下，灰色边框去除解决方案 1.Js解决办法 function whenError(a){ ...

animabear 2019-08-01 16:29 评论0 收藏0
css

摘要：如内可以包含块级元素与块级元素并列内联元素与内联元素并列。而对于使用脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。css概念　　CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。css引入方式1. 行内式　　行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用...

番茄西红柿 2019-04-23 13:25 评论0 收藏0
使用JS实现点击button按钮切换图片具体代码

　　不废话，直奔主题，使用JS实现点击button按钮切换图片，实现效果如图：　　很容易实现吧，这个是用Dreamweaver写的，现在我们就用JS的一个入门案列。　　其实很多时候想法与实际有差距。我们先做了一个简单的图片切换。　　body部分：　　<body> 　　<h1>JS实现图片的切换</h1> 　　<divclass="containe...

3403771864 2022-10-24 22:11 评论0 收藏0