經常會碰到，問一個 CSS 屬性，例如position有多少取值。

通常的回答是static、relative、absolute和fixed。當然，還有一個極少人瞭解的sticky。其實，除此之外， CSS 屬性通常還可以設定下面幾個值：

• initial
• inherit
• unset
• revert

{
  position: initial;
  position: inherit;
  position: unset
 
  position: revert;
}

瞭解 CSS 樣式的 initial（預設）和 inherit（繼承）以及 unset 是熟練使用 CSS 的關鍵。（當然由於revert 未列入規範，本文暫且不過多提及。）

initial

initial關鍵字用於設定 CSS 屬性為它的預設值，可作用於任何 CSS 樣式。（IE 不支援該關鍵字）

inherit

每一個 CSS 屬性都有一個特性就是，這個屬性必然是預設繼承的 (inherited: Yes) 或者是預設不繼承的 (inherited: no)其中之一，我們可以在MDN上通過這個索引查詢，判斷一個屬性的是否繼承特性。

可繼承屬性

最後羅列一下預設為inherited: Yes的屬性：

• 所有元素可繼承：visibility 和 cursor
• 內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
• 塊狀元素可繼承：text-indent和text-align
• 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image
• 表格元素可繼承：border-collapse

還有一些 inherit 的妙用可以看看這裡：合理的運用 inherit 可以讓我們的 CSS 程式碼更加符合 DRY（Don‘’t Repeat Yourself ）原則。

unset

名如其意，unset關鍵字我們可以簡單理解為不設定。其實，它是關鍵字initial和inherit的組合。

什麼意思呢？也就是當我們給一個 CSS 屬性設定了unset

1. 如果該屬性是預設繼承屬性，該值等同於inherit
2. 如果該屬性是非繼承屬性，該值等同於initial

舉個例子，根據上面列舉的 CSS 中預設繼承父級樣式的屬性，選取一個，再選取一個不可繼承樣式：

• 選取一個可繼承樣式:color
• 選取一個不可繼承樣式:border

使用unset繼承/取消樣式：

看看下面這個簡單的結構：

<div class="father">
    <div class="children">子級元素一</div>
    <div class="children unset">子級元素二</div>
</div>
<style>
.father {
    color: red;
    border: 1px solid black;
}
 
.children {
    color: green;
    border: 1px solid blue;
}
 
.unset {
    color: unset;
    border: unset;
}
</style>

1. 由於color是可繼承樣式，設定了color: unset的元素，最終表現為了父級的顏色red。

2. 由於border是不可繼承樣式，設定了border: unset的元素，最終表現為border: initial，也就是預設 border 樣式，無邊框

unset的一些妙用

例如下面這種情況，在我們的頁面上有兩個結構類似的position: fixed定位元素。

區別是其中一個是top:0; left: 0;，另一個是top:0; right: 0;。其他樣式相同。

假設樣式結構如下：

1 <div class="container">
2     <div class="left">fixed-left</div>
3     <div class="right">fixed-right</div>
4 </div>

通常而言，樣式如下：

 1 .left,
 2 .right {
 3     position: fixed;
 4     top: 0;   
 5     ...
 6 }
 7 .left {
 8     left: 0;
 9 }
10 .right {
11     right: 0;
12 }

使用 unset 的方法：

 1 .left,
 2 .right {
 3     position: fixed;
 4     top: 0;   
 5     left: 0;
 6     ...
 7 }
 8 .right {
 9     left: unset;
10     right: 0;
11 }