为什么html元素上的高度无效？

CapturedTree 发表于 Dev

捕获树

<!DOCTYPE html>
<html>
<head>
  <style>
    html,
    body {
      font-size: 16px;
      width: 70vw;
      height: 40vh;
      background-color: yellow;
    }
    
    h1 {
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>My First Heading</h1>
</body>
</html>

在上面的代码我设置width到70vw和height到40vh。

我有两个问题：

为什么在我指定仅在声明中使用时height，html,body仍然填充100％的视口高度？40vhhtml,body
为什么H1元素的宽度设置为70vw从html,body声明即使宽度是不能继承，但对于H1的高度没有被设置为40vh从html,body申报？

Qwertiy

它实际上有效，但是在CSS中有一个棘手的地方。html获取背景，body如果背景html本身未设置，并且视口由html背景填充（这是css中子元素的唯一继承）。

此行为在CSS背景和边框模块级别3中指定：

文档画布是在其上呈现文档的无限表面。[CSS2]由于没有元素对应于画布，因此为了允许画布样式，CSS会传播根元素的背景

对于其根元素是HTML HTML元素或XHTML html元素[HTML]的文档：如果根元素上的background-image的计算值是none且其背景色是透明的，则用户代理必须传播该元素的第一个HTML BODY或XHTML body子元素的背景属性。

我在html您的示例中添加了背景，您可以看到，这很好：

html, body {
  font-size: 16px;
  width: 70vw;
  height: 40vh;
  background-color: yellow;
}

html {
  background: white;
}

h1 {
  background-color: red;
}

<h1>My First Heading</h1>

我可以做的另一件事是概述-它会显示元素实际在何处结束：

html, body {
  font-size: 16px;
  width: 70vw;
  height: 40vh;
  background-color: yellow;
  outline: 1px dotted blue;
  outline-offset: -1px;
}

h1 {
  background-color: red;
}

<h1>My First Heading</h1>

一个更有趣的情况：

html {
  width: 50vw;
  height: 50vh;
}

body {
  margin: 40vh 0 0 40vw;
  width: 30vw;
  height: 30vh;
  background: linear-gradient(45deg, red, blue);
}

html, body {
  border: 8px solid;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。