成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS魔法堂：不得不說(shuō)的Containing Block

opengps / 1806人閱讀

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

前言

?《CSS魔法堂：重新認(rèn)識(shí)Box Model、IFC、BFC和Collapsing margins》中提到在沒(méi)有floated兄弟盒子時(shí)，line box的左右邊框會(huì)與所屬的containing block的左右content edge相接觸。那到底什么是containing block(abbr. CB)呢？
?containing block在CSS的visual formatting model中十分重要的理論基礎(chǔ)，因?yàn)?strong>盒子的寬/高度自動(dòng)值/相對(duì)值的計(jì)算，相對(duì)/浮動(dòng)/絕對(duì)定位，均依賴containing block

如何判斷盒子的containing block？

一圖勝千言

initial containing block

?首先我們關(guān)注一個(gè)特殊的CB——initial containing block(abbr. ICB)，可以將它作為“備胎”CB，注意是“備胎”而不是最外層的CB，因?yàn)镃B們不存在嵌套關(guān)系，應(yīng)該說(shuō)CB間無(wú)任何直接關(guān)系?！皞涮ァ鳖櫭剂x是說(shuō)若盒子對(duì)應(yīng)不上其他CB，至少還有它。"dear, i would be there 4 u 4ever" by ICB:)
?因?yàn)镃B涉及到盒子的定位，因此我們還要關(guān)注另一個(gè)CSS屬性——direction。而ICB的direction則繼承自root element，也就是html元素。
?那ICB的尺寸和定位又是如何呢？ICB尺寸和定位與Viewport一致。說(shuō)了跟沒(méi)說(shuō)似的:(
?說(shuō)起Viewport大家應(yīng)該會(huì)想起開(kāi)發(fā)mobile web時(shí)必備的，這句元信息就是用來(lái)操作Viewport也就是說(shuō)會(huì)影響到ICB。
?而Viewport的尺寸固定為 瀏覽器的工作區(qū)域尺寸 - 垂直/水平滾動(dòng)條尺寸
通過(guò)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))

?其實(shí)document.documentElement.clientHeight/clientWidth獲取的就是ICB的高寬，而window.innerHeight/innerWidth獲取的是瀏覽器的工作區(qū)域高寬。
2016/04/06追加
?ICB僅僅是尺寸與Viewport一致而已，但不是由Viewport所產(chǎn)生的，而是由根元素所產(chǎn)生的，由"ICB的左上角與Canvas原點(diǎn)重合"就可知道這一點(diǎn)。而Viewport自身也會(huì)產(chǎn)生containing block，這個(gè)containing block的尺寸和左上角均與Viewport一致，就是說(shuō)若由于Canvas尺寸大于Viewport導(dǎo)致產(chǎn)生滾動(dòng)條時(shí)，拖動(dòng)滾動(dòng)條后，Viewport所產(chǎn)生的containing block也會(huì)跟隨移動(dòng)，從而保持與Viewport重合。這時(shí)我們會(huì)想起position:fixed定位不就是這樣的嗎？確實(shí)position:fixed的定位參考系就是Viewport所生產(chǎn)的containing block了。

找啊找啊找朋友，找到一個(gè)好CB

對(duì)于display:static/relative的元素
?它的CB與最近一個(gè)父block container(block box/inline box/table cell)的content box重疊。
對(duì)于position:fixed的元素
?它的CB就是ICB。
對(duì)于position:absolute的元素

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

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

若block container不是inline box，則其CB與這個(gè)父block container(block box/inline box/table cell)的padding box重疊。

若block container是inline box，那情況就復(fù)雜些了。

a.如果 "direction" 是 "ltr"，包含塊的頂、左邊是祖先元素生成的第一個(gè)框的頂、左內(nèi)邊距邊界(padding edges) ，右、下邊是祖先元素生成的最后一個(gè)框的右、下內(nèi)邊距邊界(padding edges)


    T
    
            這段文字從左向右排列，紅 XX 和 藍(lán) XX 和黃 XX 都是絕對(duì)定位元素，它的包含塊是相對(duì)定位的SPAN。 可以通過(guò)它們絕對(duì)定位的位置來(lái)判斷它們包含塊的邊緣。
            XX
            XX
            XX
    



    TEXT TEXT TEXT
    
        這段文字從左向右排列，紅 XX 和 藍(lán) XX 和黃 XX 都是絕對(duì)定位元素，它的包含塊是相對(duì)定位的SPAN。 可以通過(guò)它們絕對(duì)定位的位置來(lái)判斷它們包含塊的邊緣。
        XX
        XX
        XX


b.如果 "direction" 是 "rtl"，包含塊的頂、右邊是祖先元素生成的第一個(gè)框的頂、右內(nèi)邊距邊界 (padding edges) ，左、下邊是祖先元素生成的最后一個(gè)框的左、下內(nèi)邊距邊界 (padding edges)


    T
    
         這段文字從右向左排列，紅 XX 和 藍(lán) XX 和黃 XX 都是絕對(duì)定位元素，它的包含塊是相對(duì)定位的SPAN?？梢酝ㄟ^(guò)它們絕對(duì)定位的位置來(lái)判斷它們……
        XX
        XX
        XX

