美文网首页
什么是css的包含块

什么是css的包含块

作者: houxnan | 来源:发表于2020-01-30 20:00 被阅读0次

文章转载自:https://blog.csdn.net/qiu265843468/article/details/52789640

包含块(Containing Block)是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

包含块简单说就是定位参考框,或者定位坐标参考系,元素一旦定义了定位显示(相对、绝对、固定)都具有包含块性质,它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

原理

一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的,这个长方形就被称之为元素的 containing block。一个元素的 containing block 按以下方式定义:

用户代理(比如浏览器)选择根元素作为 containing block(称之为初始 containing block)。

对于其它元素,除非元素使用的是绝对位置,containing block 由最近的块级祖先元素盒子的内容边界组成。

如果元素有属性 'position:fixed',containing block 由视口建立。

如果元素有属性 'position:absolute',containing block 由最近的 position 不是 static 的祖先建立,按下面的步骤:

如果祖先是块级元素,containing block 由祖先的padding edge形成。

如果祖先是内联元素,containing block 取决于祖先的 direction 属性。

如果 direction 是 ltr(左到右),祖先产生的第一个盒子的上、左内容边界是 containing block 的上方和左方,祖先的最后一个盒子的下、右内容边界是 containing block 的下方和右方。

如果 direction 是 rtl(右到左),祖先产生的第一个盒子的上、右内容边界是 containing block 的上方和右方,祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。

如果没有祖先,根元素盒子的内容边界确定为 containing block。

例子

<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</STRONG> paragraph.</EM></P>

      </DIV>

   </BODY>

</HTML>

Illustration of containing blocks

没有指定 position,上方的代码的 containing blocks (C.B.) 确定方式如下:

产生盒子的元素                            其 C.B. 为

body                                    initial C.B. (UA-dependent)

div1                                                body

p1                                                   div1

p2                                                   div1

em1                                                 p2

strong1                                            p2

如果我们设置 div1 的 position:

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

div1 的 containing block 就不再是 body,它变成了初始 containing block(因为这里还没有具有 position 的祖先盒子)。

如果我们按如下方式放置 em1:

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

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

containing blocks 变成如下:

产生盒子的元素                     其 C.B. 为

body                                       initial C.B.

div1                                        initial C.B.

p1                                              div1

p2                                              div1

em1                                           div1

strong1                                      em1

通过放置 em1,它的 containing block 变成了最近的具有 position 的祖先盒子(也就是:div1)。

名词解释

根元素-源文件中,每一个元素都有一个父元素,只有一个例外,它就是根元素。

视口-通过解析文档,连续媒体(比如屏幕就是连续媒体,而打印机则是基于页的媒体)给用户产生一个视口(一个窗口或其它在屏幕上显示的区域)。

相关文章

  • 什么是css的包含块

    文章转载自:https://blog.csdn.net/qiu265843468/article/details/...

  • css包含块

    如果想要给一个元素做absolute定位,就要考虑他的包含块,这个元素的父级元素只有在将position属性设置为...

  • CSS包含块

    根元素:初始包含块 static/relative 元素:由它最近的 block、table cell(类似 ...

  • CSS包含块

    1,写在前面的话 CSS目前还不被认可是一门真正的编程语言,虽然现在已经有像less、saas、stylus这样的...

  • 你不一定知道的css知识——包含块

    包含块(containing block) 这里是css2.1规范10.1章节对包含块的解释 包含块的定义(我不讨...

  • [CSS] 包含块模型

    包含块模型(Containing Block) 当WebKit计算元素的箱子的位置和大小时,WebKit需要计算该...

  • css 包含块containing box

    转自:https://www.cnblogs.com/52php/p/5660073.html[https://w...

  • CSS定位

    CSS定位属性 相对定位 绝对定位 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档...

  • 任务八-主线

    CSS常见属性(上) 块级元素行内元素块级可以包含块级和行内元素,行内只能包含文本和行内元素块级元素占据一整行的空...

  • CSS基础样式

    CSS基础样式 块级元素可以包含块级元素和行内元素 行内元素只可以包含文本和行内元素 宽高只对块级元素生效,对行内...

网友评论

      本文标题:什么是css的包含块

      本文链接:https://www.haomeiwen.com/subject/hocwthtx.html