Cette question a déjà une réponse ici:
<!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>
Dans le code ci-dessus, je mets le width à 70vw et le height à 40vh.
J'ai deux questions:
- Pourquoi le
height du html,body encore remplir 100% de la hauteur de la fenêtre lorsque j'ai spécifié que cela ne devrait remplir que 40% en utilisant 40vh dans le html,body déclaration?
- Pourquoi la largeur des éléments h1 est-elle définie sur
70vw du html,body déclaration même si la largeur n'est pas héritée mais la hauteur pour le h1 n'est pas définie sur 40vh du html,body déclaration?
Cela fonctionne réellement, mais il y a un endroit difficile dans CSS. html obtient des antécédents de body s'il n'est pas allumé html lui-même et la fenêtre d'affichage est remplie par l'arrière-plan de HTML (c'est le seul héritage de l'enfant dans CSS).
Ce comportement est spécifié dans Module Contexte et frontières CSS Niveau 3:
Le document canvas est la surface infinie sur laquelle le document est rendu. [CSS2] Comme aucun élément ne correspond au canevas, afin de permettre le style du canevas, CSS propage l'arrière-plan de l'élément racine
Pour les documents dont l'élément racine est un élément HTML HTML ou un élément HTML XHTML [HTML]: si la valeur calculée de background-image sur l'élément racine est none et que sa couleur d'arrière-plan est transparente, les agents utilisateurs doivent propager les valeurs calculées de les propriétés d'arrière-plan du premier élément enfant HTML BODY ou XHTML de cet élément.
J'ai ajouté un fond à html dans votre exemple et vous pouvez voir, c'est bien:
html, body {
font-size: 16px;
width: 70vw;
height: 40vh;
background-color: yellow;
}
html {
background: white;
}
h1 {
background-color: red;
}
<h1>My First Heading</h1>
L’autre chose que je peux faire, c’est esquisser - ça montrera où les éléments se terminent réellement:
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>
Un autre cas intéressant:
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;
}
La raison pour laquelle vous voyez un arrière-plan entier comme jaune est parce que
L'arrière-plan de l'élément racine devient l'arrière-plan de la toile et couvre toute la toile [...]
Essayez de donner une couleur différente au corps et vous verrez la différence
<!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>
Lire ici en détails