<!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>在上面的代码中,我设置了widthto 70vw和heightto 40vh.
我有两个问题:
height的html,body还是当我指定它应该只使用填充40%填充视口高度的100%,40vh在html,body申报？70vw从html,body声明即使宽度是不能继承,但对于H1的高度没有被设置为40vh从html,body申报？它确实有效,但在CSS中有一个棘手的地方.html获取背景body如果它html本身未设置并且视口由html的背景填充(这是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;
}您将整个背景视为黄色的原因是因为
根元素的背景成为画布的背景并覆盖整个画布[...]
尝试给身体赋予不同的颜色,你会看到差异
<!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>