經(jīng)常會碰到，問一個 CSS 屬性之斯，例如 position 有多少取值日杈。
通常的回答是 static、relative佑刷、absolute 和 fixed 。當(dāng)然酿炸，還有一個極少人了解的 sticky 瘫絮。其實，除此之外填硕， CSS 屬性通常還可以設(shè)置下面幾個值：
initialinheritunsetrevert
{
position: initial;
position: inherit;
position: unset
/* CSS Cascading and Inheritance Level 4 */
position: revert;
}
了解 CSS 樣式的 initial（默認）和 inherit（繼承）以及 unset 是熟練使用 CSS 的關(guān)鍵麦萤。（當(dāng)然由于 revert 未列入規(guī)范，本文暫且不過多提及扁眯。）
initial
initial 關(guān)鍵字用于設(shè)置 CSS 屬性為它的默認值壮莹，可作用于任何 CSS 樣式。（IE 不支持該關(guān)鍵字）
inherit
每一個 CSS 屬性都有一個特性就是姻檀，這個屬性必然是默認繼承的 (inherited: Yes) 或者是默認不繼承的 (inherited: no)其中之一命满，我們可以在 MDN 上通過這個索引查找，判斷一個屬性的是否繼承特性绣版。
譬如胶台，以 background-color 為例，由下圖所示杂抽，表明它并不會繼承父元素的 background-color:
可繼承屬性
最后羅列一下默認為 inherited: Yes 的屬性：
- 所有元素可繼承：visibility 和 cursor
- 內(nèi)聯(lián)元素可繼承：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 的妙用可以看看這里：談?wù)勔恍┯腥さ腃SS題目（四）-- 從倒影說起耸棒，談?wù)?CSS 繼承 inherit，合理的運用 inherit 可以讓我們的 CSS 代碼更加符合 DRY（Don‘’t Repeat Yourself ）原則报辱。
unset
名如其意与殃，unset 關(guān)鍵字我們可以簡單理解為不設(shè)置。其實碍现，它是關(guān)鍵字 initial 和 inherit 的組合幅疼。
什么意思呢？也就是當(dāng)我們給一個 CSS 屬性設(shè)置了 unset 的話：
- 如果該屬性是默認繼承屬性昼接，該值等同于
inherit - 如果該屬性是非繼承屬性爽篷，該值等同于
initial
舉個例子，根據(jù)上面列舉的 CSS 中默認繼承父級樣式的屬性慢睡，選取一個逐工，再選取一個不可繼承樣式：
- 選取一個可繼承樣式:
color - 選取一個不可繼承樣式:
border
使用 unset 繼承/取消樣式：
看看下面這個簡單的結(jié)構(gòu)：
<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是可繼承樣式，設(shè)置了color: unset的元素漂辐，最終表現(xiàn)為了父級的顏色red泪喊。 - 由于
border是不可繼承樣式，設(shè)置了border: unset的元素髓涯，最終表現(xiàn)為border: initial袒啼，也就是默認 border 樣式，無邊框复凳。
unset 的一些妙用
例如下面這種情況瘤泪，在我們的頁面上有兩個結(jié)構(gòu)類似的 position: fixed 定位元素。
區(qū)別是其中一個是 top:0; left: 0;育八，另一個是 top:0; right: 0;对途。其他樣式相同。
假設(shè)樣式結(jié)構(gòu)如下：
<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;
}
推薦 參考文檔
