CSSの幅と高さの複雑さを調査します

Uri ShakedとMichal Poragが共著したこの記事は、CSS幅と高さの計算の複雑さを掘り下げています。 CSS仕様の広範なデバッグと分析に基づいて、要素寸法の頻繁に使用される動作を解明します。

基本的な概念：

width: 640px;およびheight: 360px;結果として640x360ピクセル要素が得られます。ただし、パディングを追加するとこれが変更されます。 padding: 10px; 、レンダリングされたサイズは、デフォルトのcontent-box box-sizingのため、660x380pxになります。ボックスモデルは、次のように幅と高さを計算します。

• 幅： width padding-left padding-right border-left border-right
• 高さ： height padding-top padding-bottom border-top border-bottom

これは、ブロックレベルの要素に適用されます（例：<div> 、<code><p> 、<code><main></main> ）、自然に拡張して利用可能な幅を埋めます。インライン要素の動作は異なります。

インライン要素ニュアンス：

インライン要素の場合（例、<span></span> ）、 widthとheightほとんど無視されます。寸法はコンテンツによって決定されます。インライン要素内でブロック要素をネストすると、インラインの流れが破壊され、この区別が強調されます。また、インライン要素は、 topとbottomマージンを無視します。

親子の相互作用：

親子関係は、次元の計算に大きな影響を与えます。

• 相対単位：パーセンテージは、親要素の寸法に関連しています。 width: 100%;親の幅を採用します。高さは同様に動作します。

• パディングとマージン：パーセンテージベースのパディングとマージンは、垂直値であっても、常に親の幅に関連しています。この「パディングハック」は、アスペクト比ボックスを作成するために使用されますが、 aspect-ratioプロパティが推奨されています。

• display: inlineおよびinline-block ： display: inline; display: inline-block;インラインの動作とブロックレベルのボックスモデルの計算を組み合わせて、 margin 、 width 、 height尊重します。

周期的なパーセンテージサイジング：

宣言された幅を欠く親の中に相対幅（例えば、 33% ）を持つ子要素は、「サイクリックパーセンテージサイジング」シナリオを作成します。ブラウザは、子供の内容に基づいて親の幅を繰り返し計算し、新しく計算された親の幅に比べて子供の割合の幅を適用します。

min-width 、 min-height 、 max-width 、 max-height ：

これらのプロパティは、最小および最大サイズの制限を定義します。明示的な幅（たとえば、 100% ）であっても、 max-width要素のサイズを制約できます。 widthとmax-width値を交換すると、親要素が関与している場合、特にdisplay: inline-block;を使用すると、異なる結果が生じる可能性があります。 。

min() 、 max() 、およびclamp() ：

これらの関数は、メディアクエリなしで応答性のあるサイジングを提供します。

• min() ：その議論の最小値を返します。
• max() ：引数の最大値を返します。
• clamp() ： min()とmax()の組み合わせ。

これらの関数は、応答性のある要素の次元を定義する簡潔な方法を提供します。

結論：

CSS幅と高さの計算は驚くほど複雑です。明示的な値が指定されていますが、レンダリングされた寸法は、ボックスモデル、要素タイプ（ブロック対インライン）、親子関係、相対単位、およびその他の要因によって影響を受けます。これらの複雑さを理解することは、正確なレイアウト制御にとって重要です。

著者： Uri ShakedとMichal Porag