點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

我們都知道，每一個CSS屬性必然有一個特性，要麼默認是繼承的，要麼默認是不繼承的。例如：border是不可繼承樣式，而color，text-align等是可繼承樣式。

一、理解概念

unset：從字面上理解就是不設置，其實，它就是關鍵字initial和inherit的組合。什麼意思呢？如果我們給一個CSS屬性設置了unset的話：

1. 如果該屬性是默認繼承屬性，該值等同於inherit

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

下面舉個例子（以border和color屬性為例）

DOM結構：

CSS結構：

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

2. 由於border是不可繼承樣式，設置了border：unset的元素，最終表現為border：initial，也就是默認border樣式，無邊框。

效果圖是這樣的：

二、應用實例

假如我們要實現這麼一個效果：

讓兩個子元素相對於父元素絕對定位一下。

DOM結構：

CSS結構：

通常的處理辦法可能是如上所示，由於left和right都是不可繼承的屬性，所以我們可以這麼寫

也可以不寫right。

總結：

unset：從字面上理解就是不設置，本質就是關鍵字initial和inherit的組合。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！