Maison > Article > interface Web > Que signifient-ils en CSS
Que signifient-ils en CSS
- 青灯夜游original
- 2021-04-02 15:17:1019335parcourir
em est une unité de longueur relative en CSS, relative à la taille de police du texte dans l'objet actuel ; si la taille de police actuelle du texte en ligne n'a pas été définie manuellement, elle est relative à la taille par défaut du navigateur. taille de la police. Il peut être utilisé pour définir la largeur, la hauteur, la hauteur de ligne, la marge, la bordure et d'autres styles.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Il existe de nombreuses unités en CSS. Le px couramment utilisé est une unité absolue et em est une unité relative. Sous le principe de la réactivité et des terminaux mobiles, l'utilisation d'em peut ajuster plus facilement et plus rapidement une série d'attributs tels que la taille de la police, la largeur, les marges et les bordures des documents Web et des éléments HTML à la fois. On peut dire que sous certains aspects, l'utilisation d'em comme unités est plus flexible que px.
1. Qu'est-ce que em
1. em C'est une unité relative en CSS, et sa longueur unitaire est déterminée en fonction de la longueur verticale du texte de l'élément. Il peut être utilisé pour définir la largeur, la hauteur, la hauteur de ligne, la marge, le remplissage, la bordure et d'autres styles. 1em=元素中文本的1个垂直高度
Selon les règles ci-dessus : si la taille du texte dans l'élément est de 16px, alors 1em=16px si la taille du texte dans l'élément est de 20px, alors 1em=20px...
Valeur par défaut de la taille du texte 2.em et HTML
Le texte dans le navigateur est généralement de 16 px par défaut, c'est-à-dire par défaut : 1em=16px
Alors, comment changer cela. Qu'en est-il des paramètres ? Définissez simplement explicitement la taille de la police de l'élément body. par exemple :
body {
font-size: 24px;
width: 10em; /* 10em = 24px * 10 = 240px */
}3.em et héritage
En CSS, si un élément n'a pas de taille de police définie, sa valeur de taille de police est celle de son parent element La valeur font-size est facile à comprendre, ce n'est qu'un simple héritage. Par exemple :<style>
body {
font-size: 12px;
}
div {
/* 该元素没有设置font-size，因此继承了父元素的font-size: 12px; */
width: 10em; /* 10em = 12px * 10 = 120px */
}
</style>
<body>
<div></div>
</body>Il convient de noter que l'élément enfant p hérite de la taille de police du corps de l'élément parent, donc en fait, la phrase "font-size: 12px;" est implicite dans la feuille de style de p. Désormais, si vous définissez explicitement la taille de la police pour un élément enfant, l'élément enfant calculera la longueur absolue de em en fonction de sa propre taille de police. Par exemple :
<style>
body {
font-size: 12px;
}
div {
font-size: 20px;
width: 10em; /* 10em = 20px * 10 = 200px */
}
</style>
<body>
<div></div>
</body>Notez que dans l'exemple ci-dessus, la taille de police de p utilise px comme unité. Et si vous souhaitez l'utiliser ? Il convient de noter que si em est utilisé comme unité lors de la définition de la taille de la police, alors em sera la valeur relative de la taille de la police de son élément parent. Par exemple :
<style>
body {
font-size: 12px;
}
div {
font-size: 2em; /* 2em = 12px * 2 = 24px */
width: 10em; /* 10em = 24px * 10 = 240px */
}
</style>
<body>
<div></div>
</body>La taille de la police de l'élément enfant p est déterminée en fonction de la taille de la police du corps de son élément parent, donc 2em = 12px * 2, = 24px et la largeur de p est relative à ; sa propre police - La taille est déterminée, donc 10em = (12px * 2) * 10 = 240px. Il n’est donc pas surprenant que 2em=24px et 10em=240px dans p.
En fait, non seulement la largeur, mais aussi les em dans les éléments enfants, à l'exception de la taille de la police, sont déterminés en fonction de la taille de la police de l'élément parent, tous les autres em sont déterminés en fonction de leur propre police. -taille.
<style>
body {
font-size: 16px;
}
div {
font-size: 1.25em; /* 1.25em = 16px * 1.25 = 20px */
width: 10em; /* 10em = 20px * 10 = 200px */
height: 5em; /* 5em = 20px * 5 = 100px */
border: 0.05em solid #000; /* 0.05em = 20px * 0.05 = 1px */
margin: 0.25em; /* 0.25em = 20px * 0.25 = 5px */
padding: 0.75em; /* 0.75em = 20px * 0.75 = 15px */
line-height: 1.5em; /* 1.5em = 20px * 1.5 = 30px */
}
</style>
<body>
<div></div>
</body>(Partage vidéo d'apprentissage :
tutoriel vidéo CSS)
2 Calculez le bon em en fonction de px
1. Utilisez la calculatrice PXtoEM
Utilisez l'outil en ligne PXtoEM (http://pxtoem.com/) pour calculer facilement et rapidement la valeur em requise en fonction de px. .
2. Calculer manuellement em
La formule de calcul pour convertir px en em peut être déduite à l'envers de l'exemple suivant <style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>
px = taille du texte de référence * em => em = px / taille du texte de référence
3. formule , "Taille du texte de référence" nécessite une attention particulière :
Si l'élément lui-même définit la taille de la police, alors la taille du texte de référence est sa propre taille de police
Si l'élément lui-même ne définit pas la taille de la police, alors la taille du texte de référence est la taille de la police de l'élément parent- Lors de la définition de la taille de la police pour l'élément , si em est utilisé comme unité , alors la taille du texte de référence est la taille de la police de l'élément parent
- Pour plus de connaissances liées à la programmation, veuillez visiter :
- Vidéo de programmation
! !
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!