第14章：重要概念
14.1 containing block(包含塊)
14.1.1 什么是包含塊
- 簡單來說，包含塊就是“包含自己的那塊元素”，元素的“包含塊”決定了元素的大小和定位。
- “包含塊”是一個相對的概念，并不是說父級元素就是包含塊。比如說，絕對布局中，父級元素是
position:relative;，子級元素是position:absolute;，那么此時父級元素是子級元素的包含塊，自己元素的大小和定位由父級元素決定；但positioin:fixed固定定位元素的包含塊是瀏覽器窗口。
14.1.2 包含塊的判斷以及范圍
根元素的包含塊
-
<html>根元素是頁面最頂端的元素，它沒有父元素，但也有包含塊，叫做“初始包含塊initial containing block”。
固定元素的包含塊
- 如果元素是固定定位
position:fixed，那么它的包含塊是當前的可視窗口（即當前瀏覽器窗口）。
靜態/相對定位元素的包含塊
- 如果元素是靜態或相對定位
position:static/relative，那它的包含塊是最近的塊級(display:block、display:inline-block、display:table-cell)祖先元素。
絕對定位元素的包含塊
- 如果元素是絕對定位
position:absolute，那么它的包含塊是最近的position屬性值為非static的祖先元素，該祖先元素可以是塊元素也可以是行內元素。 - 如果元素找不到
position屬性值為非static的祖先元素，那么它的包含塊就是<html>根元素，這就是為什么在默認情況下，絕對定位元素是相對于瀏覽器窗口來定位的原因。
包含塊的范圍
- 包含塊的范圍分為兩種情況：
- 如果祖先元素是塊元素，那么包含塊的范圍由祖先元素的
padding edge(內邊距的邊界)形成； - 如果祖先元素是行內元素，那么包含塊的范圍由祖先元素的
direction(方向)屬性來決定；
- 如果祖先元素是塊元素，那么包含塊的范圍由祖先元素的
14.2 BFC和IFC
14.2.1 基本概念
- 頁面的任何元素都可以看成是一個盒子(box)，盒子分兩種類型：塊盒子(
block-level box)和行內盒子(inline-level box)。
說明：除了塊盒子(
block-level box)和行內盒子(inline-level box)之外，CSS3還增加了一個run-in box盒子。
- 不同的元素和元素的
display屬性決定盒子的類型。不同的盒子類型，會根據自己的格式上下文(formatting context)作為渲染規則：- 塊盒子(
block-level box)，即display屬性為block、table、list-item的元素，參與塊級格式上下文(Block Formatting Context，簡稱BFC)； - 行內盒子(
inline-level box)，即display屬性為inline、inline-block、inline-table的元素，參與行級格式上下文(Inline Formatting Context，簡稱IFC)；
- 塊盒子(
14.2.2 什么是BFC
- BFC
Block Formatting Context（塊級格式上下文），是塊盒子(block-level box)的渲染規則，它是塊盒子內部的一個獨立渲染區域，這個區域規定了盒子內部如何布局，并且這個區域具有封閉性，與外部區域毫不相關。
創建BFC
- 根據W3C標準對BFC的定義，具備以下任意條件的元素會創建一個新的BFC：
- 根元素；
-
float:left/right的浮動元素； -
position:absolute/fixed的定位元素； -
display屬性值為inline-block、table-caption、table-cell的塊元素； -
overflow:auto/hidden/scroll的元素；
注意：
display:block/table的元素會參與BFC，但不會創建BFC。
BFC的特點
- 根據W3C標準，總結BFC的渲染規則如下：
- BFC內部，元素沿垂直方向逐個排列；
- BFC內部，垂直相鄰的兩個元素的間距由
margin屬性來決定，且margin-top和margin-bottom會疊加； - BFC內部，元素的左外邊界(
margin-left)緊貼容器的左邊(border-left)，即便是浮動元素也是如此； - BFC是頁面中一個隔離的盒子，BFC內部的子元素不會影響到外面的元素；
- 計算一個BFC的高度時，其內部的浮動元素高度也會參與計算；
14.2.3 BFC的用途
- 創建BFC來避免垂直外邊距疊加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
width: 200px;
border: 1px dashed gray;
/*為wrapper創建BFC*/
overflow: hidden;
}
/*為B創建BFC*/
#bfc-box{
overflow: hidden;
}
#A,#B{
height: 60px;
line-height: 60px;
text-align: center;
font-size: 30px;
color-interpolation: #000;
background-color: purple;
}
#A{
margin-bottom: 20px;
}
#B{
margin-top: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- A處于為wrapper的BFC -->
<div id="A"></div>
<!-- B處于為bfc-box的BFC -->
<div id="bfc-box">
<div id="B"></div>
</div>
</div>
</body>
</html>
- 創建BFC來清除浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>創建BFC清除包含的浮動</title>
<style type="text/css">
.wrapper{
width: 200px;
border: 1px dashed gray;
/*由于父容器沒定義高度，會造成父容器高度塌陷，通過創建BFC解決，因為BFC在計算自身高度時會把子元素的高度計算進去*/
overflow: hidden;
}
#first,#second{
width: 80px;
height: 40px;
border: 1px solid brown;
}
#first{
float: left;
}
#second{
float: right;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>創建BFC避免文字環繞</title>
<style type="text/css">
.wrapper{
width: 400px;
height: 200px;
border: 1px solid gray;
padding: 10px;
}
img{
width: 40px;
height: 40px;
float: left;
}
#content{
background-color: papayawhip;
/*由于浮動的img層疊級別比普通文檔流高，創建BFC后不會和同級的浮動元素重疊*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="../img/weibo.png"/>
<div id="content">【核電站事故102歲老人拒絕避難自殺 東電被下賠償命令】東京電力福島第一核電站事故發生后，在福島縣飯館村自殺的102歲男性之遺屬，向東電要求精神損失費等損害賠償的訴訟判決，已于20日在福島地方法院進行。判決命令東電支付1520萬日元(約合人民幣89萬元)</div>
</div>
</body>
</html>
- BFC創建自適應兩列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#sidebar{
float: left;
width: 100px;
height: 150px;
background-color: aliceblue;
}
#content{
height: 200px;
width: auto;
background-color: #CCCCCC;
/*創建BFC使得浮動元素不會覆蓋自己*/
overflow: hidden;
}
</style>
</head>
<body>
<div id="sidebar"></div>
<div id="content"></div>
</body>
</html>
14.3 stacking content(層疊上下文)
- 理解層疊上下文，有助于深入理解浮動和定位布局，以及深入理解
z-index對元素的堆疊順序的控制。 - 層疊上下文包含兩個概念：層疊上下文(
stacking content)和層疊級別(stacking level)。
14.3.1 什么是層疊上下文
- 如果一個元素具備以下任意一個條件（不考慮CSS3），那么該元素將創建一個新的層疊上下文：
-
根元素 ：
<html>元素會創建“根層疊上下文”； -
z-index屬性值為非auto的定位元素 ：在元素只有通過z-index屬性會使創建層疊上下文；
-
根元素 ：
14.3.2 什么是層疊級別
- 有沒有想過一個問題，
z-index屬性為一個元素創建了層疊上下文，那么該元素的背景色、浮動的子元素、定位的子元素等，誰在上誰在下，應該遵循什么樣的規則來堆疊呢？而層疊級別就是針對同一個層疊上下文的層疊規則。
注意：層疊上下文和層疊級別是兩個不同的概念
- 層疊級別的優先級由高到低排序：
-
z-index值為正整數的子元素； -
z-index值為0的子元素； - 普通文檔流的行內盒子(inline-level box)：行內元素是內容，塊元素是布局容器，所以內容更重要，層疊級別也更高；
- 浮動盒子：非定位的浮動元素；
- 塊盒子：普通文檔流下的塊盒子(block-level box)；
-
z-index值為負整數的子元素； - 背景和邊框：當前層疊上下文的
background和border屬性是裝飾作用，層疊級別也最低；
-
14.3.3 層疊上下文的特點
- 一個元素在z軸的堆疊順序由“層疊上下文”和“層疊級別”兩個因素決定：
- 同一個層疊上下文中，比較的是“內部元素層疊級別”，級別大的元素顯示在上，級別小的元素顯示在下；
- 同一個層疊上文如果層疊級別相同，則遵循“后來者居上”原則，比如
z-index值相同時，后面的元素堆疊在上面； - 不同的層疊上下文，比較的是“父級元素的層疊級別”；
