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.
1em=元素中文本的1个垂直高度
Valeur par défaut de la taille du texte 2.em et HTML
1em=16px
body {
font-size: 24px;
width: 10em; /* 10em = 24px * 10 = 240px */
}<style>
body {
font-size: 12px;
}
div {
/* 该元素没有设置font-size，因此继承了父元素的font-size: 12px; */
width: 10em; /* 10em = 12px * 10 = 120px */
}
</style>
<body>
<div></div>
</body><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
2. Calculer manuellement em
<style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>3. formule , "Taille du texte de référence" nécessite une attention particulière :
! !
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
