css属性では、多くの属性の値は、幅、高さ、パディング、マージン、フォントサイズ、行の高さなどのパーセンテージになる可能性があります。これらのパーセンテージ値の相対的な計算は誰ですか？
HTML：
<div class = " 親" > <div class = " 子" >我是内容<div> <div>
CSS：
.parent { width：500px; 高さ：300px; パディング：50px; 背景：＃999 ; マージン - 左：50px; フォント - サイズ：15px; 行 - 高さ：30px; border：1px solid＃808080 ; } .child { 幅：50％; 高さ：20％; パディング-左：10％; マージン-左：10％; ボーダー：2px黒一色; フォントサイズ：150％; line -height：150％; 背景：オレンジ; }
この時点で、親div要素のコンテンツボックスの幅と高さはそれぞれ500pxと300pxであり、パディングボックスの幅と高さはそれぞれ600pxと400px（左）です。子div要素の寸法は右側に表示されます。
子div要素がfloatをleftに設定した場合、結果は上記と同じです。つまり、floatの下の各属性のパーセンテージの計算は、通常のドキュメントフローと同じです。
子div要素を絶対配置に設定します
CSS（絶対配置関連サイズのみを追加、残りの属性サイズ値は変更されていません）：
.parent { position：relative; } .child { position：absolute; 上：20％; 左：20％; }
子要素の幅、高さ、内側と外側のマージンなどの属性値の変更は次のとおりです。
上記の例から、次のように要約されます。
1. font-size
現在のフォントサイズは100％です。
二、line-height
line-heightの計算値は、現在のフォント値にこのパーセンテージを掛けたものです。line-heightの値は値とパーセンテージの差であることに注意してください。これについてはここでは詳しく説明しません。
3、幅
通常のドキュメントフローとフローティング設定の場合、親要素のコンテンツボックスに対する幅はベンチマークとして計算され、絶対配置の場合、パディングボックスに対する幅はベンチマークとして計算されます。
4、高さ
高さもパーセンテージをサポートしますが、高さと幅の間には明確な違いがあります。親要素の幅属性が自動の場合でも、子要素の幅はパーセンテージで設定できます。ただし、高さの場合、子要素が通常のドキュメントフローにある限り、親要素の高さ属性が自動の場合、子要素の高さはパーセンテージに設定され、無視されます。仕様には、包含ブロックの高さが明示的に示されていない（つまり、高さがコンテンツによって決定される）場合、要素が完全に配置されていない場合、計算値は自動であると記載されています。そして、auto * 100/100 = NaN。したがって、高さの割合の設定が有効な場合は、次の設定が必要です。
body、html { 高さ：100％ }
上記の高さの計算は通常の流れに対するものです
五、マージン、パディング
垂直でも水平でも、親要素の幅を基準にします。通常のドキュメントフローとフローティング設定の場合は、親要素のコンテンツボックスの幅を基準にします。絶対配置の場合は、パディングボックスの幅を基準にします。
6番目に、位置決め要素の左/右/下/上パーセント値
上部と下部の設定パーセンテージの配置は、パディングボックスの高さに従って計算され、左と右の設定パーセンテージの配置は、パディングボックスの幅に従って計算されます。