美文网首页CSS笔记分享
你不一定知道的css知识——包含块

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

作者: 打铁大师 | 来源:发表于2016-09-10 15:59 被阅读85次

包含块(containing block)

这里是css2.1规范10.1章节对包含块的解释

包含块的定义(我不讨论分页媒体)

元素盒子的位置和大小有时候是根据特定矩形计算的,这个特定矩形被称作元素的包含块。元素的包含块定义如下:

1.根元素所在的包含块被称之为初始包含块,也是一个矩形。

2.对于其他元素,如果这个元素的定位是‘relative'或'static',那么包含块由它最近的块容器祖先盒子的内容边形成。
注意:块容器还包括不可替换的内联块和不可替换的表格单元。

3.如果元素的定位是‘fixed’,包含块是由视口建立的。

4.如果元素的定位是‘absolute',其包含块就是最近的已经定位的祖先元素建立(已经定位包括‘absolute','relative'或'fixed'定位)。

如果该祖先元素是一个行内元素,包含块就是环绕着为该元素生成的第一个和最后一个内联盒的padding box的边界框。在css2.1中,如果该内联元素被跨行分割了,那么包含块是未定义的。

具体的说法是:

b) 如果祖先是内联元素,包含块取决于祖先的 direction 属性。

(i)如果 direction 是 ltr(左到右),包含块的顶、右边是祖先元素生成的第一个框的顶、左内边距边界 (padding edges) ,左、下边是祖先元素生成的最后一个框的右、下内边距边界 (padding edges)。

(ii)如果 direction 是 rtl(右到左),包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ,左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)。

如果祖先是块级元素,那么包含块由祖先的 padding边形成。

如果没有这样的祖先,包含块就是初始包含块。

相关文章

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

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

  • css包含块

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

  • CSS包含块

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

  • CSS包含块

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

  • [CSS] 包含块模型

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

  • pure.css框架源码详细解析

    一篇文章包你学会使用pure.css框架,理解其原理,并学会其包含css知识,学会自己写css组件 前提知识 选择...

  • css 包含块containing box

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

  • 什么是css的包含块

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

  • 任务八-主线

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

  • CSS基础样式

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

网友评论

    本文标题:你不一定知道的css知识——包含块

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