CSS で em は何を意味しますか-CSSチュートリアル-php.cn

CSS で em は何を意味しますか

青灯夜游

リリース： 2023-01-04 09:34:20

オリジナル

19356 人が閲覧しました

em は、現在のオブジェクト内のテキストのフォントサイズを基準とした CSS の相対的な長さの単位です。インラインテキストの現在のフォントサイズが手動で設定されていない場合は、ブラウザのデフォルトを基準とします。フォントサイズ。幅、高さ、行の高さ、マージン、境界線、その他のスタイルを設定するために使用できます。

CSS で em は何を意味しますか

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS には多くの単位があり、一般的に使用される px は絶対単位、em は相対単位です。 emを利用することで、レスポンシブ性やモバイル端末を前提とした上で、Web文書やHTML要素のフォントサイズ、幅、マージン、枠線などの一連の属性を一括してより便利かつ迅速に調整できるようになった面があると言えるでしょう。単位として em を使用すると、px よりも柔軟性が高くなります。

1. em

1. emの長さ

# em CSS における相対単位であり、その単位の長さは要素のテキストの縦の長さに基づいて決定されます。幅、高さ、行の高さ、マージン、パディング、境界線、その他のスタイルを設定するために使用できます。 1em=元素中文本的1个垂直高度
ログイン後にコピー
上記のルールによると、要素内のテキストのサイズが 16px の場合は 1em=16px、要素内のテキストのサイズが 20px の場合は 1em=20px...

2.em および HTML テキストサイズのデフォルト値

ブラウザ内のテキストのデフォルトは通常 16 ピクセルです。つまり、デフォルトでは:

1em=16px

ログイン後にコピー

これを変更するには設定はどうですか? body 要素の font-size を明示的に設定するだけです。例:

body {
    font-size: 24px;
    width: 10em;    /* 10em = 24px * 10 = 240px */
}

ログイン後にコピー

3.em と継承

CSS では、要素が font-size を設定しない場合、その font-size 値が親要素になります。 font-size 値は理解しやすく、単なる継承です。例:

<style>
    body {
        font-size: 12px;
    }
    div {
        /* 该元素没有设置font-size，因此继承了父元素的font-size: 12px; */
        width: 10em;    /* 10em = 12px * 10 = 120px */
    }
</style>
<body>
    <div></div>
</body>

ログイン後にコピー

子要素 p は親要素本体の font-size を継承するため、実際には「font-size: 12px;」という文が p のスタイルシートに暗黙的に含まれていることに注意してください。子要素の font-size を明示的に設定すると、子要素は独自の font-size に従って em の絶対長を計算します。例:

<style>
    body {
        font-size: 12px;
    }
    div {
        font-size: 20px;
        width: 10em;    /* 10em = 20px * 10 = 200px */
    }
</style>
<body>
    <div></div>
</body>

ログイン後にコピー

上記の例では、p のフォントサイズの単位として px が使用されていることに注意してください。したがって、em を使用したい場合はどうすればよいでしょうか。 font-size を設定するときに em を単位として使用した場合、em は親要素の font-size の相対値になることに注意してください。例:

<style>
    body {
        font-size: 12px;
    }
    div {
        font-size: 2em; /* 2em = 12px * 2 = 24px */
        width: 10em;    /* 10em = 24px * 10 = 240px */
    }
</style>
<body>
    <div></div>
</body>

ログイン後にコピー

子要素 p のフォントサイズは、親要素本体のフォントサイズに基づいて決定されるため、2em = 12px * 2, = 24px; となり、p の幅は次のようになります。独自のフォント - サイズが決定されるため、10em = (12px * 2) * 10 = 240px となります。したがって、p で 2em=24px および 10em=240px であることは驚くべきことではありません。

実際には、幅だけでなく、子要素のフォントサイズ em も親要素のフォントサイズに基づいて決定され、他のすべての em は独自のフォントサイズに基づいて決定されます。サイズ。

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

ログイン後にコピー

(学習ビデオ共有: css ビデオチュートリアル

)

2. px に基づいて正しい em

# を計算します。

##1. PXtoEM 計算ツールを使用する

オンラインツール PXtoEM (http://pxtoem.com/) を使用して、px に基づいて必要な em 値を簡単かつ迅速に計算します。。

2. em を手動で計算する

px を em に変換するための計算式は、次の例から逆に導き出すことができます

<style>
    div {
        font-size: 16px;
        width: 2em; /* 2em = 16px * 2 = 32px */
    }
</style>

ログイン後にコピー

px = 基準文字サイズ* em => em = px / 基準文字サイズ

3. 注意事項

上記内式、「参照テキストサイズ」には特別な注意が必要です:
#要素自体が font-size を設定する場合、参照テキストサイズは独自の font-size
要素自体が font-size を設定しない場合、参照テキストサイズは親要素の font-size になります。

#プログラミング関連の知識の詳細については、次のサイトを参照してください。

プログラミングビデオ###! ！ ###

以上がCSS で em は何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS で em は何を意味しますか

1. em

1. em

ブラウザ内のテキストのデフォルトは通常 16 ピクセルです。つまり、デフォルトでは:
1em=16px
ログイン後にコピー

2. px に基づいて正しい em

オンラインツール PXtoEM (http://pxtoem.com/) を使用して、px に基づいて必要な em 値を簡単かつ迅速に計算します。。

px = 基準文字サイズ* em => em = px / 基準文字サイズ

CSS で em は何を意味しますか

1. em

1. em

ブラウザ内のテキストのデフォルトは通常 16 ピクセルです。つまり、デフォルトでは: 1em=16pxログイン後にコピー

2. px に基づいて正しい em

オンライン ツール PXtoEM (http://pxtoem.com/) を使用して、px に基づいて必要な em 値を簡単かつ迅速に計算します。 。

px = 基準文字サイズ* em => em = px / 基準文字サイズ

ブラウザ内のテキストのデフォルトは通常 16 ピクセルです。つまり、デフォルトでは:
1em=16px
ログイン後にコピー

オンラインツール PXtoEM (http://pxtoem.com/) を使用して、px に基づいて必要な em 値を簡単かつ迅速に計算します。。