要素の自動幅と高さの影響要因_html/css_WEB-ITnose

要素の幅と高さが設定されていない場合、デフォルトの幅と高さの値は auto であることがわかっています。そして、この自動ではどのようにして要素に幅と高さを自動的に設定できるのでしょうか?つまり、要素の幅と高さに影響を与える要因は何でしょうか?この記事では、例を使用してこの問題を検討します。HTML 構造と初期 CSS は次のとおりです。

    <div class="container">        <div class="test"></div>    </div>

    .container {        position: relative;        width: 200px;        height: 200px;        background-color: #ff9;    }    .test {        border: 1px solid #979797;        background-color: #f1f1f1;    }

要素の通常のフロー位置 (位置は静的または相対的)

auto width

まず、上記のコードの結果を確認します:

次に、要素にコンテンツを追加します:

したがって、位置属性は設定されていません (つまり、デフォルト値は静的です)。上記の実行結果に示されているように、要素の幅はコンテナの幅に適応しているように見え、高さはコンテナの高さに関連しています。要素の内容。

ただし、いわゆる幅アダプティブは、要素の幅がコンテナの幅と必ず同じになることを意味するのではなく、要素の 幅 + 左右のパディングを指すことに注意してください。 + 左右の境界線 + 左右のマージン はコンテナの幅と同じです。たとえば、以下の .test 要素にマージンを追加すると、要素の幅はコンテナの幅と等しくなくなります。

極端な場合のさらなるテスト:

このとき、要素の幅が余白分に圧迫されて文字がはみ出してしまいます。

自動高さ

上記からわかるように、要素の自動高さは常にコンテンツの高さと同期して変化するだけであり、要素の高さを「適応」させることはありません。

もちろん、上記は要素のコンテンツがテキストである場合のみを説明しているため、自動高さはコンテンツの変更に非常に正直に追従します。また、コンテンツがブロックレベル要素の場合、自動高さは一般にコンテンツの高さに応じて変化しますが、コンテンツが絶対的に配置またはフローティングされている場合は、おなじみの「オーバーフロー」(高さの崩壊) が発生します:

これら 2 つの例を通して、自動幅が引き続きアダプティブ コンテナーの幅であることもわかります。

結論

結論は次のとおりです。デフォルトの配置の場合、要素の自動幅は常にコンテナの幅に適応し、自動高さはコンテナの高さに関係します。コンテンツがフローティングまたは絶対配置されているときに発生する高さの崩壊が発生しない限り、要素のコンテンツ。

相対位置決めが使用される場合、結果は上記と同じになります。原理もわかりやすいです。結局のところ、相対配置中も要素は元の位置でレンダリングされます。それは自分で試してみることができます。

絶対配置とフローティング。要素の数

auto width

次に、.test 要素を絶対配置にします:

コンテンツを追加します:

追加されたコンテンツのみ 要素には幅があり、明らかに幅はコンテンツの幅にのみ適応します。ただし、別の特殊なケースがあります。つまり、テキスト コンテンツの幅が改行によって変動するため、テキストの長さを増やすと次のようになります。

のテキスト。テスト要素は実際には自動的に折り返され、幅が変化します。コンテナに適応させた後、改行を無効にしてみてください。

まあ、改行が許可されていない場合でも、幅は変更されます。コンテンツの幅。では、次に解決する必要があるのは、テキスト コンテンツの行折り返しルールとは何なのか、あるいはテキスト コンテンツの幅に何が影響するのかということです。

ルールは実際には難しくありません。自動行折り返しが可能な場合 (空白: 通常/プレラップ/プレライン)、テキスト内の最も長い単語または漢字の長さが最も短くなります。行折り返し単位 (word-break:break-all が設定されている場合、各文字の長さを改行単位とすることもできます)。この最小改行単位は分割できません。テキストコンテナの幅が十分でない場合、テキストは折り返し単位を分割せずに、スペースや-などの文字でのみ自動的に折り返されます。このルールに違反することはできません。非常に長い単語を見てみましょう:

上記の結果は、要素の幅を適応させるために .test 要素のテキストが実際に自動的に折り返されることを示しています。ただし、改行ルールの下でのみ最善を尽くすことができ、単語をコンテナに合わせて分割することはありません。もちろん、word-break:break-all を設定すると、取得するために「最善を尽くす」ことができます。そのような結果:

そして、.test 要素がコンテナの外に出た場合でも、.test 要素の幅がコンテナに「収まる」ようにテキストは折り返されます。

自動高さ

最後に、自動高さを見てみましょう。上記の例では、自動高さも高さと同期して変化します。テキストコンテンツの。また、コンテンツがフローティングの場合は、コンテナの絶対位置を設定することもフローティングをクリアする方法の 1 つであるため、次のようになります。

しかし、コンテンツが絶対に配置してもオーバーフローします。また、コンテンツがオーバーフローするため、幅がなくなります。

結論

まとめると、結論は次のとおりです。

1. コンテンツは純粋です テキスト要素が絶対に配置されている場合、要素の自動幅がコンテナの幅に適応するように、そのテキストは可能な限り折り返そうとします。

2. 要素の内容が固定幅のブロックレベル要素のみの場合、自動幅が変更されるような状況は発生しません。また、コンテンツが絶対配置またはフローティングされている場合、要素の幅と高さは直接 0 に設定されません。

3. 要素コンテンツにプレーン テキスト要素とブロック レベル要素の両方が含まれる場合、明らかに 2 つの幅を比較する必要があり、要素の自動幅は最終的には一番広いもの。

4. コンテンツの絶対位置によって引き起こされる高さの崩壊が発生しない限り、自動高さは要素のコンテンツの合計の高さにのみ関連します。

同様に、検証後、.test が浮動配置を使用する場合、結論は上で説明した絶対配置と同じになります。