CSS:要素の高さと幅に関する考察 連載記事(2)_html/css_WEB-ITnose

前書き: 前の記事では、さまざまな状況におけるブロックレベルの非置換要素の幅と高さのパフォーマンスについて説明しました。この記事では、w3c によって定義されたビジュアル フォーマット モデルのさまざまな要素について詳しく説明します。の定義、およびインラインレベルの非置換要素とインラインレベルの置換要素の幅と高さの説明

要素のさまざまな定義

ブロックレベルの要素とブロック要素

ブロックレベルの要素 (block -level 要素)

ブロックにフォーマットされた要素は、平たく言えば、新しい行に折り返される要素です。表示属性値は次のとおりです。ブロック、リスト項目、およびテーブルの値は、要素をブロックレベルの要素に設定できます。

ブロック要素

表示属性値が block である要素は、ブロックレベルの要素のサブセットです。

インラインレベルの要素とインライン要素

インラインレベルの要素 (インラインレベルの要素)

インラインレベルの要素は、コンテンツの新しいブロックを形成しないが、コンテンツを同じブロック上に配布できる要素です。ライン。表示属性の値: inline、inline-table、および inline-block はすべて、要素をインライン レベルの要素に設定できます。

インライン要素

表示属性がインラインである要素は、インラインレベルの要素のサブセットです

置換された要素と置換されていない要素

置換された要素（置換された要素）

コンテンツはCSSビジュアルフォーマットモデルによって制御されませんCSS レンダリング モデルでは、このコンテンツのレンダリングは考慮されておらず、要素自体には通常、置換要素と呼ばれる固有の寸法 (幅、高さ、アスペクト比) があります。このタイプの要素の場合、ブラウザはタグと属性に基づいて要素の特定の表示コンテンツを決定します。
一般的な置換要素には、img、input、textarea、select、button などがあります。

非置換要素 (非置換要素)

w3c は非置換要素について明確な説明をしていませんが、確実なことは何かそれは、置換された要素を除き、すべての要素は非置換要素であるということです。

要素の高さと幅についての説明

インラインレベルの非置換要素

幅と高さの設定は、span などのインラインレベルの非置換要素には適用されません

インラインレベルの置換要素

これについては以前に説明しました。置換要素の概念は、通常、**固有の寸法** (幅、高さ、アスペクト比) を持つ要素です。したがって、置換要素の幅と高さが設定されていない場合。 、要素の幅と高さは要素自体の固有のサイズと同じです。したがって、要素の幅または高さが 100% に設定されている場合についてのみ説明します

1. 固有の比率を持つ要素

固有の比率を持つ要素の場合、幅と高さのいずれかが特定の値である場合、もう一方の側に値が設定されていない場合、もう一方の側の計算値は、決定された高さまたは幅に固有の比率を乗算することによって得られます。したがって、固有の比率を持つ要素については、高さまたは幅の一方のみを議論する必要があります。 . img 要素など

2. 固有の比率を持たない要素

固定比率を持たない要素の場合、input、textarea、select、button など、要素の幅や高さは他の要素の変更によって変化しません。

結論

インラインレベルの置換要素の場合: 幅を 100% に設定します
前の記事の例と比較して、自分で実験を行うことができます。ここでは結論を直接示します
要素が通常のフロー要素またはフローティング要素 **、要素の幅または高さは親要素の幅または高さの 100%、要素が **絶対位置要素**の場合、要素の幅または高さは次のようになります。要素のオフセット親の幅または高さの 100%。要素が **固定位置要素** の場合、要素の幅または高さは常に本体の 100% です

参照:
http://www .w3.org/TR/CSS21/conform.html
http://www.w3.org/TR/ 2011/REC-CSS2-20110607/visudet.html
ビジュアル書式設定モデルのさまざまなボックス
配置された要素と非置き換えられた要素