首页 > web前端 > css教程 > 重置 CSS 未设置

重置 CSS 未设置

Linda Hamilton
发布: 2024-10-07 18:09:31
原创
406 人浏览过

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
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板