包含块

最新推荐文章于 2023-07-24 11:46:21 发布

秋天1014童话

最新推荐文章于 2023-07-24 11:46:21 发布

阅读量1.9k

点赞数 1

分类专栏： web前端 CSS3

本文链接：https://blog.csdn.net/u013217071/article/details/60132286

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

CSS3

27 篇文章 0 订阅

订阅专栏

前端技术研究一：包含块

给一个div设置它的宽度为100px，然后再设置它的padding-top为20%。问：现在这个div有多高？

.inner{
        position: absolute;
        width: 100px;
        padding-top: 20%;
}
.mid{
    width: 200px;
}
.wrap{
    position: relative;
    width: 300px;
}
//html
<div class="wrap">
    <div class="mid">
        <div class="inner"></div>
    </div>
</div>

W3c的说法：
这里写图片描述

如果按照w3school说的，这个inner的高应该是40px，但是实际不是，而是60px，是以wrap的宽度计算的，由此可见，w3school的说法不成立。

那么，当padding设置为%时到底以谁为参考呢？
答：百分比形式的 margin-top 和 padding-top，都是相对于元素包含块的宽度。
其实是以包含块为参考的。通俗点来说就是谁包含它，它就以谁为参考，在这里inner设置了position:absolute脱离了原来的文档流，就会去寻找它的祖先元素设置了position:relative的元素作为它的包含块。

“包含块”的定义

元素（生成的）盒的位置和大小有时是根据一个特定矩形计算的，叫做该元素的包含块（containing block）。元素的包含块的定义如下：

根元素所在的包含块是一个被称为初始包含块的矩形。对于连续媒体，尺寸取自视口的尺寸，并且被固定在画布开始的位置；对于分页媒体就是页区（page area）。初始包含块的’direction’属性与根元素的相同
对于其它元素，如果该元素的position是’relative’或者’static’，包含块由其最近的块容器祖先盒的content边形成
如果元素具有’position: fixed’，包含块由连续媒体的视口或者分页媒体的页区建立
如果元素具有’position: absolute’，包含块由最近的’position’为’absolute’，’relative’或者’fixed’的祖先建立，按照如下方式：
1. 如果该祖先是一个内联元素，包含块就是环绕着为该元素生成的第一个和最后一个内联盒的padding box的边界框（bounding box）。在CSS 2.1中，如果该内联元素被跨行分割了，那么包含块是未定义的
2. 否则，包含块由该祖先的padding边形成如果没有这样的祖先，包含块就是初始包含块

分页媒体中，一个绝对定位的元素是相对于其包含块定位的，忽略所有页结束符（就像文档是连续的一样），该元素随后可能被拆分到多页

对于绝对定位的内容，如果被解析到一个除元素所在的页面（当前页面）之外的其它页面上的位置，或者是当前页上已经为打印渲染好了的位置，打印机可能把该内容放在

当前页上的另一个位置
后续页，或者
可能直接省略它

注意，一个被跨行分割的块级元素可能在每一页上的宽度都不同，还可能存在设备特定的（device-specific）限制

例如：不指定position的话，如下文档

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
     <TITLE>Illustration of containing blocks</TITLE>
   </HEAD>
   <BODY id="body">
    <DIV id="div1">
        <P id="p1">This is text in the first paragraph...</P>
        <P id="p2">This is text <EM id="em1"in the
        <STRONG id="strong1">second</STRONGparagraph.</EM></P>
    </DIV>
   </BODY>
</HTML>

建立的包含块（C.B.）如下：

盒子     包含块被建立
html       initial C.B. (UA-dependent)
body       html
div1       body
p1         div1
p2         div1
em1        p2
strong1    p2

如果我们对”div1”定位：

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

它的包含块就不再是”body”了，变成了初始包含块（因为没有其它定位的祖先盒了）

如果我们也对”em1”定位：

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

包含块表变成了：

盒子     包含块被建立
html       initial C.B. (UA-dependent)
body       html
div1       initial C.B.
p1         div1
p2         div1
em1        div1
strong1    p2

对”em1”定位后，它的包含块变成了最近的定位的祖先盒（即，由”div1”生成的）

包含块–视觉格式化模型，对元素尺寸、位置往往由该元素所在的包含块决定。
包含块判定及其范围：
这里写图片描述

w3chelp专门解释了，当position为absolute的元素的相对于position不是static的祖先元素定位，当这个元素为行内元素时，包含块为“包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ，右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)”；当为块级元素，相对于他的内边距边界定位。http://www.w3help.org/zh-cn/kb/008/里面有个流程图，解释的太好太清晰了，真是难得点赞！