Question

所以我一直在尝试自己找出以下代码实际上对每种操作的作用，但我只是无法完全理解。

/*Global Style*/
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

我从视频中复制了它，因此并没有真正向我解释所有内容。如果您可以向我解释此代码，我将不胜感激！谢谢进阶

Answer 1

*是HTML文件中所有元素的全局选择器。

*::before在内容选择之前之前插入

*::after在内容选中后后插入

要回答您的问题，HTML中的所有元素将具有0 padding，0 margins和box-sizing: inherit

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

运行示例。希望这是有道理的。

参考：https://www.w3schools.com/cssref/sel_after.asp

参考：https://www.w3schools.com/cssref/sel_before.asp

p::after { 
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

p::before { 
  content: " - Remember this";
  background-color: pink;
  color: red;
  font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

</body>
</html>

Answer 2

这将使HTML标准给出的标准距离无效。

例如，

<p>将自动在上方和下方提供边距，而body在每个标准处都有填充。作为一名平面设计师，我诅咒这一点，并希望从头开始，从零开始构建元素，而不必重写每个元素。

box-content有点难以解释，但是恕我直言，box-content: border-box应该是标准。这意味着填充被计入元素的宽度/高度。通常，如果您有width: 100px和padding: 10px，则元素的宽度为（100 + 10 + 10 =）120像素，而对于box-content: border-box，元素的宽度为100像素。 inherit继承了与父元素相同的值，因此，如果body在另一个声明box-content: border-box中具有，除非另有说明，否则所有其他元素将共享相同的值。

Answer 3

此代码段有几个用途，主要是重写/重置某些默认样式。 *选择器将这些值应用于页面上的每个元素，而::before / ::after确保将其应用于所有伪元素。

特别是...

它会从默认应用了元素的元素中删除所有padding和margin。例如，<ul>个元素：

<ul><li>I have a margin</li></ul>

* { margin: 0; padding: 0; }

<ul><li>I don't!</li></ul>

它使所有伪元素（::before和::after）继承其父对象的box-sizing，而不是始终使用content-box。这确定是向内（保持元素宽度）还是向外（相加元素宽度）应用padding之类的属性。

div { box-sizing: border-box; }
div::after {
  display: inline-block;
  content: "140px width";
  width: 100px;
  padding: 20px;
  background: red;
}

The element below adds its 40px of padding to it's 100px width, despite its parent using box-sizing: border-box:
<div></div>

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

div {
  box-sizing: border-box;
}

div::after {
  display: inline-block;
  content: "100px width";
  width: 100px;
  padding: 20px;
  background: red;
}

The element below maintains its width of 100px, despite the 40px of padding, becuase it inherits its parent's box-sizing: border-box
<div></div>

参考

这些CSS规则的目的是什么？

3 个答案: