Explication détaillée de la façon d'utiliser la valeur en pourcentage en CSS-tutoriel CSS-php.cn

Explication détaillée de la façon d'utiliser la valeur en pourcentage en CSS

高洛峰

Libérer： 2017-03-09 16:33:26

original

2485 Les gens l'ont consulté

Apprenons à utiliser la valeur en pourcentage en CSS

La valeur en pourcentage est la méthode de base pour concevoir différentes tailles d'éléments et mises en page en CSS. Ici, nous vous amènerons à maîtriser parfaitement la valeur en pourcentage en CSS. Utilisation, y compris la méthode de conversion du pourcentage en px, etc., c'est parti ~

Le pourcentage est destiné à être relatif à la taille du même attribut de l'élément parent.
Si elle est utilisée pour définir la police, elle sera relative à la taille de la police de l'élément parent.
La taille de police par défaut dans les balises et

dans la plupart des navigateurs est de 100 %.

html {font-size: 100%;}   
body {font-size: 100%;}   
100% = 1em = 16px = 12pt

Copier après la connexion

Si elle est utilisée pour définir une largeur et une largeur non standard. taille de la police, la valeur de longueur en pourcentage est basée sur la valeur de longueur de l'élément parent avec le même attribut.

<!DOCTYPE html>   
<html>   
<head>   
  <meta charset="utf-8">   
  <title>JS Bin</title>   
  <style type="text/css">   
  p.parent {   
    margin:150px;   
    width: 200px;   
    height: 200px;   
    border: 1px solid blue;   
  }   
  p.child {   
    width: 50%;   
    height: 50%;   
    border: 1px dashed black;   
  }   
  </style>   
</head>   
<body>   
  <p class="parent">   
    <p class="child"></p>   
  </p>   
</body>   
</html>

Copier après la connexion

Un peu plus sur l'élément parent : qu'est-ce que l'élément parent, positionnement relatif (relatif), positionnement absolu (absolu), float (float), fixe (fixe) Comment trouver l'élément parent dans ?
Étant donné que HTML a une structure arborescente, avec des balises à l'intérieur des balises, la relation parent-enfant est généralement claire.

<p class="parent">
    <p class="child"></p>
</p>

Copier après la connexion

1. L'élément positionné relativement , son élément parent est conforme à l'imbrication de balises.
2. Élément positionné de manière absolue , son élément parent est l'élément positionné le plus proche (positionnement absolu, positionnement relatif, fixe, mais sans compter le flottant) ou la taille de la fenêtre (lorsqu'aucun élément positionné n'est trouvé).
3. Élément flottant , son élément parent est également conforme à l'imbrication de balises.
4. Élément fixe (positionnement absolu spécial), son élément parent est la fenêtre (la taille de la zone utilisée par le navigateur pour afficher le contenu par défaut, pas la taille du html ou du corps).
Faites juste attention au positionnement absolu, le reste est relativement simple.

<!DOCTYPE html>   
<html>   
<head>   
  <meta charset="utf-8">   
  <title>JS Bin</title>   
  <style type="text/css">   
    html {   
        width:1000px;   
    }   
    body {   
        width:800px;   
    }   
    #box {   
        width:50%;   
        height:300px;   
        position: absolute;   
        margin-left: 200px;   
        border: 1px solid red;   
    }   
    #can {   
        position:absolute;   
        top:100px;   
        left:100px;   
        width:50%;   
        height:50%;   
        border:1px solid black;   
    }   
  </style>    
</head>     
<body>   
    <p id="box">   
        <p id="can"></p>   
    </p>   

</body>     
</html>

Copier après la connexion

Explication détaillée de la façon dutiliser la valeur en pourcentage en CSS

La largeur de la boîte est la moitié de la fenêtre, et la largeur et la hauteur de la boîte sont la moitié de la largeur et de la hauteur de la boîte .
Définissez can sur position:fixed; alors son élément parent ne sera plus une boîte mais une fenêtre de navigateur.
Explication détaillée de la façon dutiliser la valeur en pourcentage en CSS

