Html 为什么要在*上而不是在主体上调整长方体尺寸_Html_Css

Html 为什么要在*上而不是在主体上调整长方体尺寸

html css

Html 为什么要在*上而不是在主体上调整长方体尺寸,html,css,Html,Css,我已经看到框大小：边框框将避免宽度计算问题。我不知道为什么会这样问题的定义如下 body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 是否不适用于所有子元素？为什么？它将应用于文档中的所有元素，而不仅仅是body元素这样，您就不需要将框大小添加到所有需要框大小的样式规则中请注意，它可能会影响使用*的页面的性能。如果您只需要为少数元素指定框大

我已经看到框大小：边框框将避免宽度计算问题。我不知道为什么会这样

问题的定义如下

body {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

是否不适用于所有子元素？为什么？

它将应用于文档中的所有元素，而不仅仅是body元素

这样，您就不需要将框大小添加到所有需要框大小的样式规则中

请注意，它可能会影响使用*的页面的性能。如果您只需要为少数元素指定框大小，那么最好为这些元素指定框大小。

*是通用CSS选择器，这意味着它选择HTML页面上的所有单个元素

示例1：无论何时选择body，它都只设置body的样式，记住body而不是它的子对象

HTML:

结果:

示例2：每当您选择*时，它都会设置所有单个元素的样式，包括HTML文档中的body

HTML:

结果:

请参见此处：*使样式应用于所有元素，因此不必指定框大小：inherit。好的，但我可以在body元素下定义它们吗*这可能是性能问题。@FizerKhan在这种情况下只会影响body元素本身。该设置不会继承到子元素，因此需要使用此规则设置所需的所有元素。例如，您可以在一个定义中收集所有内容：body、box1、box2{box size:…；}Ken知道他在说什么。你自己去看看。

body {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

<body>
  <div class="box-1">box-1</div>
  <div class="box-2">box-2</div>
</body>

body {
  padding: 5rem;
  background-color: chocolate;
  border: 2px solid white;
}

<body>
  <div class="box-1">box-1</div>
  <div class="box-2">box-2</div>
</body>

body {
  padding: 5rem;
  background-color: chocolate;
  border: 2px solid white;
}