Question Pourquoi la hauteur sur l'élément HTML n'a-t-elle pas d'effet? [dupliquer]


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:

  1. 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?
  2. 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?

10
2017-12-27 21:09


origine


Réponses:


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;
}


7
2017-12-27 21:28



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


6
2017-12-27 21:29