摘要：根元素包含塊根元素的包含塊是一個矩形叫做初始化包含塊。如果屬性是的話，包含塊就是由組成的。示例二代碼在這里，這個標簽為默認的且它的父標簽的為，所以標簽的包含塊為標簽，通過我們的判斷規則一來確定。

寫在前面，本文將同步發布于Blog、掘金、segmentfault、知乎等處，如果本文對你有幫助，記得為我得到我的個人技術博客項目給個star哦。

許多開發者認為一個元素的包含塊就是他的父元素的內容區，其實這是錯誤的（至少不完全正確）！
一個元素的尺寸和位置經常受其包含塊的影響。大多數情況下，包含塊就是這個元素最近的祖先塊元素的內容區，但也不是總是這樣。
下面我們看看盒模型：
當瀏覽器展示一個文檔的時候，對于每一個元素，它都產生了一個盒子。每一個盒子都被劃分為四個區域：

內容區

內邊距區

邊框區

外邊距區

包含塊有分為根元素包含塊和其他元素的包含塊。

根元素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代碼

  

    
This is a paragraph!
  

CSS代碼

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標簽，通過我們的判斷規則一來確定。

CSS代碼

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標簽，通過我們的判斷規則一來確定。

CSS代碼

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標簽，通過我們的判斷規則四來確定。

CSS代碼

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），通過我們的判斷規則二來確定。

CSS代碼

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），通過我們的判斷規則三來確定。