最近、CSS 関連の知識ポイントをいくつか見直し、CSS における典型的なマージンの重なりの問題を整理してまとめました。目的は、レビューの効果をテストし、他の人に役立つことを願っています。漏れがある場合は、フロントエンドのベテランにアドバイスを求めたいと思います。 質問: CSSレイアウトを使用すると、次の図に示すように、兄弟ノードまたは親子ノードによって設定された上部と下部の余白が重なり合うことがわかります。 <スタイル> 。外 { 幅: 100%; 背景色: ピンク; } .out>div { 高さ: 100px; 幅: 100%; 背景色: rgb(223, 136, 23); マージン: 5px 0 10px; } </スタイル> <セクションクラス="out"> <div>11</div> <div>22</div> <div>33</div> </セクション> セクション全体の高さを確認すると、実際には 345px になるはずですが、親と子、兄弟の余白が重なり合っているため、高さは 320px になっていることがわかります。では、実際のアプリケーションでこの問題をどのように解決するのでしょうか? BFC 内の要素は外部の要素に影響を与えず、比較的独立した閉じた領域です。 <スタイル> 。外 { 幅: 100%; 背景色: ピンク; オーバーフロー: 非表示; } .out>div { 高さ: 100px; 幅: 100%; 背景色: rgb(223, 136, 23); マージン: 5px 0 10px; /* オーバーフロー: 非表示; */ フロート: 左; } </スタイル> <セクションクラス="out"> <div>11</div> <div>22</div> <div>33</div> </セクション> セクションの高さを再度確認すると、高さが 345 ピクセルに戻っていることがわかります。これは、BFC が高さを計算するときに、フローティング子要素の高さも考慮されていることを証明しています。 CSS マージンの重複の詳細な説明と解決策の探求に関するこの記事はこれで終わりです。CSS マージンの重複に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: int(3)とint(10)の値の範囲はmysqlで同じですか?
目次ループ - for forループの基本的な使い方ループを終了するネストされたループ配列配列とは何...
目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...
必要: vue を使用して QR コードのスキャンを実現します。プラグイン: QRコードリーダー;プ...
準備する: MySQL 8.0 Windows zip パッケージのダウンロード アドレス: htt...
目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...
1. フローティングとは何ですか?フローティングは、その名の通り、浮遊することを意味します。要素がド...
Linux環境変数の設定ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定...
1. いつsetUpを実行するかvue3 ではメソッドを正常に使用できるようになったことは誰もが知っ...
目次1. プロトタイプチェーン継承2. コンストラクタによる継承3. 組み合わせ継承4. プロトタイ...
問題を見つける最近、MySQL コマンドを使用して MySQL サーバーに接続したときに、以下のよう...
1. Dockerネットワークモードdocker run が Docker コンテナを作成するときに...
rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...
mysql 5.6.35 winx64無料インストールバージョン構成チュートリアルwin10、具体的...
実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...
目次1.スリープ機能2.タイムアウトを設定する3. 約束4. 非同期待機5. 1秒後に出力1、2秒後...