CSS サイズのパーセンテージ

#CSS の単位

絶対単位

インチ;

cm;

mm;

pt-pound

相対単位

要素のフォント サイズにリンクされたem-link;

rem - ルート要素のフォント サイズにリンク;

px - CSS ピクセルにリンク

% - 別の属性値の割合

CSS で使用可能 パーセント属性を取得します

配置: 上、右、下、左

ボックス モデル: 幅、高さ、マージン、パディング

背景: backgroug-position、backgroud-size

テキスト: text-indent

フォント: font-size

パーセンテージの計算方法

パーセンテージ 計算は、現在の要素を含むブロックを基準としたベースを基準に行われます。

含まれるブロックの幅に基づいて計算される属性: margin、padding、width、max-width、min-width、left、right、text-indent。

高さに基づいて含まれているブロック 計算されたプロパティ: top、bottom、height、max-height、min-height

現在のフォント サイズに基づいて計算されたプロパティ: line-height

line-height に基づいて計算されたプロパティ:vertical-align

要素自体の幅と高さを基準に:background-position:背景画像の位置を、それぞれ水平方向と垂直方向の2つの値を設定します。パーセンテージを使用すると、そのパーセンテージ値が要素と画像に同時に適用されます。たとえば、50% 50% は、画像の (50%, 50%) 点をフレームの (50%, 50%) 点に位置合わせします。これは、中心を中央に設定することと同じです。同様に、0% 0% は左上に相当し、100% 100% は右下に相当します。

要素自体の幅に基づきます:background-size ただし、この値は適用できるのはのみです要素をブロックするには、設定されたパーセンテージ値が使用されます。背景画像のサイズは、背景画像が配置されている要素の幅のパーセンテージに基づいて計算されます。

推奨チュートリアル: 「

CSS チュートリアル 」

以上がCSS サイズのパーセンテージの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。