如果在通用选择器中声明，则框大小是否继承? [英] Is box sizing inherited if declared inside universal selector?

问题描述

这是否适用于每个元素?

Does this get applied by every element?

示例"A":

*
{
    box-sizing: border-box;
}

我认为盒装尺寸不被继承吗?

I thought box-sizing is not inherited?

这与重设框大小有关:

示例"B":

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

html
{
    box-sizing: border-box;
}

两个示例的效果是否相同?

Will both examples have the same effect?

推荐答案

我认为盒装尺寸不被继承吗?

I thought box-sizing is not inherited?

不，不是.您可以检查规范，您会看到继承为NO.在示例A中，您只是使用通用选择器选择所有元素，然后将 box-sizing:border-box 应用于它们，但是它不针对伪元素，因此它们不会包含 box-sizing:border-box 默认设置.

No, it's not. You can check the specification and you will see that inherited is NO. In the example A, you are simply using the universal selector to select all the elements and applying box-sizing:border-box to them but it doesn't target pseudo element so they will not have box-sizing:border-box set by default.

两个示例的效果是否相同?

Will both examples have the same effect?

不，他们不会.即使我们认为这是应用于文档的唯一CSS，示例B也会以伪元素为目标，使它们继承 box-sizing ，如果我们遵循父子结构，则它们在逻辑上会得到 box-sizing:border-box ，因为 html 具有 box-sizing:border-box .

No they won't. Even if we consider that it's the only CSS applied to your document, the example B will also target pseudo element to make them inherit the box-sizing and if we follow the parent-child structure they will logically get box-sizing:border-box since html is having box-sizing:border-box.

另一个区别是，与在示例A中显式设置值不同，使用 inherit 将考虑父样式.在示例A中，您必须更改 box-sizing 对于每个元素，如果您想覆盖代码中的一组代码，而在示例B中，更改元素上的 box-sizing 或任何祖先将覆盖您正在使用的代码.

The other difference is that using inherit will consider the parent style unlike explicitly setting the value in the example A. In the example A, you have to change box-sizing for each element if you want to override the one set by your code while in the example B, changing box-sizing on the element OR any ancestor will override the code you are using.

说明差异的基本示例.

使用A:

* {
  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>

这篇关于如果在通用选择器中声明，则框大小是否继承?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！