CSS: 要素 width_html/css_WEB-ITnose に関するディスカッション

要素の幅に関する議論

1. 要素には幅がありません

最初のケース: 要素はドキュメントフロー内の要素です

<!-- 父元素宽度为100px --><div style="width:100px;">     <div style="background:orange;">dd</div></div>

<!-- 父元素宽度为200px --><div style="width:200px;">     <div style="background:orange;">dd</div></div>

<!-- 父元素不设宽度，继承body宽度 --><div>      <div style="background:orange;">dd</div></div>

結論 1: サブの位置を変更する-要素から位置へ:相対は上記の例と同じように動作するため、要素が幅を設定しない場合、要素がドキュメント フロー内の要素である場合、、この要素は親要素の幅を継承します

2 番目のケース: 要素がドキュメント フロー外の要素である

    <!-- 父元素不设宽度，继承body宽度 -->    <div>        <div style="float:left;background:orange;">dd</div>    </div>

結論 2: サブ要素の位置をposition:absolute またはposition:fixedに変更すると、上記の例と同じパフォーマンスになります。要素に幅が設定されていない場合、サブ要素がドキュメント フロー外の要素である場合、この要素の幅はコンテンツの幅と等しくなります。

2. 要素の幅は 100% です

最初のケース: 要素はドキュメント フロー内の要素です

結論 3: 上記の結論 1 の例の要素の幅を 100% に変更します。パフォーマンスは結論 1 の例と同じです。 動作も同じです。したがって、要素がドキュメント フロー内の要素である場合、子要素の幅は親要素の幅の 100% になります。 2 番目のケース: 要素がドキュメント フロー要素の外にあります

1. 要素は浮動要素です

<!-- 父元素宽度为100px --><div style="width:100px;">     <div style="float:left;background:orange;width:100%">dd</div></div>

<!-- 父元素宽度为200px --><div style="width:200px;">     <div style="float:left;background:orange;width:100%">dd</div></div>

結論 4

: 要素の幅が 100% の場合、要素は浮動要素です。この要素の幅は親要素の幅の 100% です。

2. 要素は絶対配置要素です

    <!-- 父元素宽度为100px -->    <div style="width:100px;">         <div style="position:absolute;background:orange;width:100%">dd</div>    </div>

<!-- 父元素宽度为100px --><div style="width:100px;position:relative">    <div style="position;absolute;width:100%;background:orange">dd</div></div>

<!-- 父元素宽度为200px --><div style="width:200px;position:relative">    <div style="position;absolute;width:100%;background:orange">dd</div></div>

結論 5

: 要素の幅が 100% の場合、要素が絶対配置要素の場合、要素の幅要素のオフセット -100% の親の幅に等しい

3. 要素は固定配置要素です

<!-- 父元素宽度为100px --><div style="width:100px;"><div style="position:fixed;background:orange;width:100%">dd</div></div>

<!-- 父元素宽度为100px --><div style="width:100px;position:relative"><div style="position:fixed;background:orange;width:100%">dd</div></div>

結論 6

: 要素の幅が 100% の場合、要素が固定位置要素である場合、要素の幅は常に本文の幅の 100% になります 概要

1. 要素に幅がない場合:

要素が

通常のフロー要素

の場合、要素の幅は親要素の幅と等しくなります。要素が

デタッチされたドキュメント フロー要素の場合、要素の幅は要素コンテンツの幅と等しくなります。要素の幅が 100% の場合: 要素が

通常のフロー要素

の場合、要素の幅は親要素の幅の100%です。要素が

絶対位置要素

の場合、要素の幅は親要素の幅の100%です。要素のオフセット親の幅。要素が固定位置要素の場合、要素の幅は常に本体の100%です