css_html/css_WEB-ITnose のネガティブマージン関数の簡単な紹介-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

css_html/css_WEB-ITnose のネガティブマージン関数の簡単な紹介

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:26 AM

CSS のネガティブマージン関数の簡単な紹介:
ほとんどの友人はマージンについてよく知っているかもしれませんが、その機能は要素のマージンを設定することです。
コードは次のとおりです:

div{  width:100px;  height:100px;  margin:10px 5px 15px 20px;}

ログイン後にコピー

より基本的なアプリケーションについては、CSS の margin 属性に関する章を参照してください。
しかし、多くの人はネガティブマージンの多くの機能についてあまり知りません。コード例を通して簡単に説明しましょう。
1. 通常のドキュメントフローへの影響:
ドキュメントフローの基本概念については、「ドキュメントフローとは?」の章を参照してください。
つまり、ドキュメントフロー内の要素の位置は、ドキュメントフローの変更に応じて変化します。まず簡単なコード例を見てみましょう:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>无标题文档</title><style type="text/css">#antzone{  width:200px;  height:100px;  background:#ccc;}</style></head><body><div id="antzone"></div>蚂蚁部落欢迎您</body></html>

ログイン後にコピー

上記のコードのパフォーマンスに異論はないはずです。。次に、負のマージンを適用します。コード例は次のとおりです。

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>无标题文档</title><style type="text/css">#antzone{  width:200px;  height:100px;  background:#ccc;  margin-bottom:-20px;}</style></head><body><div id="antzone"></div>蚂蚁部落欢迎您</body></html>

ログイン後にコピー

div 要素のサイズは変更されていませんが、テキストが div 要素に移動していることがわかります。
ドキュメントフロー内の要素に対する負のマージンの影響により、ドキュメントフロー内の要素が占めるスペースがオフセットされ、後続のドキュメントフローのコンテンツがオフセットスペースを埋めることになります。これは、相対的な配置とは異なります。はい、相対的な位置がオフセットされていても、元のスペースは保持されるため、後続の要素が塗りつぶされることはありません。上記のコード margin-bottom:-20px は、div 要素のドキュメントフローを 20px フォールバックさせることができるため、テキストがフォールバックのスペースを埋めることになります。
要約は次のとおりです。ドキュメントフローでは、要素の最終的な境界はマージンによって決まります。マージンが負の場合、ドキュメントフローは境界を認識するだけで、要素を後退させることと同じになります。実際のサイズに注意してください。
コード例は次のとおりです:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>无标题文档</title><style type="text/css">#box{  width:200px;  background:#ccc;  overflow:hidden;}#inner{  width:80px;  height:100px;  background:red;}</style><script>window.onload=function(){  var obt=document.getElementById("bt");  var odiv=document.getElementById("inner");  obt.onclick=function(){    odiv.style.marginBottom="-20px";  }}</script></head><body><div id="box">  <div id="inner"></div></div><input type="button" id="bt" value="查看效果"/></body></html>

ログイン後にコピー

上記のコードでは、ボタンをクリックすると、内部 div の margin-bottom 値を -20px に設定でき、ドキュメントフロー内で 20px 戻り、高さが変更されます。外側の div 要素も 20px 削減されます。ただし、親要素には overflow:hidden が必要であることに注意してください。そうでない場合、ドキュメントフローが撤回され、親要素の高さが減っても、効果はありません。
2. 負のマージンが幅に与える影響:
ここでは詳しく説明しません。詳細については、「負のマージンが幅に与える影響」の章を参照してください。
3. 浮動要素に対する負のマージンの影響:
ここでは詳しく説明しません。詳細については、「浮動要素に対する負のマージンの影響」の章を参照してください。
4. 配置された要素に対する負のマージンの影響:
ここでは詳しく説明しません。詳細については、「配置された要素に対する負のマージンの影響」の章を参照してください。

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=18295

詳細については、以下を参照してください: http://www.softwhy.com/divcss/

このウェブサイトの声明

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