时间戳

首页 > 解决方案 > Can someone explain the difference between these css lines?

css - Can someone explain the difference between these css lines?

问题描述

html {
  box-sizing: border-box;
}

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

body {
  margin: 0;
}`

I tried removing each of these separately, and saw no difference.

标签： css

解决方案

html {
  box-sizing: border-box;
}

设置box-sizing为border-box您的根元素

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

这里所有子元素，包括伪元素，都设置为继承box-sizing值（从根元素）

在这里阅读box-sizing： https ://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

body {
  margin: 0;
}

大多数（或所有？）浏览器在正文元素上都有默认边距。如果您的代码是

<body>
    Some text
</body>

浏览器边缘会有一点空间。为了“规范化”它并从浏览器的边缘开始您的设计，margin 设置为0.

推荐阅读