1. まず、2つ以上の隣接する通常フローブロック要素の垂直マージンの崩壊を引き起こす原因を知る必要があります。 1. 2 つ以上は、数量が 1 より大きい必要があることを示し、折り畳みが要素間の相互作用であることを示します。A と B は折り畳まれるが、B は A と折り畳まれないという現象は存在しません。 2. 隣接とは、空でないコンテンツ、パディング、境界線、またはクリアによって分離されていないことを意味し、位置関係を示します。 分離されていない場合、要素の margin-top は通常フロー (非フローティング要素など) の最初の子要素の margin-top に隣接します。要素の高さが「auto」の場合にのみ、その margin-bottom は通常フロー (非フローティング要素など) の最後の子要素の margin-bottom に隣接します。 3. 縦方向とは、特定の方向を指します。縦方向の余白のみが折り畳まれます。つまり、横方向の余白は折り畳まれません。 2. では、要素の上下の余白がつぶれないようにするにはどうすればよいでしょうか? 1. フローティング要素、インラインブロック要素、絶対配置要素のマージンは、垂直方向の他の要素のマージンと相殺されません(これは上下に隣接する要素を指すことに注意してください)。 2. ブロックレベルの書式設定コンテキストを作成する要素は、その子要素の余白を折りたたまない(これは、BFCを作成する要素とその子要素が折りたたまれないことを意味することに注意してください) BFC をトリガーする要因は、フロート (none を除く)、オーバーフロー (visible を除く)、表示 (table-cell/table-caption/inline-block)、位置 (static/relative を除く) であることは誰もが知っています。 明らかに、隣接する要素が折りたたまれるのを防ぐ要因は、BFC をトリガーする要因のサブセットであることがわかります。つまり、上下の隣接する要素に overflow:hidden を設定すると、BFC がトリガーされますが、上下の要素の上下の余白は折りたたまれます。 この問題は、実際には BFC とは何の関係もありません。皆さんが BFC を乱用しないことを願っています。BFC は万能ではないことを知っておく必要があります。BFC を作成した本来の目的は、要素自体 (その子要素を含む) が幅と高さを正しく計算できるようにすることです。 http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts 折り畳みが行われない原因となる要因は、フローティング要素、インライン ブロック要素、絶対配置要素です。これは、BFC を作成する要因のサブセットにすぎませんが、BFC は overflow:hidden でも作成できるため、BFC を作成する要素が折り畳まれないことを意味するものではありません。逆に、親要素が BFC をトリガーすると、そのブロックレベルの子要素が代わりに折りたたまれます。 ここで、この問題を説明するためのデモを作成しました: http://whycss.com/demo/collspan_demo.html BFC を作成する 3 つの状況が説明されており、その結果、子要素の上部と下部の余白が失われます。 Kejun が最後に言及したのは、ズームです。これは、もともと IE ブラウザでサポートされていたズーム属性です。現在、WebKit コアを搭載した最新のブラウザのみがこれをサポートしています。ただし、hasLayout は IE8 より前のブラウザーでのみ正常にトリガーされ、IE 以外のブラウザーには影響がないため、同じ方法で BFC を作成する必要があります。 hasLayout と BFC の紹介については、私のブログ記事 http://www.smallni.com/?p=174 を参照してください。 この問題を解決する方法としては、実際には各要素に float、inline-block、absolute を設定する必要がない場合もあるため、書き込み時に上または下に設定するなど、同じ方向のマージンを使用することをお勧めします。 |
<<: Linux システム AutoFs 自動マウント サービスのインストールと構成
目次クロスドメインの理由JSONP Nginxソリューションバックエンドソリューションクロスドメイン...
[LeetCode] 181.従業員の収入が管理職よりも多い従業員テーブルには、マネージャーを含む...
結果:実装コードhtml <div class='iphone'> &l...
目次識別子の長さ制限権限テーブルの範囲フィールドの長さ制限データベースとテーブルの数の制限テーブルサ...
1. HTMLフォントカラー設定HTML では、フォント タグを使用してフォント コンテンツの色を設...
1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...
シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...
x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...
まず: <abbr> または <acronym>これら 2 つの記号は同じ意...
1. JSON.stringify() と JSON.parse() の違い私たちは皆、JSON.s...
目次主キーインデックス頻繁にクエリされるフィールドのインデックスを作成する大きなフィールドのインデッ...
vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...
目次序文1. イントラネットDNS AレコードとMXレコードを構成する2. メールサーバの初期化設定...
1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...
1. Nginx ステータス監視Nginx には、Nginx の全体的なアクセス ステータスを監視す...