重置 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中文网其他相关文章！