資訊專欄INFORMATION COLUMN
摘要：簡寫為有以下幾種情況根元素所在的包含塊是一個長方形，稱為初始的包含塊。假如元素的設(shè)為或，包含塊是由最近的父容器塊的內(nèi)容區(qū)邊緣形成的。假如元素的設(shè)為，包含塊是由所在的或決定。
官方定義：一個元素盒子的位置和大小有時相對于某個矩形來計算的，此矩形稱為此元素的包含塊。簡寫為：C.B.
有以下幾種情況：
1、根元素所在的包含塊是一個長方形，稱為初始的包含塊。
2、假如元素的position設(shè)為‘relative’或‘static’，包含塊是由最近的父容器塊的內(nèi)容區(qū)邊緣形成的。
3、假如元素的position設(shè)為‘fixed’，包含塊是由所在的viewpoint或page area決定。
4、假如元素的position設(shè)為‘a(chǎn)bsolute’，包含塊是由最近帶有‘position’屬性的祖先決定。
祖先元素是行內(nèi)元素，包含塊是第一個和最后一個內(nèi)聯(lián)盒子所包圍的填充盒子，在CSS2.1，行內(nèi)元素跨越多行，那么包含塊是未定義的，否則，包含塊是由祖先的補白形成。（翻譯的有些不清楚）
假如沒有那樣的祖先，包含塊就是初始 C.B.
代碼示例：
Illustration of containing blocks
This is text in the first paragraph...
This is text in the
second paragraph.
元素 --- 包含塊
html --- 初始 C.B.
body --- html
div1 --- body
p1 --- div1
p2 --- div1
em1 --- p2
strong1 --- p2
假如設(shè)置div1:
#div1 { position: absolute; left: 50px; top: 50px }
div1的包含塊將不是body，而變成html.
假如也設(shè)置em1:
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
上述包含塊發(fā)生什么變化？
元素 --- 包含塊
body --- html
div1 --- 初始 C.B.
p1 --- div1
p2 --- div1
em1 --- div1
strong1 --- p2
W3c傳送門：containing-block-details
參考：
1、CSS核心：包含塊（Containing Block）
2、CSS 中，為什么絕對定位（absolute）的父級元素必須是相對定位（relative）？
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/110903.html
摘要：標(biāo)簽無路徑情況下，灰色邊框去除解決方案解決辦法圖片出錯的時候調(diào)用默認(rèn)的圖片絕對定位聚焦解決方案聚焦解決方案聚焦解決辦法聚焦解決方案隱藏 img[src=] img標(biāo)簽無路徑情況下，灰色邊框去除解決方案 1.Js解決辦法 function whenError(a){ ...
摘要：標(biāo)簽無路徑情況下，灰色邊框去除解決方案解決辦法圖片出錯的時候調(diào)用默認(rèn)的圖片絕對定位聚焦解決方案聚焦解決方案聚焦解決辦法聚焦解決方案隱藏 img[src=] img標(biāo)簽無路徑情況下，灰色邊框去除解決方案 1.Js解決辦法 function whenError(a){ ...
摘要：如內(nèi)可以包含塊級元素與塊級元素并列內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列。而對于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。css概念 CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。css引入方式1. 行內(nèi)式 行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢，不推薦使用...
不廢話，直奔主題，使用JS實現(xiàn)點擊button按鈕切換圖片，實現(xiàn)效果如圖： 很容易實現(xiàn)吧，這個是用Dreamweaver寫的，現(xiàn)在我們就用JS的一個入門案列?！ ∑鋵嵑芏鄷r候想法與實際有差距。我們先做了一個簡單的圖片切換?！ ody部分： <body> <h1>JS實現(xiàn)圖片的切換</h1> <divclass="containe...
閱讀 3567·2023-04-26 02:48
閱讀 1536·2021-10-11 10:57
閱讀 2553·2021-09-23 11:35
閱讀 1271·2021-09-06 15:02
閱讀 3371·2019-08-30 15:54
閱讀 1694·2019-08-30 15:44
閱讀 958·2019-08-30 15:44
閱讀 1047·2019-08-30 12:52
