什麼是containing block？
如果幹巴巴的問一個前端什麼是containing block。大部分都不知所云。官方示意如下：
The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element`s nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that deterime an element`s containing block.
簡單來說就是——無特殊情況下，containing block（包含塊）就是最近的塊元素的content area（內容區）。
什麼是內容區？
以這個經典的盒模型圖：
最內部的即為內容區。
我們平時用到過嗎？
這個概念雖然可能不熟悉，但是實際上我們經常用到：
/*
<div class="outer">
<div class="inner"></div>
</div>
*/
.outer {
width: 200px;
box-sizing: border-box;
}
.inner {
width: 80%;
}
複製程式碼inner的寬度是多少呢？毫無疑問，是160px。那稍微加一點戲，如果outer增加一條屬性padding: 50px，這時候inner的寬度是多少？
很多人會遲疑一下，因為不知道背後的原理，只能根據經驗推斷，如果經驗老道，會給出正確答案：80px。
實際上，這些百分比值的運作原理都是通過包含塊來計算出最後結果。再回想一下之前的規範，包含塊是最近的塊元素的內容區，就可以很清晰的理解padding值在這個例子中起的作用了。
元素的尺寸和位置經常受其包含塊的影響。
特殊情況
如果敏感的人看到這可能會產生一個疑惑，如果把例子改成這樣？
.outer {
position: relative;
width: 200px;
padding: 50px;
box-sizing: border-box;
}
.inner {
position: absolute;
width: 80%;
}
複製程式碼這時候inner width又是多少呢？是160px。
好不容易剛消化的知識就給了當頭一棍。。。然後回想一下平時用的時候好像確實是這樣！
所以規範提到了無特殊情況下，而特殊情況是：
- 如果position是absolute，包含塊就是它最近的position值不是static的元素的padding area。
- 如果position是fixed，包含塊就是檢視。
- 如果position是absolute或fixed，包含塊是最近的滿足下列條件的元素的padding area：
- transform或perspective值不是none
- filter值不是none
- will change值包含transform、perspective、或filter（只有Firefox有效）
position: fixed
瞭解了包含塊的規範，可以更好的理解平時常用的一些特性的執行原理。而特殊情況的最後一點，其實還有一些場景可以利用。
比如如下場景：
引入了一個三方ui庫，內部有一個彈窗元件，很正常的使用了fixed定位，那它的包含塊就是檢視了。如果這時，需要將它的位置進行調整，那怎麼辦？
可以利用transform/perspective/filter來改變這個彈窗所在的內容塊，從而起到定位的作用。
contain
理解了包含塊，能夠將特性運用到一些特定場景中，已經說明知識點消化的足夠好了。但是下面的彩蛋知識點，還需要一點運氣才能獲得~因為它並沒有在包含塊的MDN文件中被提及。
chrome率先實現了一個實驗特性contain。它允許開發者宣告當前元素和它的內容儘可能的獨立於 DOM 樹的其他部分。從而使得瀏覽器在重新計算佈局、樣式、繪圖或它們的組合的時候，只會影響到有限的 DOM 區域，而不是整個頁面。
在它的可選值中，paint的作用是使得該元素的子孫節點不會超出它的邊緣。
那父元素contain: paint和子元素position: fixed結合會如何呢？
實驗結果是，fixed的元素表現得像是父元素設定了transform/perspective/filter一樣，說明它的包含塊被contain: paint屬性所影響。
MDN文件中沒提到，那是Chrome意外實現了一個彩蛋嗎？
確認了規範以後證實，Chrome並不是xjb實現的~
The element acts as a containing block for absolutely positioned and fixed positioned descendants.