重設 CSS 未設定

在過去的幾年裡，我經常使用 unset 關鍵字來重置 CSS 屬性。我注意到我直觀地使用它來重置屬性。但對我來說直觀的東西對你來說可能並不直觀。讓我澄清一下。

取消設定

例如，我多年來一直使用 border: none 來刪除元素的邊框。這些天，我使用 border: unset，邊框就消失了。

邊框很簡單，因為它們是非繼承屬性，這表示子元素不會從其父元素繼承值。

邊距和填充也是如此，我經常需要重置它們。

但是繼承的屬性呢？在下面的範例中，最後一個按鈕將具有藍色。這是因為未設定屬性本質上意味著繼承繼承的屬性顏色，按鈕就是這樣做的並將顏色設為藍色。

繼承與級聯

這些事情對我來說很有意義，我是一位經驗豐富、了解繼承的 CSS 開發人員。但對於初學者來說，這些概念並不是微不足道的。我敢說大多數初學者甚至沒有聽說過繼承和非繼承屬性，或者可能會忘記它們。他們可能會了解級聯，這是不一樣的。

最終的樣式是基於級聯、特異性、繼承等。 MDN 有一篇關於理解級聯、特異性和繼承的非常紮實的文章。

這裡同樣重要的是繼承的概念，這意味著預設某些 CSS 屬性會繼承目前元素的父元素上設定的值，而有些則不會。這也可能會導致一些您可能意想不到的行為。

—MDN

最後一句話看起來很可怕，不知道繼承會帶來什麼。如果您記住哪個財產將從其父母那裡繼承價值，這可能會有所幫助，但這會隨著時間的推移而發生。查找這些資訊可能會很乏味——查看文件或在筆記中搜尋。重要的是知道繼承的存在以及它可能會導致問題，尤其是在使用 unset 關鍵字時。

安全地取消設定這些屬性

我認為列出我經常取消設定的非繼承屬性可能會很有用，因此可以安全地取消設定：

• 背景（及其所有屬性，如背景顏色、背景圖像等）
• 邊框（及其所有屬性，如邊框寬度、邊框樣式等）
• border-radius（及其所有屬性，如 border-top-left-radius、border-start-start-radius 等）
• margin（及其所有屬性，如 margin-top、margin-block-start 等）
• padding（及其所有屬性，如 padding-top、padding-block-start 等）
• 最小高度
• 最小塊大小
• 最小寬度
• 最小內嵌大小
• 最大高度
• 最大塊大小
• 最大寬度
• 最大內嵌大小
• 位置
• 頂
• 底部
• 左
• 對
• inset（及其所有屬性，如 inset-block、inset-inline 等）
• 網格（及其所有屬性，如 grid-template-columns、grid-columns、align-items、row-gap 等）
• flex（及其所有屬性，如 flex-basis、flex-direction、align-items、row-gap 等）

結論

當涉及重設 CSS 屬性時，unset 關鍵字會派上用場。但是，重要的是要考慮您正在使用的財產的繼承。

如果你想確保最大的安全性，取消設定不繼承的屬性可能是你最好的選擇。透過這樣做，您可以消除任何潛在的風險，並放心您的樣式表是安全的。

以上是重設 CSS 未設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！