2019-07-05 CSSの各パーセンテージ値はどの計算に対してですか?

1022 ワード

CSSの各パーセンテージ値はどの計算に対してですか?


たとえば、サブエレメントwidth:50%を設定します.
.son{
  width:50%;
}

.son
widthは親要素に対するcontent領域の幅値計算heightは親要素に対するcontent領域の高さ値計算padding-left,padding-right,padding-top,padding-bottomは親要素に対するcontent領域の幅値計算margin-left,margin-right,margin-top,margin-bottomは親要素に対するcontent領域の幅値計算
position:absoluteの要素の場合、計算値にはサブ要素left:50%の設定など、特別なものがあります.
.son{
  position:absolute;
  left:50%;
}

.sonのleft値またはright値は、ブロックを含む幅に対して計算されるtop値またはbottom値は、ブロックを含む高さに対して計算される
position:relativeの要素の場合、計算値と幅の高い計算規則は同じです.たとえば、サブ要素left:50%を設定します.
.son{
  position:relative;
  left:50%;
}

left値またはright値は、親要素の幅に対して計算されるtop値またはbottom値が親要素の高さに対して計算される