[CSS] 包含塊模型

包含塊模型(Containing Block)

當(dāng)WebKit計(jì)算元素的箱子的位置和大小時(shí),WebKit需要計(jì)算該元素和另外一個(gè)矩形區(qū)域的相對(duì)位置,這個(gè)矩形區(qū)域成為該元素的包含塊。

包含塊的具體定義如下:
(1)根元素的包含塊稱為初始包含塊,通常它的大小就是可視區(qū)域(Viewport)的大小。
(2)對(duì)于其他位置屬性設(shè)置為static或者relative的元素,它的包含塊就是最近祖先的箱子模型中內(nèi)容區(qū)域(Content)。
(3)如果元素的位置屬性為fixed,難么該元素的包含塊脫離HTML文檔,固定在可視區(qū)域的某個(gè)特定位置。
(4)如果元素的位置屬性為absolute,那么該元素的包含塊由最近的含有屬性absolute,relative,fixed的祖先決定。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,207評(píng)論 1 92
  • 定義 css中,定位一個(gè)元素需要計(jì)算其和另外一個(gè)矩形區(qū)域的相對(duì)位置,這個(gè)矩形區(qū)域就是該元素的包含塊。一般來講,一個(gè)...
    狐尼克朱迪閱讀 1,845評(píng)論 0 1
  • 1. 介紹 瀏覽器可能是最廣泛使用的軟件。本書將介紹瀏覽器的工作原理。我們將看到,當(dāng)你在地址欄中輸入google....
    康斌閱讀 2,176評(píng)論 7 18
  • 簡介瀏覽器可以被認(rèn)為是使用最廣泛的軟件,本文將介紹瀏覽器的工 作原理,我們將看到,從你在地址欄輸入google.c...
    聽風(fēng)閣閱讀 3,404評(píng)論 0 7
  • 轉(zhuǎn)載說明 一、介紹 瀏覽器可以被認(rèn)為是使用最廣泛的軟件,本文將介紹瀏覽器的工作原理,我們將看到,從你在地址欄輸入g...
    17碎那年閱讀 2,527評(píng)論 0 22

友情鏈接更多精彩內(nèi)容