Css 工作前，*，*：之后如何？

我在一些样式表中看到了以下内容，我很惭愧地说，但我不知道它代表什么以及它是如何工作的，我只知道它在浏览器预览中如何影响网站，请您尝试解释一下好吗

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

我也在我的网站中使用了它，因为很明显，我的网站在页面中的排列更好，但我添加了一个灵活的网格库，如果我的CSS中有上述代码，它会自动在我的图像之间添加一个填充，如果我删除它，它不会

这就是我对它好奇的主要原因：）

多谢各位

PS:

此外，如果我删除以下内容：

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

---

…我修复了图像之间的空格问题…hmm

*

是所有元素的CSS选择器

但请记住，您应该使用

：：before

，和

：：after

这：

在每个

div

中创建两个伪元素。像这样：

<div>
    <::before>text</::before>
    Ordinary content of div.
    <::after>text</::after>
</div>

文本
div的一般内容。
文本

---

它是您通常看不到的元素的一部分，但您可以设置它的样式。常见的例子是小箭头元素

例如

HTML:

jsfiddle：

---

至于星号（

*

），它的字面意思是一切。因为

div>*

意味着元素

div

的每个子元素，诀窍在于

框大小：边框框

：是的，但问题是如果我只删除第一个*，我的图像不会得到相同的填充。据我所知，这就是meAs好奇的地方。

：after

和

：before

要求指定

内容（即使是空字符串），否则对元素没有任何影响。好吧，我知道如何使用：before和：after标记，但问题是，这是怎么回事*？如果我只从css代码中删除第一个*，并保留*：after，*：before…我的网格将不会获得我提到的填充，这很奇怪，因为网格图像之间的填充在css中的任何地方都没有指定，但是如果我有第一个*，在css中，填充就会出现。使用*将填充0设置为所有元素。如果您删除它，您的元素将获得默认填充。这很奇怪，它将其设置为0，但在浏览器中它给了它一个20px的填充，这在我的CSS中没有提到：），但是现在我已经从我的CSS中删除了框大小：边框框，所有内容都按它应该的方式排列。@Alin这20px填充是浏览器的默认样式。这就是为什么我们总是规范化或重置（我个人更喜欢前者）我们的CSS。好吧，我知道如何使用：before和：after标记，但问题是，这是怎么回事*？如果我只从css代码中删除第一个*，并保留*：after，*：before…我的网格将不会获得我提到的填充，这很奇怪，因为网格图像之间的填充在css中的任何地方都没有指定，但是如果我有第一个*，在css中，填充就会出现。哦！星号！它的字面意思是一切
div>*
表示
div
的每个孩子好的，谢谢，但现在我明白了，我已经从css中删除了框大小：边框框，一切都按它应该的方式安排。但奇怪的是，边框框在我的图像之间默认放置了20px的空间……添加边框大小是一个很好的做法，您可以在这里阅读：‎
<div>
    <::before>text</::before>
    Ordinary content of div.
    <::after>text</::after>
</div>

p:after {
    content: "AFTER!";
}

<p>Some sentence</p>
<p>Some sentence too</p>

Some sentenceAFTER!
Some sentence tooAFTER!