时间戳

首页 > 解决方案 > 如果在通用选择器中声明，是否会继承框大小？

css - 如果在通用选择器中声明，是否会继承框大小？

问题描述

这是否适用于每个元素？

示例“A”：

*
{
    box-sizing: border-box;
}

我认为 box-sizing 不是继承的？

这是关于盒子尺寸重置的：

示例“B”：

*, *::before, *::after
{
    box-sizing: inherit;
}

html
{
    box-sizing: border-box;
}

这两个例子会有同样的效果吗？

标签： cssreset

解决方案

我认为 box-sizing 不是继承的？

不，这不对。您可以检查规范，您将看到继承为否。在示例 A 中，您只是使用通用选择器来选择所有元素并将其应用于box-sizing:border-box它们，但它不针对伪元素，因此默认情况下它们不会box-sizing:border-box被设置。

这两个例子会有同样的效果吗？

不，他们不会。即使我们认为它是唯一应用于您的文档的 CSS，示例 B 也将针对伪元素以使box-sizing它们继承box-sizing:border-boxhtmlbox-sizing:border-box

另一个区别是，使用inherit将考虑父样式，这与在示例 A 中显式设置值不同。在示例 A 中，box-sizing如果要覆盖由代码设置的元素，则必须为每个元素进行更改，而在示例 B 中，更改box-sizing元素或任何祖先将覆盖您正在使用的代码。

一个基本的例子来说明差异。

用一个：

* {
  box-sizing: border-box;
}



/* my code*/
body {
  box-sizing: content-box;
}
.box {
  width:100px;
  height:100px;
  border:10px solid;
  padding:10px;
}

p {
  padding:5px;
  border:2px solid red;
}
<div class="box">
  <p></p>
</div>

使用 B：

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}


/* my code*/

body {
  box-sizing: content-box;
}

.box {
  width: 100px;
  height: 100px;
  border: 10px solid;
  padding: 10px;
}

p {
  padding: 5px;
  border: 2px solid red;
}
<div class="box">
  <p></p>
</div>

推荐阅读