liste des types de valeurs d'attribut hauteur

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>

Copier après la connexion

< /td>

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>

Copier après la connexion

Les lecteurs peuvent appuyer sur "F12" dans le

Chr

<body id="b">

Copier après la connexion

navigateur et sélectionner "élément" pour afficher. constatez rapidement que la hauteur de

correspond exactement à 50 % de l'élément parent . 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!