为什么要在 css 中定义正文属性

Question

我见过一些网页设计课程，它们总是以这样的css开头：

body,html {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

我试图弄清楚声明width、height或display等属性有什么意义，如果我没记错的话，这些属性body和html在浏览器中默认存在。

我以为在使用 js 访问 css 时会防止和未定义的返回或类似内容，但是在 css 中定义属性时的结果与保留默认值时的结果相同：

console.log($("BODY").css('width')); // Always returns the width of the body

我还认为可能是在级联元素中开始继承，但body内的div

继承的值完全相同。

有人知道这种方法的充分理由吗？ 我错过了任何浏览器/设备问题？ 未来的兼容性？ 朴素的学究？

我有点好奇。

Answer 1

我找到了一个很好的理由将 html 和正文宽度和高度定义为 100%。假设你想垂直对齐一个相对定位的div，你需要把它放在一个绝对定位的容器中：

html,
body {
  margin: 0;
  padding: 0;
}
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
#main {
  background: lightgrey;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

<div id="container">
  <div id="main">
    <h1>MY DIV</h1>
  </div>
</div>

但是，将主体宽度和高度设置为 100%，您将获得一个覆盖整个窗口的绝对定位容器：

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#main {
  background: lightgrey;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

<div id="main">
  <h1>MY DIV</h1>
</div>

你会得到相同的结果，但它为你节省了一个div元素。