La largeur et la hauteur de la canette sont la moitié de la largeur et de la hauteur de la fenêtre.
L'élément parent d'un élément flottant est le même que l'élément parent d'un élément normal.

<!DOCTYPE html>   
<html>   
<head>   
  <meta charset="utf-8">   
  <title>JS Bin</title>   
  <style type="text/css">   
    html {   
        width:1000px;   
    }   
    body {   
        width:800px;   
    }   
    #box {   
        width:50%;   
        height:300px;   
        position: absolute;   
        margin-left: 200px;   
        border: 1px solid red;   
    }   
    #can {   
        float:left;   
        width:50%;   
        height:50%;   
        border:1px solid black;   
    }   
  </style>    
</head>     
<body>   
    <p id="box">   
        <p id="can"></p>   
    </p>   

</body>     
</html>

Copier après la connexion

Explication détaillée de la façon dutiliser la valeur en pourcentage en CSS

Remarque : Si le remplissage et la marge sont définis en pourcentage, les valeurs du haut, du bas, de gauche et de droite correspondent à la largeur. de l'élément parent. Calculer comme une norme.

Pourcentage en px
Exemple 1 : Marges

<p style="width: 20px">   
<p id="temp1" style="margin-top: 50%">Test top</p>   
<p id="temp2" style="margin-right: 25%">Test rightright</p>   
<p id="temp3" style="margin-bottom: 75%">Test bottombottom</p>   
<p id="temp4" style="margin-left: 100%">Test left</p>   
</p>

Copier après la connexion

Le décalage obtenu est le suivant :

temp1.marginTop = 20px * 50% = 10px;   
temp2.marginRight = 20px * 25% = 5px;   
temp3.marginBottom = 20px * 75% = 15px;   
temp4.marginLeft = 20px * 100% = 20px;

Copier après la connexion

Ensuite, j'ai testé le remplissage. Je pensais que la valeur du remplissage serait calculée en fonction des éléments associés auxquels l'attribut était appliqué, mais à ma grande surprise, le remplissage a également été calculé en fonction de la largeur. de l'élément parent auquel l'attribut a été appliqué. Il est calculé et se comporte de la même manière que la marge. (Encore une phrase : lorsque la largeur d'un élément est définie par pourcentage, elle est calculée par rapport à la largeur du conteneur parent. Le paramètre de pourcentage vertical de l'élément est également relatif à la largeur du conteneur, pas à la hauteur.)
Mais il y a un trou, tout ce qui précède est destiné aux éléments non positionnés. Je suis curieux, et je suis curieux, comment calculer les valeurs en pourcentage du haut, de la droite, du bas et de la gauche pour les éléments positionnés de manière non statique ?
Exemple 2 : Éléments positionnés

<p style="height: 100px; width: 50px">   
<p id="temp1" style="position: relative; top: 50%">Test top</p>   
<p id="temp2" style="position: relative; right: 25%">Test rightright</p>   
<p id="temp3" style="position: relative; bottom: 75%">Test bottombottom</p>   
<p id="temp4" style="position: relative; left: 100%">Test left</p>   
</p>

Copier après la connexion

Les décalages résultants sont les suivants :

temp1.top = 100px * 50% = 50px;   
temp2.rightright = 100px * 25% = 25px;   
temp3.bottombottom = 100px * 75% = 75px;   
temp4.left = 100px * 100% = 100px;

Copier après la connexion

Pour les éléments positionnés, ces les valeurs sont également relatives à l'élément parent, mais contrairement aux éléments non positionnés, elles sont relatives à la hauteur de l'élément parent plutôt qu'à sa largeur.
Lorsque l'élément parent n'a pas de hauteur, les valeurs de pourcentage sont traitées comme auto à la place
C'est un peu déroutant, mais rappelez-vous : pour la marge et le remplissage, le pourcentage est calculé en fonction de la largeur de l'élément parent. élément parent, et pour les éléments positionnés, il est calculé en fonction de la hauteur de l'élément parent.

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!