Est-ce qu'em est en CSS par rapport à l'élément parent ou à la taille de l'élément actuel ? (exemple de code)-tutoriel CSS-php.cn

Est-ce qu'em est en CSS par rapport à l'élément parent ou à la taille de l'élément actuel ? (exemple de code)

不言

Libérer： 2018-10-24 16:58:14

avant

3226 Les gens l'ont consulté

Le contenu de cet article demande si em en CSS est relatif à la taille de l'élément parent ou de l'élément actuel ? (Exemple de code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

em est une unité relative couramment utilisée en CSS, il faut donc faire attention à certains pièges.

1em est égal à la taille de police de l'élément actuel, sauf si vous définissez la taille de police

Il existe de nombreux articles disant que 1em est égal à la taille de police de l'élément parent ! Cette affirmation est en réalité inexacte. Regardez l'exemple suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        div {
            font-size: 32px;
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>

Copier après la connexion

sera étiré par padding-bottom, et la hauteur de padding-bottom est de 64 px, et non de 32 px ! Cela prouve que 1em est égal à la taille de police de l'élément actuel (à une exception près, discutée ci-dessous).

Quelle est la relation entre la taille et la longueur de la police ? La police n'est-elle pas un carré ? En fait, la taille de la police est définie comme la largeur de M.

Pourquoi certaines personnes pensent-elles à tort que 1em est égal à la taille de la police de l'élément parent ? En effet, si vous utilisez des unités em lors de la définition de la taille de la police, la taille de la police héritera toujours de la valeur par défaut, donc 1em est toujours égal à la taille de la police de l'élément parent. Il s'agit d'un cas particulier uniquement lors de la définition de la taille de la police ! Ce cas particulier est facile à comprendre, après tout, je règle la taille de la police de l'élément courant ! Comment pouvons-nous utiliser la taille de police actuellement définie comme unité ! N'est-ce pas un paradoxe !

Par exemple, si ce paradoxe se produit réellement, la situation suivante se produira : le propriétaire du magasin de fruits vous dit : "Combien de kilos d'oranges voulez-vous, je vais les emballer pour vous", mais vous dites au patron : "La quantité que je veux est 2 fois la quantité que je veux finalement" (analogue à la définition de la taille de police : 2em). À ce moment-là, le propriétaire du magasin de fruits va probablement s'effondrer. Combien d'oranges va-t-il emballer pour vous ?
Afin d'éviter que cela ne se produise, si vous utilisez des unités relatives lorsque vous spécifiez la quantité, l'unité ne doit pas être relative à la quantité que vous spécifiez pour le moment. Vous pouvez dire à votre patron : « La quantité que je veux est le double de celle achetée par le dernier client » (similaire à la définition de la taille de police : 2em). Après avoir acheté les oranges, vous pouvez dire au patron : « Je veux encore des pommes, deux fois plus que les oranges que je viens d'acheter » (similaire au réglage padding-bottom : 2em).

Sauf ce cas particulier, lors de la définition d'autres propriétés CSS, 1em est égal à la taille de la police de l'élément actuel .

Dans l'exemple ci-dessus, l'utilisation de em lors de la définition de font-size peut prouver l'existence de ce cas particulier :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        div {
            font-size: 2em;  /* 仅仅这一行改变了！ */
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copier après la connexion

La hauteur finale est toujours de 64 px, car lors de la définition de la taille de police lorsque définition de padding-bottom, 1em == 16px ; lors de la définition de padding-bottom, 1em est égal à 32px.

Que se passe-t-il si vous utilisez em comme taille de police sur l'élément racine ? Il n'a aucun élément parent ! Cela n'a pas d'importance, pour les propriétés héritées (y compris font-size), la valeur par défaut de l'élément racine est initiale. Pour la plupart des navigateurs, la valeur initiale de font-size est 16px. Par conséquent, lors de la définition de la taille de la police sur l'élément racine, sa valeur est toujours de 16 px et 1em est égal à 16 px

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            /* 2*16px=32px */
            font-size: 2em;
        }
        div {
            /* 2*32px=64px */
            font-size: 2em;
            /* 2*64px=128px */
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>

Copier après la connexion

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!