資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)寫為有以下幾種情況根元素所在的包含塊是一個(gè)長(zhǎng)方形，稱為初始的包含塊。假如元素的設(shè)為或，包含塊是由最近的父容器塊的內(nèi)容區(qū)邊緣形成的。假如元素的設(shè)為，包含塊是由所在的或決定。
官方定義：一個(gè)元素盒子的位置和大小有時(shí)相對(duì)于某個(gè)矩形來計(jì)算的，此矩形稱為此元素的包含塊。簡(jiǎn)寫為：C.B.
有以下幾種情況：
1、根元素所在的包含塊是一個(gè)長(zhǎng)方形，稱為初始的包含塊。
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)元素，包含塊是第一個(gè)和最后一個(gè)內(nèi)聯(lián)盒子所包圍的填充盒子，在CSS2.1，行內(nèi)元素跨越多行，那么包含塊是未定義的，否則，包含塊是由祖先的補(bǔ)白形成。（翻譯的有些不清楚）
假如沒有那樣的祖先，包含塊就是初始 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 中，為什么絕對(duì)定位（absolute）的父級(jí)元素必須是相對(duì)定位（relative）？
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110903.html
摘要：標(biāo)簽無路徑情況下，灰色邊框去除解決方案解決辦法圖片出錯(cuò)的時(shí)候調(diào)用默認(rèn)的圖片絕對(duì)定位聚焦解決方案聚焦解決方案聚焦解決辦法聚焦解決方案隱藏 img[src=] img標(biāo)簽無路徑情況下，灰色邊框去除解決方案 1.Js解決辦法 function whenError(a){ ...
摘要：標(biāo)簽無路徑情況下，灰色邊框去除解決方案解決辦法圖片出錯(cuò)的時(shí)候調(diào)用默認(rèn)的圖片絕對(duì)定位聚焦解決方案聚焦解決方案聚焦解決辦法聚焦解決方案隱藏 img[src=] img標(biāo)簽無路徑情況下，灰色邊框去除解決方案 1.Js解決辦法 function whenError(a){ ...
摘要：如內(nèi)可以包含塊級(jí)元素與塊級(jí)元素并列內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列。而對(duì)于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會(huì)無視它。css概念 CSS是Cascading Style Sheets的簡(jiǎn)稱，中文稱為層疊樣式表，用來控制網(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)勢(shì)，不推薦使用...
不廢話，直奔主題，使用JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片，實(shí)現(xiàn)效果如圖： 很容易實(shí)現(xiàn)吧，這個(gè)是用Dreamweaver寫的，現(xiàn)在我們就用JS的一個(gè)入門案列。 其實(shí)很多時(shí)候想法與實(shí)際有差距。我們先做了一個(gè)簡(jiǎn)單的圖片切換?！ ody部分： <body> <h1>JS實(shí)現(xiàn)圖片的切換</h1> <divclass="containe...
閱讀 3480·2023-04-26 02:48
閱讀 1473·2021-10-11 10:57
閱讀 2499·2021-09-23 11:35
閱讀 1206·2021-09-06 15:02
閱讀 3305·2019-08-30 15:54
閱讀 1623·2019-08-30 15:44
閱讀 891·2019-08-30 15:44
閱讀 997·2019-08-30 12:52
