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

我还认为可以在级联元素中启动继承，但div内的body继承了相同的值。

有人知道这种方法的坚实理由吗？我错过了任何浏览器/设备问题？未来兼容性？普通的迂腐？

我对它很好奇。

Answer 1

我发现将html和body宽度和高度定义为100％是一个很好的理由。假设您要垂直对齐相对定位的div，则需要将其放入绝对定位的容器中：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

为什么在css中定义body属性？

1 个答案: