CSS魔法堂：不得不说的Containing Block

opengps 发布于2019-08-30 12:53 / 1815人阅读

摘要：前言魔法堂重新认识和中提到在没有兄弟盒子时，的左右边框会与所属的的左右相接触。对于的元素若不存在的为的父，其为。正常情况若子尺寸尺寸，则子溢出溢出后的显示效果由属性值决定。异常情况下当时，若子的尺寸大于的尺寸而城撑大。

前言

《CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins》中提到在没有floated兄弟盒子时，line box的左右边框会与所属的containing block的左右content edge相接触。那到底什么是containing block(abbr. CB)呢？
containing block在CSS的visual formatting model中十分重要的理论基础，因为盒子的宽/高度自动值/相对值的计算，相对/浮动/绝对定位，均依赖containing block

如何判断盒子的containing block？

一图胜千言

initial containing block

首先我们关注一个特殊的CB——initial containing block(abbr. ICB)，可以将它作为“备胎”CB，注意是“备胎”而不是最外层的CB，因为CB们不存在嵌套关系，应该说CB间无任何直接关系。“备胎”顾名思义是说若盒子对应不上其他CB，至少还有它。"dear, i would be there 4 u 4ever" by ICB:)
因为CB涉及到盒子的定位，因此我们还要关注另一个CSS属性——direction。而ICB的direction则继承自root element，也就是html元素。
那ICB的尺寸和定位又是如何呢？ICB尺寸和定位与Viewport一致。说了跟没说似的:(
说起Viewport大家应该会想起开发mobile web时必备的，这句元信息就是用来操作Viewport也就是说会影响到ICB。
而Viewport的尺寸固定为 浏览器的工作区域尺寸 - 垂直/水平滚动条尺寸
通过JS获取Viewport的高宽

</>复制代码 
;(function(exports){
  var doc = document,
      docEl = doc.documentElement,
      scrollLen = function(tpl){
        var muav = null,
            ret = 0,
            factory = document.createElement("div")
        factory.innerHTML = tpl
        doc.body.appendChild(muav = factory.firstChild)
        ret = muav.offsetWidth
        muav.remove()
        return ret
      }("")
  var v = exports.viewport = function(prop){
    return v[prop]()
  }
  v["width"] = function(){
    return docEl.clientWidth || (window.innerWidth - getVScrollLen())
  }
  v["height"] = function(){
    return docEl.clientHeight || (window.innerHeight - getHScrollLen())
  }
  function getVScrollLen(){
    return docEl.scrollHeight !== docEl.offsetHeight ? scrollLen : 0
  }
  function getHScrollLen(){
    return docEl.scrollWidth !== docEl.offsetWidth ? scrollLen : 0
  }
}(window))

其实document.documentElement.clientHeight/clientWidth获取的就是ICB的高宽，而window.innerHeight/innerWidth获取的是浏览器的工作区域高宽。
2016/04/06追加
ICB仅仅是尺寸与Viewport一致而已，但不是由Viewport所产生的，而是由根元素所产生的，由"ICB的左上角与Canvas原点重合"就可知道这一点。而Viewport自身也会产生containing block，这个containing block的尺寸和左上角均与Viewport一致，就是说若由于Canvas尺寸大于Viewport导致产生滚动条时，拖动滚动条后，Viewport所产生的containing block也会跟随移动，从而保持与Viewport重合。这时我们会想起position:fixed定位不就是这样的吗？确实position:fixed的定位参考系就是Viewport所生产的containing block了。

找啊找啊找朋友，找到一个好CB

对于display:static/relative的元素
它的CB与最近一个父block container(block box/inline box/table cell)的content box重叠。
对于position:fixed的元素
它的CB就是ICB。
对于position:absolute的元素

若不存在的position为absolute/relative/fixed的父block container，其CB为ICB。

若存在的position为absolute/relative/fixed的父block container

若block container不是inline box，则其CB与这个父block container(block box/inline box/table cell)的padding box重叠。

若block container是inline box，那情况就复杂些了。

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

</>复制代码 
    T
    
            这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。
            XX
            XX
            XX

</>复制代码 
    TEXT TEXT TEXT
    
        这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。
        XX
        XX
        XX

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

</>复制代码 
    T
    
         这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。可以通过它们绝对定位的位置来判断它们……
        XX
        XX
        XX

注意

虽然盒子的宽/高度自动值/相对值的计算，相对/浮动/绝对定位，均依赖CB，但CB并不限制盒子的尺寸。
正常情况：若子box尺寸>containing block尺寸，则子box溢出CB(溢出后的显示效果由overflow属性值决定)。
异常情况：IE5.5~6下当overflow:visible时，若子box的尺寸大于CB的尺寸而城撑大CB。

总结

搞掂，收工:)
尊重原创，转载请注明来自: ^_^肥子John

感谢

https://www.w3.org/TR/CSS2/visuren.html#...
https://www.w3.org/TR/CSS21/visudet.html...
KB008: 包含块( Containing block )

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

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

CSS魔法堂：Absolute Positioning就这个样

摘要：更多关于的信息可参考魔法堂不得不说的因此的实际值则是相对于而言，我们可以通过来获取和的实际值。对于由于自身有固有的，因此当设置时，其实际值就是元素固有的。结果就是除均不为，而为时，会自动计算以满足等式。两条不满足外，其他情况均一致。前言当我们以position:absolute之名让元素脱离Normal flow的控制后，以为通过left和top属性值即可让元素得以无限的自由时，却...

Yangyang 2019-08-30 12:54 评论0 收藏0
CSS魔法堂：你一定误解过的Normal flow

摘要：后来终于知道是某位大神将翻译为文档流而已。。。。。。另外单纯设置效果与采用是一样的魔法堂就这个样，而浮动定位也是基于。相对定位的最强武器就是个属性了，好明显它们默认值均是。前言刚接触CSS时经常听到看到一个词文档流，那到底什么是文档流呢？然后会看到绝对定位和浮动定位能脱离文档流，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolu...

Hancock_Xu 2019-08-30 12:56 评论0 收藏0
CSS魔法堂：hasLayout原来是这样的！

摘要：到底是何方神圣可以简单看作是中的。和产生新的特性一样，无法通过属性直接设置，而是通过某些属性间接开启这一特性。不同的是某些属性是以不可逆方式间接开启为。因此所引发的问题，很大程度可以理解为在不应该的或没有预料到的地方产生新的导致的。前言过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的，那就是hasLayout。趁着最近突然发神经打算好好学习CSS，顺便解答多年来的疑惑。...

URLOS 2019-08-30 12:51 评论0 收藏0
CSS魔法堂：小结一下Box Model与Positioning Scheme

摘要：魔法堂重新认识和魔法堂你一定误解过的魔法堂就这个样魔法堂说说那个被埋没的志向深入细节后会发现中定位模式之间，和之间存在千丝万缕的关系，必须以俯瞰的角度捋一下。当采用时，属性的实际值会被重置为。由于和则需要通过来引入来提供盒子定位微调的功能。前言对于Box Model和Positioning Scheme中3种定位模式的细节，已经通过以下几篇文章记录了我对其的理解和思考。《CSS...

szysky 2019-08-30 12:57 评论0 收藏0
CSS魔法堂：说说Float那个被埋没的志向

摘要：时其宽度始终保持占满宽度的态度。清除浮动就是为浮动影响的范围划边界。那么可归结为的父容器包裹所有子元素。注意属性值不能为空白，否则无法清除浮动。前言定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正...

legendmohe 2019-08-30 12:55 评论0 收藏0