經常會碰到，問一個 CSS 屬性，例如 position 有多少取值。
通常的回答是 static、relative、absolute 和 fixed 。當然，還有一個稍微生僻的 sticky 。其實，除此之外， CSS 屬性通常還可以設定下面幾個值：
initialinheritunsetrevert
{
position: initial;
position: inherit;
position: unset
/* CSS Cascading and Inheritance Level 3 */
position: revert;
}
瞭解 CSS 樣式的 initial（預設）和 inherit（繼承）以及更新的 unset 和 revert 是熟練使用 CSS 的關鍵。
initial
initial 關鍵字用於設定 CSS 屬性為它的預設值，可作用於任何 CSS 樣式。（IE 不支援該關鍵字）
inherit
每一個 CSS 屬性都有一個特性就是，這個屬性必然是預設繼承的 (inherited: Yes) 或者是預設不繼承的 (inherited: no)其中之一，我們可以在 MDN 上通過這個索引查詢，判斷一個屬性的是否繼承特性。
譬如，以 background-color 為例，由下圖所示，表明它並不會繼承父元素的 background-color:
可繼承屬性
最後羅列一下預設為 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 的妙用可以看看這裡：談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit，合理的運用 inherit 可以讓我們的 CSS 程式碼更加符合 DRY（Don‘’t Repeat Yourself ）原則。
這裡簡單舉一個例子，利用 inherit 實現圖片倒影功能。
利用 inherit 實現圖片倒影功能
給定一張有如下背景圖的 div：
製作如下的倒影效果：
方法很多，但是我們當然要尋找最快最便捷的方法，至少得是無論圖片怎麼變化，div 大小怎麼變化，我們都不用去改我們的程式碼。
可以使用 -webkit-box-reflect 專門用於製作映象圖形，當然另外一種巧妙的方式就是使用 inherit 關鍵字。
我們對圖片容器新增一個偽元素，使用 background-image: inherit 繼承父值的背景圖值，就可以做到無論圖片如何變，我們的 CSS 程式碼都無需改動：
div::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
bottom: -100%;
background-image: inherit;
transform: rotateX(180deg);;
}
我們使用偽元素 background-image: inherit; 繼承父元素的背景圖，再使用 transform 旋轉容器達到反射的效果，結果如下：
CodePen Demo -- 利用 inherit 實現圖片倒影功能。
unset
名如其意，unset 關鍵字我們可以簡單理解為不設定。其實，它是關鍵字 initial 和 inherit 的組合。
什麼意思呢？也就是當我們給一個 CSS 屬性設定了 unset 的話：
- 如果該屬性是預設繼承屬性，該值等同於
inherit - 如果該屬性是非繼承屬性，該值等同於
initial
舉個例子，先列舉一些 CSS 中預設繼承父級樣式的屬性：
- 部分可繼承樣式:
font-size,font-family,color,text-indent - 部分不可繼承樣式:
border,padding,margin,width,height
使用 unset 繼承父級樣式：
看看下面這個簡單的結構：
<div class="father">
<div class="children">子級元素一</div>
<div class="children unset">子級元素二</div>
</div>
.father {
color: red;
border: 1px solid black;
}
.children {
color: green;
border: 1px solid blue;
}
.unset {
color: unset;
border: unset;
}
-
由於
color是可繼承樣式，設定了color: unset的元素，最終表現為了父級的顏色red。 -
由於
border是不可繼承樣式，設定了border: unset的元素，最終表現為border: initial，也就是預設 border 樣式，無邊框。
unset 的一些妙用
例如下面這種情況，在我們的頁面上有兩個結構類似的 position: fixed 定位元素。
區別是其中一個是 top:0; left: 0;，另一個是 top:0; right: 0;。其他樣式相同。
假設樣式結構如下：
<div class="container">
<div class="left">fixed-left</div>
<div class="right">fixed-right</div>
</div>
通常而言，樣式如下：
.left,
.right {
position: fixed;
top: 0;
...
}
.left {
left: 0;
}
.right {
right: 0;
}
使用 unset 的方法：
.left,
.right {
position: fixed;
top: 0;
left: 0;
...
}
.right {
left: unset;
right: 0;
}
revert
revert 是更為新的一個關鍵字。源自於 CSS Cascading and Inheritance Level 3 (CSS Cascading 3)，直接意譯的意思為 -- 恢復。
它與關鍵字 unset 非常類似，在大部分情況下，他們的作用是一模一樣的！唯一的區別是：
revert：屬性應用了該值後，將還原到具有由瀏覽器或使用者建立的自定義樣式表（在瀏覽器側設定）設定的值unset: 屬性應用了該值後，樣式將完全被還原
unset 和 revert 的不同之處
可能有點繞，我們通過一個實際的 DEMO 看看 unset 和 revert 的異同：
<div class="father">
<b class="color unset">設定了 unset，我的 font-weight 會被完全清除</b>
<br>
<b class="color revert">設定了 revert，我的 font-weight 將會被還原到瀏覽器預設樣式的 font-weight: bold;</b>
</div>
.unset {
font-weight: unset;
}
.revert {
font-weight: revert;
}
當然，這裡有個前提，我當前測試的瀏覽器（Chrome 92.0.4515.107）對 <b> 標籤，有設定預設的瀏覽器使用者代理樣式，會對它進行加粗處理：
上面的程式碼實際效果：
CodePen Demo -- Difference between revert and unset keyword in CSS
總結一下，瞭解 CSS 樣式的 initial（預設）和 inherit（繼承）以及更為新的 unset 和 revert 是熟練使用 CSS 的關鍵。
雖然有點繞，但是熟練掌握之後，在很多小地方都有著妙用，靈活使用讓你的程式碼更加精簡。
最後
好了，本文到此結束，希望對你有幫助 ?
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。