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の例の詳細な説明

推薦する

Nginxリバースプロキシ設定でプレフィックスが削除される

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

Vue ElementUI フォームのフォーム検証

フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...

Docker データボリュームコンテナの作成と使用状況分析

データ ボリューム コンテナーは、データ ボリュームをマウントするために特別に使用されるコンテナーで...

CentOS6.9+Mysql5.7.18 ソースコードのインストール詳細チュートリアル

CentOS6.9+Mysql5.7.18 ソースコードのインストールでは、以下の操作を root ...

MySQL ロックの知識ポイントのまとめ

ロックの概念①. 現実世界では、鍵は外の世界から身を隠したいときに使う道具です。 ②. コンピュータ...

CentOS 7 でソースコードから Openssh をインストールする方法

環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...

HTML マークアップ言語 - リファレンス

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQL ジョイントテーブルクエリの簡単な例

MySql は結合テーブルクエリを使用しますが、初心者には理解しにくい場合があります。以下の記事では...

デザインにおけるユーザーエクスペリエンスの背後にある8つのユーザー本能について話す

編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...

ブラウザのキャッシュを防ぐために、js または css の後に ?v= バージョン番号を追加します。

コードをコピーコードは次のとおりです。 <span style="font-size...

回転灯効果を実現するWeChatアプレットの例

序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...

Centos7 の起動プロセスと Systemd での Nginx の起動構成

Centos7 の起動プロセス: 1.post(電源投入時のセルフテスト) 電源投入時のセルフテスト...

フォーム検証機能を実装するためのネイティブ js

目次開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。 1. フ...

JavaScript 構造化代入の詳細な説明

目次コンセプト配列の分割値を個別に宣言して割り当てるデフォルト値の構造化解除変数値の交換関数によって...

Vueカスタムカプセル化ボタンコンポーネント

Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。ボタ...