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

opengps 發布于2019-08-30 12:53 / 1958人閱讀

摘要：前言魔法堂重新認識和中提到在沒有兄弟盒子時，的左右邊框會與所屬的的左右相接觸。對于的元素若不存在的為的父，其為。正常情況若子尺寸尺寸，則子溢出溢出后的顯示效果由屬性值決定。異常情況下當時，若子的尺寸大于的尺寸而城撐大。

前言

?《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 )

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.hztianpu.com/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