CSS の em は親要素または現在の要素のサイズに相対的なものですか? (コード例)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS の em は親要素または現在の要素のサイズに相対的なものですか? (コード例)

不言

Oct 24, 2018 pm 04:58 PM

この記事でわかることは、CSS の em が親要素と現在の要素のどちらのサイズに相対的なのかということです。 (コードサンプル) は、参考にしていただければ幸いです。

em は CSS でよく使用される相対単位であるため、いくつかの落とし穴に注意する必要があります。

1em は、font-size を設定していない限り、現在の要素のフォントサイズと同じです。

1em は親要素のフォントサイズと等しいという記事がたくさんあります。この記述は実際には不正確です。次の例を見てください:

<!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>

ログイン後にコピー

は、padding-bottom によって引き伸ばされ、padding-bottom の高さは 32 ピクセルではなく 64 ピクセルになります。これは、1em が現在の要素のフォントサイズと等しいことを証明します (後述する 1 つの例外を除きます)。

フォントのサイズと長さの関係は何ですか?フォントが四角じゃないですか？実際には、フォントサイズは M の幅として定義されます。

1em が親要素のフォントサイズと等しいと誤解する人がいるのはなぜですか?これは、font-size を設定するときに em 単位を使用した場合、font-size は引き続きデフォルト値を継承するため、1em は依然として親要素のフォントサイズと同じであるためです。これは、font-size を設定する場合のみの特殊なケースです。この特殊なケースは理解しやすいです。結局のところ、現在の要素のフォントサイズを設定しているのです。現在設定されているフォントサイズを単位として使用するにはどうすればよいですか。これは矛盾ではありませんか!

たとえば、この矛盾が実際に起こると、次のような状況が発生します。果物屋の店主があなたに「オレンジを何キログラムでも詰めてあげるよ」と言いましたが、あなたは上司に次のように言います。「私が望む量は、私が最終的に望む量の 2 倍です」(font-size: 2em の設定に類似)。このとき、果物屋の店主は倒れてしまいそうです。みかんを何個詰めてくれるでしょうか。
これを避けるために、数量を指定するときに相対単位を使用する場合、この単位は現在指定している数量に相対的であってはなりません。上司に「私が欲しい数量は、最後の顧客が購入した数量の 2 倍です」と言うことができます (font-size: 2em を設定するのと同様)。オレンジを買った後、上司に「リンゴがもう少し欲しいです。今買ったオレンジの 2 倍です」と言うことができます (padding-bottom: 2em を設定するのと似ています)。

この特殊な場合を除き、他の CSS プロパティを設定する場合、1em は 現在の要素のフォントサイズ と同じです。

上記の例では、font-size を設定するときに em を使用すると、この特殊なケースの存在を証明できます:

<!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>

ログイン後にコピー

最終的な高さは依然として 64px です。 font-size を設定すると、1em == 16px、padding-bottom を設定すると、1em は 32px になります。

ルート要素のフォントサイズとして em を使用するとどうなりますか?親要素がありません。継承されたプロパティ (font-size を含む) の場合、ルート要素のデフォルト値は初期値です。ほとんどのブラウザでは、font-size の初期値は 16 ピクセルです。したがって、ルート要素に font-size を設定するとき、その値は 16px のままで、1em は 16px

<!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>

ログイン後にコピー

に等しくなります。

以上がCSS の em は親要素または現在の要素のサイズに相対的なものですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。