CSS3 における最新の長さ単位の導入

マークの説明:

数字は疑わしい領域としてマークされています

公式文書は基本的に英語であり、曖昧さがあるため、さまざまな読者によって翻訳後に混乱が生じる可能性があるため、固有名の後に英語訳を付けるようにしてください。という区別から生まれます。

概要:

em: 現在のオブジェクト内のテキストに対する相対的なフォント サイズ。親ノードに相対的なフォント サイズ

rem: ルート要素 に相対的なフォント サイズ。アプリケーション シナリオ: レイアウトはテキストの内容によって決まります。

vh と vv: 1vh はビューポートの高さ^①の 1/100 に等しく、1vw はビューポートの幅の 1/100 に等しい。

vmin と vmax: ビューポートの高さと幅の最小値または最大値に関して、vmin はビューポートの幅と高さの最小値の 1/100 に等しくなります。アプリケーション シナリオ: 要素を常に画面上に表示します。

ch:数字0の幅

ex:現在のフォントの小文字x文字の高さ、または1em^②の1/2。適用シナリオ: 上付き文字と下付き文字

抽出された情報:

1. font-size: 宣言されていない場合は、親ノードのプロパティが継承されます

拡張子:

①window、document、body幅と高さ:

本文の高さは、本文要素 (境界線のスクロール バーなどを含む) の高さで、デフォルトでは 8 ピクセルのマージンが付きます。

HTML に色が設定されておらず、本文に色が設定されている場合。 , ボディの色が背景全体を塗りつぶします

ビューポートとは、境界線、スクロールバー、ツールバーのドキュメント表示領域を除いた、ブラウザーの表示範囲を指します

②どうすれば0.5emが1exに等しくなりますか？

実際にテストした結果、0.5emと1exの設定ではパフォーマンスが若干異なることが判明しました。結局のところ、小文字の x 文字はフォント サイズ font-size の半分に等しくありません。もちろん、この条件を満たすフォントが存在する可能性を排除することはできません

相対: 適切な位置にオフセットされます。ドムの元の位置は保持されます

以上がCSS3 における最新の長さ単位の導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。