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

包含块(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边形成。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • Containeing Block (包含块) 在CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边...
    Promise_snow阅读 1,657评论 0 0
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 4,976评论 0 6
  • 基本框 CSS假定每个元素都会生成一个或多个矩形框,这称为元素框。各元素框中心有一个内容区(content are...
    exialym阅读 4,328评论 0 2
  • 以下文章是我在网上收集的内容,为了记录自己的学习以及为了以后不到处找而记录下来,如果对你有用,请感谢写这些文章的前...
    DCbryant阅读 4,476评论 0 2