重置box sizing最佳实践

最新推荐文章于 2022-11-28 10:27:02 发布

weixin_34306676

最新推荐文章于 2022-11-28 10:27:02 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a311a52518825296421b084

本文探讨了CSS中box-sizing属性的继承方式，通过设置box-sizing为border-box并利用继承特性简化样式重置过程，使得组件更加灵活且易于维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文翻译自 css-tricks Inheriting box-sizing Probably Slightly Better Best-Practice

我是一个将box-sizing重置为border-box的狂热分子，所以我有a special day of the year这篇文章，但是本文于那篇文章有一点小差别，下面让我们来看看主要差别在什么地方。

html{
  box-sizing:border-box;
}
*,*:before,*:after{
  box-sizing:inherit;
}
复制代码

继承的概念出自于Jon Neal他说

这将会给你同样的结果，而且会让他更容易在插件和组件中改变box-sizing从而影响他的行为。

更进一步，如果你有一个组件只想用默认的content-box，box-sizing。你只想这样用他，而且不让其混乱

.component{
  /* designed to work in default box-sizing */
  /* in your page you could reset it to normal */
  
  box-sizing:content-box;
}
复制代码

那么问题出现了，这个样式没有重置所有的元素，也许这里有一个<header>在这个组件中，而且希望<header>元素也是content-box，如果这个选项在你的css里面，那么老的重置box-sizing方法

/* this selector is an most 'old way' box-sizing resets*/
*{
  box-sizing:border-box;
}
复制代码

那么这时候<header>并不是如你所想那样为content-box，他是border-box。像这样：

<div class='component'> <!-- i'am content-box -->
  <header><header> <!-- i'am border-box-->
</div>
复制代码

为了使重置更简单，更直观，您可以在顶部使用继承的代码段，继承将被保留。

看起来这些改善并没有什么大的意义，或许你用原来的老方法也不会遇到什么问题，我就是这样，但是只要我们推广了一个最佳的代码片段，那么我们就离完美更近了一步。