<!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
?
html,body
上更改width
时,例如width:50vh
、width:60vh
等,h1的红色背景也会相应地改变。 - user5228393