我所瞭解的CSS包含塊
包含塊有什麼作用呢?下文接下來帶你知曉
↓↓↓↓↓↓↓
指出錯誤觀念
許多開發者認爲一個元素的包含塊就是他的
父元素的內容區
,其實這是錯誤的(至少不完全正確)!
一個元素的尺寸和位置經常受其包含塊的影響。大多數情況下,包含塊就是這個元素最近的祖先塊元素的內容區,但也不是總是這樣。
下面我們看看盒模型:
當瀏覽器展示一個文檔的時候,對於每一個元素,它都產生了一個盒子。每一個盒子都被劃分爲四個區域:
- 內容區
- 內邊距區
- 邊框區
- 外邊距區
什麼是包含塊?
包含塊有分爲根元素包含塊和其他元素的包含塊。
根元素包含塊
- 根元素html的包含塊是一個矩形,叫做初始化包含塊(initial containing block)。
可以看到html外面還有空間,這個包含html的塊就被稱爲初始包含塊(initial containing block)
,它是作爲元素絕對定位和固定定位的參照物
。 - 對於
連續媒體設備
(continuous media),初始包含塊的大小等於視口viewpor的大小
,基點在畫布的原點(視口左上角);對於分頁媒體(paged media),初始包含塊是頁面區域(page area)
。初始包含塊的direction屬性與根元素的相同。
其他元素的包含塊
大多數情況下,包含塊就是這個元素最近的祖先塊元素的內容區
,但也不是總是這樣,下面就來學習如何確定這些元素的包含塊。
如何確定元素的包含塊?
確定包含塊的過程完全依賴於這個包含塊的 position 屬性,大致分爲下列場景:
- 如果 position 屬性是
static 或 relative
的話,包含塊就是由它的最近的祖先塊元素(比如說inline-block, block 或 list-item元素)
或格式化上下文BFC(比如說 a table container, flex container, grid container, or the block container itself)的內容區的邊緣
組成的。- 如果
position 屬性是 absolute
的話,包含塊就是由它的最近的 position 的值不是 static (fixed, absolute, relative, or sticky)的祖先元素的內邊距區的邊緣組成的
。- 如果 position 屬性是 fixed 的話,包含塊就是由 viewport (in the case of continuous media) or the page area (in the case of paged media) 組成的。
- 如果
position 屬性是 absolute 或 fixed
,包含塊也可能是由滿足以下條件的最近父級元素的內邊距區的邊緣組成的:
- A transform or perspective value other than none
- A will-change value of transform or perspective
- A filter value other than none or a will-change value of filter (only works on Firefox).
元素包含塊的作用?
元素的尺寸和位置經常受其包含塊的影響。對於一個絕對定位的元素來說(他的
position 屬性被設定爲 absolute 或 fixed
),如果它的 width, height, padding, margin, 和 offset 這些屬性的值是一個比例值(如百分比等)
的話,那這些值的計算值就是由它的包含塊
計算而來的。
簡單來說,如果某些屬性被賦予一個百分值的話,它的計算值是由這個元素的包含塊計算而來的。這些屬性包括盒模型屬性和偏移屬性:
height, top, bottom
這些屬性由包含塊的 height 屬性的值來計算它的百分值。如果包含塊的 height 值依賴於它的內容,且包含塊的 position 屬性的值被賦予 relative 或 static的話,這些值的計算值爲0。width, left, right, padding, margin, text-indent(
2018-05-27修改)這些屬性由包含塊的 width 屬性的值來計算它的百分值。
下面看些例子
HTML代碼
<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
示例一
body {
background: beige;
}
section {
display: block;
width: 400px;
height: 160px;
background: lightgray;
}
p {
width: 50%; /* == 400px * .5 = 200px */
height: 25%; /* == 160px * .25 = 40px */
margin: 5%; /* == 400px * .05 = 20px */
padding: 5%; /* == 400px * .05 = 20px */
background: cyan;
}
在這裏,這個P標籤position爲默認的static,所以它的包含塊爲Section標籤,通過我們的判斷規則一來確定。
示例二
body {
background: beige;
}
section {
display: inline;
background: lightgray;
}
p {
width: 50%; /* == half the body's width */
height: 200px; /* Note: a percentage would be 0 */
background: cyan;
}
在這裏,這個P標籤position爲默認的static且它的父標籤Section的display爲inline,所以P標籤的包含塊爲body標籤,通過我們的判斷規則一來確定。
示例三
body {
background: beige;
}
section {
transform: rotate(0deg);
width: 400px;
height: 160px;
background: lightgray;
}
p {
position: absolute;
left: 80px;
top: 30px;
width: 50%; /* == 200px */
height: 25%; /* == 40px */
margin: 5%; /* == 20px */
padding: 5%; /* == 20px */
background: cyan;
}
在這裏,這個P標籤position爲absolute且它的父標籤Section的transform不爲none,所以P標籤的包含塊爲Section標籤,通過我們的判斷規則四來確定。
示例四
body {
background: beige;
}
section {
position: absolute;
left: 30px;
top: 30px;
width: 400px;
height: 160px;
padding: 30px 20px;
background: lightgray;
}
p {
position: absolute;
width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */
height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */
margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
background: cyan;
}
在這裏,這個P標籤position爲absolute且它的父標籤Section的position不爲static,所以P標籤的包含塊爲Section標籤的padding邊緣算起(前提是不能 box-sizing設置爲border-box),通過我們的判斷規則二來確定。
示例五
body {
background: beige;
}
section {
width: 300px;
height: 300px;
margin: 30px;
padding: 15px;
background: lightgray;
}
p {
position: fixed;
width: 50%; /* == (50vw - (width of vertical scrollbar)) */
height: 50%; /* == (50vh - (height of horizontal scrollbar)) */
margin: 5%; /* == (5vw - (width of vertical scrollbar)) */
padding: 5%; /* == (5vw - (width of vertical scrollbar)) */
background: cyan;
}
在這裏,這個P標籤position爲fixed,所以P標籤的包含塊爲初始包含塊(viewport),通過我們的判斷規則三來確定。
後記