Question

<!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的{{1}}仍填满视口高度的100％只应使用40vh中的html,body填充40％声明？
为什么h1元素宽度设置为70vw声明中的html,body，即使宽度未继承，但h1的高度未设置为40vh { {1}}声明？

Answer 1

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

此行为在CSS Backgrounds and Borders Module Level 3中指定：

文档画布是渲染文档的无限表面。 [CSS2]由于没有元素对应画布，为了允许画布的样式，CSS传播根元素的背景

对于其根元素是HTML HTML元素或XHTML html元素的文档[HTML]：如果根元素上的background-image的计算值为none且其background-color为透明，则用户代理必须改为传播从该元素的第一个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;
}

Answer 2

您将整个背景视为黄色的原因是

根元素的背景成为画布的背景并覆盖整个画布[...]

尝试为身体提供不同的颜色，您将看到差异

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

Read here in details

为什么html元素的高度没有效果？

2 个答案: