Maison >interface Web >tutoriel CSS >Explication détaillée de l'attribut hight en CSS
Explication détaillée de l'attribut hight en CSS
- 迷茫original
- 2017-03-25 14:12:142777parcourir
Structure du répertoire :
structure du contenu [-]
liste des types de valeurs d'attribut hauteur
|
description | ||||||||||
| auto | par défaut | ||||||||||
| longueur td> |
Longueur absolue | ||||||||||
| % | Longueur relative<!DOCTYPE html><html>
<head>
<title>height.html</title>
<meta name="content-type" content="text/html; charset=UTF-8"><style>p{
width:50%;
height:50%;
border:1px solid red;}body{
border:1px solid green;
display:block;
height:100px;}</style></head><body><p>I am box with width 50% and height 50%</p></body></html> |
||||||||||
hériter |
hériter | tr>
Définition : Cette valeur est un pourcentage basé sur le pourcentage de l'élément de niveau bloc qui la contient .
Exemple :
<body id="b" style="width:0px;height:0px;"> <br> <p id="er" style="width:50%;height:50%;border:1px solid red;"></p>
Les lecteurs peuvent appuyer sur "F12" dans le
Chr<body id="b">navigateur et sélectionner "élément" pour afficher. constatez rapidement que la hauteur de e388a4556c0f65e1904146cc1a846bee correspond exactement à 50 % de l'élément parent 6c04bd5ca3fcae76e30b72ad730ca86d. Choses à noterDans l'exemple ci-dessus, nous vérifions Comprendre l'utilisation de la valeur relative de la hauteur. Cependant, les lecteurs doivent noter que si l'élément parent ne définit pas la hauteur, la hauteur de l'élément enfant utilisant le pourcentage ne fonctionnera pas. À ce stade, la valeur de la hauteur est équivalente à la valeur automatique, à moins qu'elle ne soit modifiée par une valeur absolue. . Le fait que la hauteur ne soit pas définie ici signifie que la hauteur n'est pas écrite du tout, ce qui est différent de la définition de la hauteur comme 0px. Les lecteurs peuvent essayer le code suivant : Supprimez ensuite l'attribut style du corps et réessayez.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter des diviseurs en utilisant CSSArticle suivant：Comment implémenter des diviseurs en utilisant CSS