Maison > Article > interface Web > 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:142730parcourir

Structure du répertoire :

structure du contenu [-]

liste des types de valeurs d'attribut hauteur

tr>

value	describtion
auto	默认
length	绝对长度
%	相对长度
inherit	继承

valeur

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

Ici, l'auteur présente principalement l'utilisation de la longueur relative pour la longueur absolue, les lecteurs peuvent se référer à l'explication détaillée de l'unité de taille CSS px % em rem pour plus d'informations.

Utilisation de la valeur % de la hauteur

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

Articles Liés

Voir plus