CSS揭祕之控制繼承:height能變為可繼承嗎?

語言: CN / TW / HK

theme: channing-cyan highlight: a11y-dark


持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第5天,點選檢視活動詳情

CSS揭祕之控制繼承:height能變為可繼承嗎?

一、寫在前面

我們知道,CSS 屬性有可繼承和不可繼承之分,例如 height 和 width 就 是CSS 中典型的不可繼承屬性,color 和 font-size 是典型的可繼承屬性。CSS 可繼承屬性意味著後代元素的樣式會繼承祖先元素樣式,例如一個父元素的 color 是 red,那麼如果它的子孫元素自己沒有設定 color 值,就會取自父元素的 color 值。同樣的條件,CSS 屬性由 color 改為 height,由於預設是不可繼承屬性,其子孫元素不會繼承父元素的 height 值。

這就是 CSS 中的繼承與非繼承屬性的區別,區別在於某一元素的某類樣式值,會不會被其子孫元素繼承,也就是其子孫元素的樣式值會不會取自父元素。

css 中有三個概念對於理解 CSS 是如何工作的十分重要,他們分別是“層疊”、“優先順序”和“繼承”。

Mozilla 上關於 CSS 繼承概念的解釋: 在 CSS 中,每個 CSS 屬性定義的概述都指出了這個屬性是預設繼承的("Inherited: Yes") 還是預設不繼承的("Inherited: no")。這決定了當你沒有為元素的屬性指定值時該如何計算值。

二、控制繼承

CSS 為控制繼承提供了四個特殊的通用屬性值。每個css屬性都接收這些值。 這意味著,就像 css 盒子模型可以通過改變 box-sizing 的值 (border-box 和 content-box)來改變。 css 屬性的繼承情況也是可以控制的,例如通過設定值 inherit、initial、unset 和 revert 來控制。

``` inherit:設定該屬性會使子元素屬性和父元素相同。實際上,就是 "開啟繼承"。

initial:設定屬性值和瀏覽器預設樣式相同。如果瀏覽器預設樣式中未設定且該屬性是自然繼承的,那麼會設定為 inherit。

unset:將屬性重置為自然值,也就是如果屬性是自然繼承那麼就是 inherit,否則和 initial一樣。

revert:新的屬性,目前僅被很少瀏覽器支援。 ```

1.開啟繼承

height 在 CSS 原生上不可繼承屬性,子元素不會繼承父元素的 height, 但是這種現狀是可以改變的,當子孫元素的 height 設定 為 inherit, 該子孫元素就會的 height 值就會取其父元素的 height 值,就像是子元素繼承了父元素的高度。

如果你希望子元素的高度一直保持和父元素一直,那麼設定子元素的 height 為 inherit,最合適不過了。

inherit:設定該屬性會使子元素屬性和父元素相同。實際上,就是 "開啟繼承"。這個值可以被幾乎 CSS 所有屬性 使用,也就是 width 等其他屬性也可以開啟繼承。

下面是一個給子元素的 height 開啟繼承的示例。

```html

這是一個普通的段落

```

```css div{ height: 200px; color: red; border: 1px solid red; font-size: 25px; }

p{ border: 1px solid #1e87f0; height: inherit; /開啟繼承後,自動繼承了父元素的高度/ margin: 0; } ```

a8c81ae1d136b0dd86c9171f6595b8f.png

2b6aa207455324ca535319676e3e8f0.png

2.重設幾乎所有屬性值

all 結合 unset,重置幾乎所有樣式,這也可以看成是一種對原始繼承的控制改變, all 屬性,將這種改變的有效範圍放大了,因為 unset 幾乎可以重置所有屬性的值。 這裡的重置通常是指將屬性重置為自然值,也就是如果屬性是自然繼承那麼就是 inherit,否則和 initial一樣。

CSS 的 shorthand 屬性 all 可以用於同時將這些繼承值中的一個,應用於(幾乎)所有屬性。 它的值可以是其中任意一個(inherit, initial, unset, or revert)。 這是一種撤銷對樣式所做更改的簡便方法,以便回到之前已知的起點。

例如像下面這樣:例子中有兩個 div,第一個 div 應用了樣式選擇器 div 的樣式, 第二個通過 類選擇器 unset-all 設定 all 為 unset,重置了幾乎所有樣式。 例如 color、background-color 和 border 都被重置為瀏覽器預設樣式了,原本兩個段落的樣式應該是一致的。

```html

這是一段文字

這是另一段文字,它將被充值樣式

```

```css div { color: red; background-color: red; border: 2px solid green; }

.unset-all { all: unset; } ```

下面是一張測試樣式重置的效果圖

image.png

三、拓展:常見繼承屬性與非繼承屬性

1.常見可繼承屬性

  • ul
  • li
  • dl
  • dd
  • dt
  • color
  • font-size
  • font-family

2.常見不可繼承屬性

  • width
  • border
  • margin
  • height
  • padding

四、寫在後面

所以,通過將子元素的 height 值設定 inherit,可以繼承父元素的高度,這會使得子元素的高度始終保持一致,這有時會很便利。 當然 width 等大多數屬性都可以這樣開啟繼承。