1em=元素中文本的1个垂直高度
1em=16px
CSS で em は何を意味しますか
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...
1em=元素中文本的1个垂直高度
2.em および HTML テキスト サイズのデフォルト値
ブラウザ内のテキストのデフォルトは通常 16 ピクセルです。つまり、デフォルトでは: 1em=16px
ログイン後にコピー
これを変更するには設定はどうですか? body 要素の font-size を明示的に設定するだけです。例:1em=16px
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>
<style> body { font-size: 12px; } div { font-size: 20px; width: 10em; /* 10em = 20px * 10 = 200px */ } </style> <body> <div></div> </body>
<style> body { font-size: 12px; } div { font-size: 2em; /* 2em = 12px * 2 = 24px */ width: 10em; /* 10em = 24px * 10 = 240px */ } </style> <body> <div></div> </body>
<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 ビデオ チュートリアル
)<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>
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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Vue.js では、placeholder 属性は、input 要素のプレースホルダー テキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベスト プラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。

スパン タグは、テキストにスタイル、属性、または動作を追加できます。 色やフォント サイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。

CSS の REM は、ルート要素 (html) のフォント サイズに対する相対単位です。次の特性があります: ルート要素のフォント サイズに相対し、親要素の影響を受けません。ルート要素のフォント サイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。 応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォント サイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォント サイズを調整することで、グローバル フォント サイズを簡単に変更できます。

Vue に画像を導入するには、URL、require 関数、静的ファイル、v-bind ディレクティブ、CSS 背景画像の 5 つの方法があります。動的画像は Vue の計算プロパティまたはリスナーで処理でき、バンドルされたツールを使用して画像の読み込みを最適化できます。パスが正しいことを確認してください。そうでないと、読み込みエラーが表示されます。

JavaScript でプロンプト() メソッドを使用する場合、次の 3 つの方法で改行を実現できます。 1. 改行する位置に「\n」文字を挿入します。 2. 行に改行文字を使用します。プロンプトテキスト; 3. CSS の "white" -space: pre" スタイルを使用して改行を強制します。

ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノード タイプには、要素ノード、テキスト ノード、コメント ノード、ドキュメント ノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページ コンテンツ、イベント処理、アニメーション、およびデータ バインディングを動的に作成するのに役立ちます。

ブラウザ プラグインは通常、次の言語で作成されます。 フロントエンド言語: JavaScript、HTML、CSS バックエンド言語: C++、Rust、WebAssembly その他の言語: Python、Java

1. まず、左下隅にある設定アイコンを開き、設定オプションをクリックします。 2. 次に、ジャンプしたウィンドウで CSS 列を見つけます。 3. 最後に、不明なプロパティ メニューのドロップダウン オプションをエラー ボタンに変更します。 。
