Maison >interface Web >tutoriel CSS >Explication détaillée de la façon d'utiliser la valeur en pourcentage en CSS
Explication détaillée de la façon d'utiliser la valeur en pourcentage en CSS
- 高洛峰original
- 2017-03-09 16:33:262542parcourir
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
html {font-size: 100%;}
body {font-size: 100%;}
100% = 1em = 16px = 12pt
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>
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>
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>
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. 
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>
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>
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;
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>
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;
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!