首頁 > web前端 > css教學 > 主體

重設 CSS 未設定

Linda Hamilton
發布: 2024-10-07 18:09:31
原創
401 人瀏覽過

Reset with CSS unset

在過去的幾年裡,我經常使用 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板