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

Question

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

12

<!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。

我有两个问题：

当我在html,body声明中使用40vh时，为什么html,body的height仍然填满视口高度的100％，而不是只填满40％？
为什么h1元素的宽度设置为来自html,body声明的70vw，即使宽度没有继承，但是h1的高度未从html,body声明中设置为40vh？

- user5228393

对于第二个问题，h1是块级元素，因此它占据容器的100％宽度，高度为自动，因此它取决于内容而不是父元素的高度。 - Temani Afif

对于第一个问题，在HTML和body声明中添加边框，你将会看到它正在采用你指定的高度/宽度。 - Temani Afif

那么问题是为什么背景颜色会应用在外面呢？ - takendarkk

这就是为什么我进行了评论，因为我还不知道背景 :) - Temani Afif

@TemaniAfif 但是元素的宽度取决于父元素的宽度，对吧？因为每当我在html,body上更改width时，例如width:50vh、width:60vh等，h1的红色背景也会相应地改变。 - user5228393

@ToothyRel 是的没错... h1 将会占据父元素的 100% 宽度，也就是说和父元素（在这里就是 body）有着完全一样的宽度，当然我们也需要考虑 margin/padding。 - Temani Afif

2个回答

5

您看到整个背景都是黄色的原因是因为根元素的背景变成了画布的背景并覆盖了整个画布[...]。尝试给body设置不同的颜色，您会看到区别。

<!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

- Sanchit Patiyal

即使您从HTML中删除背景，我们仍然可以看到它，您可以只保留正文中的背景。 - Temani Afif

@TemaniAfif，不是。 - Qwertiy

2

是的，这也是我的意思；因为这不仅涉及到HTML的背景，还涉及到body背景进入HTML的技巧。 - Temani Afif

1

https://www.w3.org/TR/css-backgrounds-3/#special-backgrounds - Qwertiy

根元素的背景成为画布的背景，并覆盖整个画布。在这种情况下，“根元素”和“画布”分别指什么？根元素是“body”还是“html”？而画布是否只是浏览器窗口（就像没有对应它的元素）？ - user5228393

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Qwertiy · Accepted Answer

实际上它是生效的，但在CSS中有一处棘手之处。如果在html本身上未设置背景，并且视口被html的背景填充，则 html 将获得 body 的背景（这是CSS中子元素唯一继承的内容）。

此行为在CSS背景和边框模块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;
}