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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

以下の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 は折りたたまれます。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。