Question

我已经看到box-sizing: border-box会避免宽度计算问题。我怀疑为什么它在*喜欢

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

下面定义的问题是什么。

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

不适用于所有子元素吗？为什么呢？

Answer 1

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

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

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

Answer 2

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

示例1：
每当您选择 body 时，它只会对主体进行样式设置（仅记住主体而不是它的孩子）。

HTML：

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

CSS：

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

结果： Padding, background, border applied only on body

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

HTML：

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

CSS：

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

结果： Padding, background, border applied all individual elements including body