置換元素/置換元素1.1.1つのコンテンツはCSSビジュアルフォーマットモデルによって制御されず、CSSレンダリングモデルはこのコンテンツのレンダリングを考慮せず、要素自体が一般的に固有のサイズ(幅、高さ、幅比)の要素を有し、置換要素と呼ばれている.1.2. 置換要素とは、ブラウザが要素のラベルと属性に基づいて、要素の具体的な表示内容を決定することです.1.3. 例えばブラウザはimgタグのsrc属性の値に基づいてピクチャ情報を読み出して表示するが、(X)HTMLコードを表示するとピクチャの実際の内容が見えない.また、例えばinputタグのtype属性に基づいて、入力ボックスを表示するか、ラジオボタンを表示するかなどを決定する.1.4. HTMLのimg、input、textarea、select、objectは置換要素です.これらの要素は、実際の内容、すなわち空の要素ではないことが多い. 非置換元素/非置換元素2.1.HTMLのほとんどの要素は、ブラウザなどのユーザー側に直接表示される非置換要素です.たとえば、などです.
<span>hello wordspan>
行の内部レベル置換の幅定義幅の高い計算値がすべてautoであり、要素に固有幅がある場合、widthの使用値がこの固有幅である典型的な例は、幅の計算値がautoである場合、幅の使用値がそのデフォルトの固有幅である.
幅の算出値がautoで要素に固有幅がある場合、widthの使用値がこの固有幅の例である上とする.
幅の算出値がautoであり、高さが非autoの算出値であり、要素に固有幅比がある場合、widthの使用値が高さ使用値*固有幅比の典型的な例:imgはその高さ値のみを定義すると、その幅は固有幅比に基づいて等比設定され、これもなぜimgが行内要素であるかであるが、幅を設定できる理由である.
それ以外にwidthの計算値がautoの場合、幅の使用値は300 pxの典型的な例であるiframe、canvas である.
行内レベル置換の高さ定義幅の高い計算値がautoであり、要素に固有の高さがある場合、heightの使用値はその固有の高さである. 高さの計算値がautoであり、要素に固有の高さがある場合、heightの使用値はその固有の高さである. 高さの計算値がautoで幅が非autoの計算値であり、要素に固有幅比がある場合、heightの使用値は、幅使用値/固有幅比である. 高さの算出値がautoで上記条件が全く一致しない場合、heightの使用値は150 pxを超えることができず、幅は長方形高さの2倍を超えることができない.
行の内段非置換要素の幅定義幅設定は無効です.例えば、
<span>hello wordspan>
行の内部レベルの非置換要素の高さ定義の高さ設定が無効です.たとえば、
<span>hello wordspan>
参考資料:なぜimg、inputなどのインライン要素が幅、高さを設定できるのか
ディスプレイスメントおよび非ディスプレイスメント要素