您應該知道CSS。我的問題以提高您的CSS技能

大家好！

CSS 涵蓋眾多主題，沒有哪個開發者能完全掌握所有內容。誠然，我們無需精通所有知識就能勝任工作，但有些 CSS 基礎知識是必不可少的。我的問題正是圍繞這些核心知識點展開。

這些問題並不適合初學者，你至少需要一年的 CSS 經驗，兩年則更好。只有具備一定的經驗，你才能更好地理解這些問題的用意。

你也可以在 Github 上關注項目的開發進度。

開始吧！

注意：我使用了“計算值”這一術語，它指的是你在開發者工具“計算”選項卡中看到的屬性值。

以下選擇器的特指性是多少？

:is(#container, .content, main) {
  color: red;
}

:is()偽類函數幫助瀏覽器從給定的選擇器列表中選擇特指性最高的選擇器。在本例中，特指性最高的選擇器是#container。該選擇器的特指性為 (0, 1, 0, 0)。這將應用於整個 @规则。

color 屬性的計算值為 red。正確還是錯誤？

.container {
  color: red;
}

:where(#container) {
  color: blue;
}

正確。 :where() 偽類函數會使特指性歸零。因此，.container 選擇器的特指性更高。這就是為什麼 color 屬性的計算值為 red。

以下示例中會顯示什麼形狀？

.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

如果元素的 display 屬性為 inline，則 width 和 height 屬性無效。我們將看不到正方形，也看不到任何內容。

計算 .child 元素的 width 屬性計算值的算法是什麼？

<div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div>

.parent {
  display: block;
}

.parent-flex {
  display: flex;
}

情況 1：.child 元素是塊級元素。它們的 width 屬性等於父元素的 width 屬性。

情況 2：.child 元素是彈性項目。它們的 width 屬性根據內容計算。

偽元素的 display 屬性的計算值是什麼？

.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}

block 和 flex。 grid 或 inline-grid 值會將子元素的 display 屬性的 inline-* 值轉換為 block 替代值。

在父元素 display: flex 和 display: grid 的情況下，子元素的默認位置有什麼區別？

在 display: flex 的父元素內部，子元素會在一行中依次顯示。相反，在 display: grid 的情況下，元素會一個接一個地顯示在下方。

.child 元素的 width 和 height 屬性的計算值是什麼？

:is(#container, .content, main) {
  color: red;
}

.container {
  color: red;
}

:where(#container) {
  color: blue;
}

.child 元素的 width 屬性等於父元素的 width 屬性。因此，width 屬性的計算值為 1600px。 （假設瀏覽器默認字體大小為 16px，100rem = 100 * 16px = 1600px）

在 display: grid 的父元素內部，height 屬性會填充所有空間。如果父元素有多個項目，空間將平均分配給它們。因此，.child 元素的 height 屬性的計算值為 20rem / 2 = 10rem，即 10 * 16 = 160px。

.child 元素的邊距在所有情況下都會超出父元素之外。正確還是錯誤？

.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

<div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div>

錯誤。 display: flex、display: inline-flex、display: grid 和 display: inline-grid 的子元素邊距不會超出父元素之外。

邊距折疊是否在 display: inline-flex 和 display: inline-grid 的元素內部有效？

否，無效。在 display: flex、display: inline-flex、display: grid 和 display: inline-grid 的元素內部，邊距將被累加。

偽元素的位置是水平和垂直居中。正確還是錯誤？

.parent {
  display: block;
}

.parent-flex {
  display: flex;
}

正確。瀏覽器會平均分配子元素和父元素邊框之間的所有空間。

min-width 屬性的計算值是什麼？

.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}

<div class="parent">
  <div class="child"></div>
</div>

min-width 的初始值為 auto。因此，.child 元素的 min-width 計算值為 auto。

但是，如果為元素定義了 block、inline、inline-block、table 或 table-* 值，則其子元素的 min-width 計算值為 0。

我們如何使用 gap 屬性來替換 margin 屬性？

.parent { 
  display: grid; 
  width: 100rem; 
  height: 20rem; 
}

我們應該為 .parent 元素定義 gap 屬性。

display 屬性的計算值為 block。正確還是錯誤？

<div class="parent">
  <div class="child"></div>
</div>

正確。如果定義了 absolute 或 fixed 值，瀏覽器會將 display 屬性的所有 inline-* 值轉換為 block 替代值。

為什麼 .parent 元素的 height 屬性的計算值為 0？

/* case #1 */
.parent {
  display: inline-flex;
}

.child {
  display: block;
  margin-block: 1rem;
}

/* case #2 */
.parent {
  display: grid;
}

.child {
  display: block;
  margin-block: 1rem;
}

.container {
  display: grid;
  height: 100dvh;
}

.container::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin: auto;
}

具有 position: absolute 或 position: fixed 的元素會從正常的文檔流中移除。因此，父元素看不到它。這就是為什麼 height 屬性的計算值為 0。

在以下示例中，isolation 屬性的作用是什麼？

:is(#container, .content, main) {
  color: red;
}

.container {
  color: red;
}

:where(#container) {
  color: blue;
}

我們應該記住，在使用 z-index 屬性時，瀏覽器使用的是哪個堆疊上下文。

默認情況下，根堆疊上下文是 html 元素。這就是為什麼在沒有 isolation: isolate 的情況下，偽元素位於 .parent 元素之後。

我們使用 isolation 屬性為 .child 元素創建了一個新的堆疊上下文。因此，偽元素顯示在文本後面，但在 .parent 元素前面。

偽元素的位置是什麼？

.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

首先，由於應用了 place-items: center，偽元素顯示在中心。

在應用position: absolute 和bottom: 0 後，它沿Y 軸移動到父元素底部邊框，因為top、right、bottom 和left 屬性的優先級高於place-items屬性。

width 屬性的計算值是什麼？

<div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div>

flex-basis 屬性的優先級高於 width 屬性，但其值也必須在 min-width 和 max-width 屬性的值範圍內。所以答案是 225px。

padding 屬性的計算值是什麼？

.parent {
  display: block;
}

.parent-flex {
  display: flex;
}

在使用 CSS 自定義屬性時，我們應該定義簡寫的所有部分。如果我們不這樣做，瀏覽器就無法應用值。

這在我們的示例中發生了。 padding 簡寫需要 4 個值，但開發者只定義了 3 個。瀏覽器無法設置填充。因此，計算值為 0。

為什麼 p 元素的 background-color 屬性的計算值為綠色？

.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}

CSS 自定義屬性會從為父元素定義的相同自定義屬性繼承值。如果省略了自定義屬性，瀏覽器將使用回退值。

在我們的示例中，從父元素中省略了 --background-color 屬性。因此，瀏覽器使用回退值，即 inherit 關鍵字，該關鍵字從 body 元素的 background-color 屬性繼承綠色值。

This revised output maintains the original image formatting and avoids significant alterations to the meaning while rephrasing the text for improved readability and flow. The questions are presented in a more concise and organized manner.

以上是您應該知道CSS。我的問題以提高您的CSS技能的詳細內容。更多資訊請關注PHP中文網其他相關文章！