CSS ボックスの折りたたみに対する 5 つの解決策

CSS ボックスの折りたたみに対する 5 つの解決策

まず、ボックスコラプスとは何でしょうか?

親ボックスの内側にあるべき要素が外側にあります。

第二に、箱はなぜ崩壊するのでしょうか?

親要素が十分なサイズに設定されておらず、子要素がフロートに設定されている場合、子要素は親要素の境界(ドキュメント フローの外)から飛び出します。特に、親要素の高さが自動で、親要素内にフロートしていない他の表示要素がない場合、親ボックスの高さは直接 0 に縮小されます。これを CSS の高さ縮小と呼びます。

次の図では、下部の 2 つの子要素のボックスがそれぞれ左と右にフロートするように設定されており、上部の長いボックスは折りたたまれています。

元:

3. ボックスの崩壊に対するいくつかの解決策

最も単純で直接的かつ大まかな方法​​は、ボックスのサイズをハードコードし、各ボックスの幅と高さを適切な値になるまで固定することです。この方法の利点は、シンプルで便利、互換性が良い、コンテンツの変更が少なくボックスのレイアウトを伴わないレイアウトに適していることです。欠点は、適応性がなく、ブラウザのウィンドウサイズがユーザーエクスペリエンスに直接影響することです。

外側の親ボックスにフロートを追加して、標準のドキュメント フローから分離します。この方法は便利ですが、ページ レイアウトにはあまり適しておらず、保守が困難です。

親ボックスにオーバーフロー プロパティを追加します。

  1. overflow:auto; を使用するとスクロールバーが表示され、外観に影響する可能性があります。
  2. overflow:hidden; によりコンテンツが見えなくなる可能性があります。

親ボックスの下部にクリアフロートを導入します。最も単純なものは次のとおりです。

<br style="clear:both;"/>

多くの人がこの問題を解決していますが、不要な冗長要素が導入されるため、お勧めしません。

after 疑似クラスはフロートをクリアします。

外側のボックスの after 疑似要素は clear プロパティを設定します。

#親:後{
                クリア: 両方;
                コンテンツ: "";
                幅: 0;
                高さ: 0;
                表示: ブロック;
                可視性: 非表示;
            }

これは、フローティングによって発生するボックスの崩壊を解決するための純粋な CSS メソッドです。冗長な要素は導入されません。このメソッドは、CSS ボックスの崩壊を解決するために推奨されます。

注意: 5 番目の方法は良いですが、IE の下位バージョンとは互換性がありません。選択する具体的な解決策は、実際の状況に基づいて決定できます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Web 標準アプリケーション: Tencent QQ ホームページの再設計

>>:  見落としがちなMySQLのCOLLATIONの例の詳細な説明

推薦する

Window.nameはクロスドメインデータ転送の問題を解決します

<br />原文: http://research.microsoft.com/~hel...

カルーセル例の JS 実装

この記事では、カルーセルチャートの小さなケースを実装するためのJSの具体的なコードを参考までに共有し...

CSSレイアウトで中央揃えレイアウトを実現する方法

1. 親コンテナーをテーブルに設定し、子をインライン要素に設定します。テキストを表示するサブコンテン...

WindowsとLinux間でファイルを転送する方法

WindowsとLinux間のファイル転送(1)WinSCPを使用して、WindowsファイルをLi...

Vue 仮想 DOM クイックスタート

目次仮想DOM仮想DOMとは何か仮想DOMの役割Vue の仮想 DOM vノードvNodeとはvNo...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...

MySQL 8.0.12 の詳細なインストールおよびアンインストール チュートリアル

1. MySQL 8.0.12 バージョンのインストール手順。 1. ダウンロードhttps://d...

vscodeを使用してuniappを開発する方法

私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...

Win10 での MySQL 8.0.20 のインストールと設定のチュートリアル

Win10 システムでの MySQL 8.0.20 のインストールと設定の超詳細なチュートリアルMy...

Ubuntu 20.04 と NVIDIA ドライバーのインストールに関するチュートリアル

Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...

Linux で NFS ファイル共有サーバーを構築するための詳細な手順

Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...

Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します

純粋なフロントエンド実装:切片上傳斷點續傳。斷點續傳カットとアップロードに基づいて実装する必要があり...

Vue2とVue3のライフサイクルの比較の詳細な理解

目次サイクル比較使用法要約するサイクル比較ヴュー2ヴュー3作成前設定作成された設定マウント前マウント...

Ubuntu 18.04 のインストールで「ldlinux.c32 のロードに失敗しました」というエラーが表示され、解決手順がわかりません

序文私は Win7 を搭載した古いラップトップを持っています。古いシステムを維持しながら、同時に U...

Vue コード強調プラグインの総合的な比較と評価

目次総合的な比較アクティブの観点から機能的な観点から詳細な比較1. エース2. コードミラー3. モ...