資訊專欄INFORMATION COLUMN
摘要：簡寫為有以下幾種情況根元素所在的包含塊是一個長方形，稱為初始的包含塊。假如元素的設為或，包含塊是由最近的父容器塊的內容區邊緣形成的。假如元素的設為，包含塊是由所在的或決定。
官方定義：一個元素盒子的位置和大小有時相對于某個矩形來計算的，此矩形稱為此元素的包含塊。簡寫為：C.B.
有以下幾種情況：
1、根元素所在的包含塊是一個長方形，稱為初始的包含塊。
2、假如元素的position設為‘relative’或‘static’，包含塊是由最近的父容器塊的內容區邊緣形成的。
3、假如元素的position設為‘fixed’，包含塊是由所在的viewpoint或page area決定。
4、假如元素的position設為‘absolute’，包含塊是由最近帶有‘position’屬性的祖先決定。
祖先元素是行內元素，包含塊是第一個和最后一個內聯盒子所包圍的填充盒子，在CSS2.1，行內元素跨越多行，那么包含塊是未定義的，否則，包含塊是由祖先的補白形成。（翻譯的有些不清楚）
假如沒有那樣的祖先，包含塊就是初始 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
假如設置div1:
#div1 { position: absolute; left: 50px; top: 50px }
div1的包含塊將不是body，而變成html.
假如也設置em1:
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
上述包含塊發生什么變化？
元素 --- 包含塊
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）？
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110903.html
摘要：標簽無路徑情況下，灰色邊框去除解決方案解決辦法圖片出錯的時候調用默認的圖片絕對定位聚焦解決方案聚焦解決方案聚焦解決辦法聚焦解決方案隱藏 img[src=] img標簽無路徑情況下，灰色邊框去除解決方案 1.Js解決辦法 function whenError(a){ ...
摘要：標簽無路徑情況下，灰色邊框去除解決方案解決辦法圖片出錯的時候調用默認的圖片絕對定位聚焦解決方案聚焦解決方案聚焦解決辦法聚焦解決方案隱藏 img[src=] img標簽無路徑情況下，灰色邊框去除解決方案 1.Js解決辦法 function whenError(a){ ...
不廢話，直奔主題，使用JS實現點擊button按鈕切換圖片，實現效果如圖： 很容易實現吧，這個是用Dreamweaver寫的，現在我們就用JS的一個入門案列。 其實很多時候想法與實際有差距。我們先做了一個簡單的圖片切換。 body部分： <body> <h1>JS實現圖片的切換</h1> <divclass="containe...
閱讀 3484·2023-04-26 02:48
閱讀 1474·2021-10-11 10:57
閱讀 2500·2021-09-23 11:35
閱讀 1208·2021-09-06 15:02
閱讀 3309·2019-08-30 15:54
閱讀 1624·2019-08-30 15:44
閱讀 891·2019-08-30 15:44
閱讀 999·2019-08-30 12:52
