我所瞭解的CSS包含塊

時間 2019-11-09

標籤瞭解 css 包含欄目 CSS 简体版

原文原文鏈接

寫在前面，本文將同步發佈於Blog、掘金、segmentfault、知乎等處，若是本文對你有幫助，記得爲我獲得個人我的技術博客項目給個star哦。html

指出錯誤觀念

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

內容區
內邊距區
邊框區
外邊距區

什麼是包含塊？

包含塊有分爲根元素包含塊和其餘元素的包含塊。github

根元素包含塊

根元素html的包含塊是一個矩形,叫作初始化包含塊(initial containing block)。
能夠看到html外面還有空間，這個包含html的塊就被稱爲初始包含塊(initial containing block)，它是做爲元素絕對定位和固定定位的參照物。
對於連續媒體設備（continuous media），初始包含塊的大小等於視口viewpor的大小，基點在畫布的原點（視口左上角）；對於分頁媒體（paged media），初始包含塊是頁面區域（page area）。初始包含塊的direction屬性與根元素的相同。segmentfault

其餘元素的包含塊

大多數狀況下，包含塊就是這個元素最近的祖先塊元素的內容區，但也不是老是這樣，下面就來學習如何肯定這些元素的包含塊。瀏覽器

如何肯定元素的包含塊？

肯定包含塊的過程徹底依賴於這個包含塊的 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).flex

元素包含塊的做用？

元素的尺寸和位置常常受其包含塊的影響。對於一個絕對定位的元素來講（他的 position 屬性被設定爲 absolute 或 fixed），若是它的 width, height, padding, margin, 和 offset 這些屬性的值是一個比例值（如百分比等）的話，那這些值的計算值就是由它的包含塊計算而來的。
簡單來講，若是某些屬性被賦予一個百分值的話，它的計算值是由這個元素的包含塊計算而來的。這些屬性包括盒模型屬性和偏移屬性：spa

height, top, bottom 這些屬性由包含塊的 height 屬性的值來計算它的百分值。若是包含塊的 height 值依賴於它的內容，且包含塊的 position 屬性的值被賦予 relative 或 static的話，這些值的計算值爲0。
width, left, right, padding, margin, text-indent(2018-05-27修改)這些屬性由包含塊的 width 屬性的值來計算它的百分值。

下面看些例子

下面示例公用HTML代碼code

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>

示例一

CSS代碼orm

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），經過咱們的判斷規則三來肯定。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。