ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS で em は何を意味しますか
CSS で em は何を意味しますか
- 青灯夜游オリジナル
- 2021-04-02 15:17:1019402ブラウズ
em は、現在のオブジェクト内のテキストのフォント サイズを基準とした CSS の相対的な長さの単位です。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトを基準とします。フォントサイズ。幅、高さ、行の高さ、マージン、境界線、その他のスタイルを設定するために使用できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS には多くの単位があり、一般的に使用される px は絶対単位、em は相対単位です。 emを利用することで、レスポンシブ性やモバイル端末を前提とした上で、Web文書やHTML要素のフォントサイズ、幅、マージン、枠線などの一連の属性を一括してより便利かつ迅速に調整できるようになった面があると言えるでしょう。単位として em を使用すると、px よりも柔軟性が高くなります。
1. em
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSの初期化とは何ですか次の記事：CSSの初期化とは何ですか