HTML 余白の折り曲げとそれを解消する方法_html/css_WEB-ITnose-htmlチュートリアル-php.cn

HTML 余白の折り曲げとそれを解消する方法_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:30

オリジナル

2094 人が閲覧しました

以下のHTML

<body>    <div class="page">        <div class="mains">            <div class="content"></div>        </div>     </div></body>

ログイン後にコピー

と以下のCSS

html,body{  padding: 0px;  margin: 0px; width: 100%;  height: 100%;  }html{  background: aliceblue;  }body{  background:antiquewhite;  }.page {  width: 600px; height: 300px;  background: mediumaquamarine;}.mains { width: 300px; height: 200px;background: yellow;}.content{ width: 200px; height: 100px;background:mistyrose;}

ログイン後にコピー

があります

通常のフローで表示されるエフェクトは以下の通りです(図1)

このとき、.contentに以下のスタイルを追加します

.content{width: 200px; height: 100px;background:mistyrose; margin-top: 10px; }

ログイン後にコピー

表示効果 (写真 2)

これは多くの人を驚かせるかもしれませんが、私たちの通常の理解によれば、.content は .mains で囲まれているため、.content は上から .mains まで 10px であるはずですが、実際には .content は .mains で囲まれています。分離はなく、最終的な結果は、本文の上部が HTML の上部から 10 ピクセル離れているようにさえ感じられます (これは正しく感じられますか? 完全にではないかもしれません)。 .mains に margin-top を追加します。スタイル

.mains {width: 300px;height: 200px;background: yellow;margin-top: 10px;}

ログイン後にコピー

の表示効果は「図 2」と同じです。次に、.mians

.mains {width: 300px;height: 200px;background: yellow;margin-top: 20px;}

ログイン後にコピー

の margin-top の値を変更します。表示効果は次のとおりです (図 3)

このときの効果は30px離れていませんが、2つの最大値である20pxを採用します

そして、.pageに「margin-top: 20px;」を追加します。効果は変更されず、同じです。本体にエフェクトが追加されます。しかし、このスタイルを HTML に追加すると

html{    background: aliceblue;    margin-top: 20px;   }

ログイン後にコピー

表示効果 (図 4)

上記の結果から、通常のフローでは、HTML 内の要素 (本文を含む) の外側の余白はすべて HTML 用であることがわかります。エッジによって決定される要素。 html要素の余白はブラウザの上部で決まります。このことから、HTML 要素が実際に BFC を生成していることがわかります。

それでは、設定されている HTML の背景色は本当に HTML 要素のものなのかという疑問が生じます。（htmlのmargin-top:20pxを設定した後の背景色はhtml要素に設定したstyle値をそのまま使用しているため）実はブラウザの背景色なのでしょうか？

「図 2」と「図 3」の場合、実際に必要なのは、この種の上位要素の親要素のマージントップです。および従属要素のマージンは最も近い BFC ブロックに対して配置されるため、その親要素が BFC を生成する限り、必要な効果を実現できます。たとえば、次のスタイルを .mains に追加します。

overflow: hidden;

ログイン後にコピー

すると、以下に示すように、必要な効果が得られます。

.mains に追加せずに、.page に追加すると、結果は次のようになります

.mains と .page の両方に overflow: hidden; を追加します。結果は次のようになります:

これが私たちが達成したい効果ではないでしょうか~~

上記は「父と子関係」要素のマージン折り込みに関するもので、兄弟要素の折り込み問題と同様に、その解決策は比較的簡単です。もちろん解決策は同じです。

このリンクを全員に学習することをお勧めします:

http://www.w3cplus.com/css/ Understanding-bfc-and-margin-collapse.html

w3c 仕様によれば、この 2 つは隣接関係は次の条件を満たしている必要があります:

は、通常のドキュメントフロー (非浮動および絶対配置) および同じ BFC 内のブロックレベルのボックスである必要があります。

行ボックス、クリアランス (これについては後で説明します)、それらを区切るパディングや境界線はありません
はすべて垂直に隣接するマージンであり、次のいずれかの状況が考えられます
要素の margin-top とその最初の通常のドキュメントフローの子の margin-top
- 要素の margin-bottom とその次の通常のドキュメントフローの兄弟要素の margin-top
- height The margin-通常のドキュメントフローの auto 要素の一番下と最後の子要素の margin-bottom は 0 で、最小の高さは 0 です。通常のドキュメントフローの子要素は含まれず、独自の新しい子要素は作成されません。 BFC 要素の margin-top と margin-bottom

新しい BFC 要素を作成します (浮動要素や「オーバーフロー」値など) 'visible' 以外の要素) は、その子要素のマージンと一緒に折りたたまれません

フローティングされた要素は、どの要素 (その親要素と子要素も含む) のマージンと一緒に折りたたまれません

絶対的に配置された要素は折りたたまれません任意の要素のマージンとともに折りたたまれます任意の要素のマージンが折りたたまれます
インラインブロック要素は、どの要素のマージンとともに折りたたまれません
通常のドキュメントフロー要素のマージンボトムは、次の通常のドキュメントフロー兄弟要素の margin- は、それらの間にクリアランスがない限り折り目を生成します。
通常のドキュメントフロー要素のマージントップは、親要素にパディングとボーダーが含まれておらず、子要素にクリアランスが含まれていない場合、最初の通常のドキュメントフロー子要素のマージントップと折り畳まれます。
'height' が 'auto'、'min-height' が '0' である通常のドキュメントフロー要素の margin-bottom は、条件付きで、最後の通常のドキュメントフロー子要素の margin-bottom とともに折りたたまれます。親要素パディングとボーダーを除いて、子要素のマージン下部はクリアランスを含むマージン上部と折り合いません。
border-top、border-bottom、padding-top、padding-bottom を含まず、その 'height' が 0 または 'auto'、'min-height' が '0' である通常のドキュメントフロー要素。また、ラインボックスも含まれておらず、独自の margin-top と margin-bottom は折りたたまれます。