マージントップの崩壊とは margin-top の崩壊は、CSS ボックス モデルで発生する現象です。親要素が子要素を囲む場合、子要素に margin-top プロパティが設定されていると、このとき、子要素の境界線を親要素の境界線から一定の距離だけ離したいのですが、親要素の上部が本体の境界線からずれてしまいます。これが margin-top の崩壊という現象です。 子要素 (緑色の部分) に margin-top 属性が追加されていない場合、Web ページは次のようになります。 ただし、子要素に margin-top 属性を追加すると、Web ページの表示は次のようになります。 子要素の境界線と親要素の境界線(黄色の部分)の間の距離は広がっていないことがわかります。代わりに、親要素の上境界線とブラウザの上境界線の間の距離が広がっています。つまり、親要素は子要素とともに一定の距離だけ下に移動します。検査後、この距離は子要素に設定した margin-top 属性値とまったく同じです。これが margin-top の崩壊という現象です。 マージントップの崩壊を解決する方法 マージントップの崩壊問題は、以下の点から解決でき、効果的であることが証明されています。 1. 親要素に境界線を追加する 元の画像効果に影響を与えないように、境界線の色を白(ブラウザの背景色と一致する)に設定できます。 2. オーバーフローの非表示 親要素のスタイルに overflow:hidden を追加します。 3. フロートを使用する 親要素のスタイルに float を追加しますが、この方法は推奨されません。未知のエラーが発生するため 4. 親要素にposition:fixedを追加します。 ここでは、配置の知識を使用して、親要素を固定位置に表示し、margin-top の崩壊の問題の影響を受けないようにします。 5. 親要素に display: table を設定します。 6. 疑似要素を使用する 疑似要素は実際のページ要素ではなく、HTML には対応する要素がないため疑似要素と呼ばれますが、その使用方法とパフォーマンスの動作は実際の要素と同じであるため、疑似要素と呼ばれます。 .clearfix::before{ コンテンツ: "; 表示: テーブル; } .clearfix は親要素に追加される別のクラス名です。これは、他の追加の不明なエラーを引き起こすことなく、margin-top の崩壊の問題を解決できる推奨ソリューションです。 解決策が決まったので、次に示すように最終結果を見てみましょう。 ご覧のとおり、子要素の現在の位置は親要素に対して相対的に移動しており、親要素の位置には影響しません。 デバッグ コードは以下に添付されています。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>10 マージン上部折りたたみ</title> <スタイル> .clearfix::before{ コンテンツ: ''; 表示: テーブル; } 。箱{ 幅: 200ピクセル; 高さ: 200px; 背景色: ゴールド; マージン:0px 自動; } .con{ 幅: 100ピクセル; 高さ: 50px; 背景色: 緑; 上マージン: 100px; } </スタイル> </head> <本文> <div class="box clearfix"> <div class="con"></div> </div> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...
Vueはパンくずコンポーネントをカプセル化して参照します。具体的な内容は次のとおりです。効果を達成す...
同じコマンドを複数回実行するさまざまな種類のループについて学習しましょう。 awk スクリプトには、...
前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...
Centos にプロジェクトをデプロイするときに奇妙な問題が見つかりました。データベース接続で例外...
1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...
序文フロントエンドで非常に便利な、小さなアイコン付きの検索ボックスを作成する方法をご紹介します。エフ...
プロシージャ sp_name を削除します//これまで、MYSQL 構文の基礎知識について説明して...
フォーマットエンコーディング1. ページの幅は600~800px、長さは1024px以内に設定してく...
目次1. インターフェース定義2. 属性2.1 オプション属性2.2 読み取り専用プロパティ3. ク...
目次1. プロジェクトの構築2. Vue3 体験 + Vant 紹介2020年9月18日にvue.j...
まず、例を見てみましょう。記事テーブルにはタイプフィールドがあり、1 見出し、2 おすすめ、3 ホッ...
目次結論は実践分析拡張機能要約する結論は親コンポーネントでカスタム イベントが定義されている場合、子...
この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...
rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...