注意

?雖然盒子的寬/高度自動(dòng)值/相對(duì)值的計(jì)算，相對(duì)/浮動(dòng)/絕對(duì)定位，均依賴CB，但CB并不限制盒子的尺寸。
正常情況：若子box尺寸>containing block尺寸，則子box溢出CB(溢出后的顯示效果由overflow屬性值決定)。
異常情況：IE5.5~6下當(dāng)overflow:visible時(shí)，若子box的尺寸大于CB的尺寸而城撐大CB。

總結(jié)

搞掂，收工:)
尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來(lái)自: ^_^肥子John

感謝

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115136.html

相關(guān)文章

  • CSS魔法堂：Absolute Positioning就這個(gè)樣

    摘要：更多關(guān)于的信息可參考魔法堂不得不說(shuō)的因此的實(shí)際值則是相對(duì)于而言，我們可以通過(guò)來(lái)獲取和的實(shí)際值。對(duì)于由于自身有固有的，因此當(dāng)設(shè)置時(shí)，其實(shí)際值就是元素固有的。結(jié)果就是除均不為，而為時(shí)，會(huì)自動(dòng)計(jì)算以滿足等式。兩條不滿足外，其他情況均一致。 前言 當(dāng)我們以position:absolute之名讓元素脫離Normal flow的控制后，以為通過(guò)left和top屬性值即可讓元素得以無(wú)限的自由時(shí)，卻...

    Yangyang 評(píng)論0 收藏0

  • CSS魔法堂：你一定誤解過(guò)的Normal flow

    摘要：后來(lái)終于知道是某位大神將翻譯為文檔流而已。。。。。。另外單純?cè)O(shè)置效果與采用是一樣的魔法堂就這個(gè)樣，而浮動(dòng)定位也是基于。相對(duì)定位的最強(qiáng)武器就是個(gè)屬性了，好明顯它們默認(rèn)值均是。 前言 ?剛接觸CSS時(shí)經(jīng)常聽(tīng)到看到一個(gè)詞文檔流，那到底什么是文檔流呢？然后會(huì)看到絕對(duì)定位和浮動(dòng)定位能脫離文檔流，從這句可以看到文檔流和絕對(duì)定位、浮動(dòng)定位是同一個(gè)范疇的概念，再后來(lái)在W3C標(biāo)準(zhǔn)文檔找到關(guān)于Absolu...

    Hancock_Xu 評(píng)論0 收藏0

  • CSS魔法堂：hasLayout原來(lái)是這樣的！

    摘要：到底是何方神圣可以簡(jiǎn)單看作是中的。和產(chǎn)生新的特性一樣，無(wú)法通過(guò)屬性直接設(shè)置，而是通過(guò)某些屬性間接開(kāi)啟這一特性。不同的是某些屬性是以不可逆方式間接開(kāi)啟為。因此所引發(fā)的問(wèn)題，很大程度可以理解為在不應(yīng)該的或沒(méi)有預(yù)料到的地方產(chǎn)生新的導(dǎo)致的。 前言 過(guò)去一直聽(tīng)說(shuō)舊版本IE下很多詭異bug均由一個(gè)神秘角色引起的，那就是hasLayout。趁著最近突然發(fā)神經(jīng)打算好好學(xué)習(xí)CSS，順便解答多年來(lái)的疑惑。...

    URLOS 評(píng)論0 收藏0

  • CSS魔法堂：小結(jié)一下Box Model與Positioning Scheme

    摘要：魔法堂重新認(rèn)識(shí)和魔法堂你一定誤解過(guò)的魔法堂就這個(gè)樣魔法堂說(shuō)說(shuō)那個(gè)被埋沒(méi)的志向深入細(xì)節(jié)后會(huì)發(fā)現(xiàn)中定位模式之間，和之間存在千絲萬(wàn)縷的關(guān)系，必須以俯瞰的角度捋一下。當(dāng)采用時(shí)，屬性的實(shí)際值會(huì)被重置為。由于和則需要通過(guò)來(lái)引入來(lái)提供盒子定位微調(diào)的功能。 前言 ?對(duì)于Box Model和Positioning Scheme中3種定位模式的細(xì)節(jié)，已經(jīng)通過(guò)以下幾篇文章記錄了我對(duì)其的理解和思考。?《CSS...

    szysky 評(píng)論0 收藏0

  • CSS魔法堂：說(shuō)說(shuō)Float那個(gè)被埋沒(méi)的志向

    摘要：時(shí)其寬度始終保持占滿寬度的態(tài)度。清除浮動(dòng)就是為浮動(dòng)影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無(wú)法清除浮動(dòng)。 前言 ?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開(kāi)頭我們就用錯(cuò)了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正...

    legendmohe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<