ホームページ > 記事 > ウェブフロントエンド > CSSマージンの包括的な理解
1. マージンは負の値にすることができます
ボックスモデルでは、コンテンツ領域の幅/高さ、パディング、境界線を負の値にすることはできませんが、マージンは例外で、負の値にすることができます。
負のマージン値を使用するスキルについてはあまり知りません。将来機会があれば追加します。これは、margin-left の負の値を float と組み合わせたものです。 DOM 構造を変更しない流動的なレイアウト。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>不改变DOM结构的流体布局</title> <style> .container { width:600px; margin-left: auto; margin-right: auto; background-color: orange; font-size: 16px; line-height: 1.5; } .box1 { width:100%; float:left; } .box2 { margin-right: 220px; padding-left: 20px; } img { width:200px; float:left; margin-left:-200px; } .clearfix:after { content: ""; display: table; clear: both; } .clearfix { *zoom: 1; } </style> </head> <body> <div class="container clearfix"> <div class="box1"> <div class="box2"> <h3>不改变DOM位置的流体布局</h3> <p>假如有一段文本和一幅图像,在DOM节点中,文本在前,图像在后,怎么能把图像定位到右边呢?</p> <p>通常的做法是,调换DOM节点中图像与文本的位置,让图像在前,文本在后,然后将图像浮动到右边即可。</p> <p>但这样改变DOM节点顺序始终不妥,还有什么更好的方法呢?</p> <p>下面就介绍一种新的思路来完成布局。</p> <ul> <li>将文本用div包起来,定义为box1;现在的结构是一个box1和一个img。</li> <li>将box1宽度设为100%,左浮动;将img设置一个宽度,也左浮动,然后margin-left设为负的宽度值;此时图像就定位到文本的右边啦。</li> <li>但是有一个问题,图像盖住了文本内容,这可怎么办?</li> <li>重点来了,在box1中增加一个box2,box2把文本全部包起来,然后margin-right设为图像的宽度(+额外的间距),这样就解决问题啦!</li> </ul> </div><!--关闭box2--> </div><!--关闭box1--> <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" /> </div><!--关闭container--> </body> </html>
2. margin のパーセンテージ値
margin 属性の値がパーセンテージの場合、常に親要素の幅に基づいて計算されます。
私を長い間苦しめた以下のデモをご覧ください。 。 。ただ、知るのが遅かったし、あまり話すと泣いてしまいます。 。 。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>margin的百分数值</title> <style> .container { width: 500px; height: 300px; margin: 50px auto; background-color: orange; border: 1px solid black; } .box { width: 250px; height: 150px; margin-left: auto; margin-right: auto; background-color: cyan; } .box1 { margin-top: 75px; margin-bottom: 75px; padding: 5px; } .box2 { margin-top: 25%; margin-bottom: 25%; padding: 5px; } </style> </head> <body> <div class="container"> <div class="box box1"> <p>父元素的高度为300px,子元素的高度为150px,只要margin-top和margin-bottom都为75px,这个盒子就能垂直居中。</p> <p>OK,居中啦!!!</p> </div> </div> <div class="container"> <div class="box box2"> <p>既然子元素的高度是父元素高度的50%,那么只要margin-top和margin-bottom都为25%,应该也能垂直居中。</p> <p>额,这什么鬼?说好的居中呢?</p> </div> </div> </body> </html>
3. 垂直方向のマージンのマージ
この問題はしばしば混乱を引き起こしますが、覚えておく必要があるのは 1 つの文だけです。密着している限り、垂直方向のマージンはマージされます。マージ。
垂直方向のマージンのマージは、隣接する要素で発生する場合は理解しやすいですが、親要素と子要素の間で発生する場合は少し奇妙です。
例を見てみましょう:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直方向上的margin合并</title> <style> .container { width: 500px; height: 300px; margin: 50px auto; background-color: orange; } .box { width: 300px; height: 200px; margin-left: auto; margin-right: auto; background-color: cyan; margin-top: 25px; padding: 5px; } .border { border: 1px solid black; /*padding: 1px;*/ } </style> </head> <body> <div class="container"> <div class="box"> <p>父元素的margin-top为50px,子元素的margin-top为25px;</p> <p>咦,子元素的margin-top呢?为什么都顶到父元素上边界了?</p> <p>额,因为父元素与子元素的margin-top亲密接触了呀,所以它们合并在一起了啊。</p> </div> </div> <div class="container border"> <div class="box"> <p>可是我就是想让子元素距离父元素的上边界25px啊,我不想让它们合并呀。</p> <p>很简单,给父元素加个边框,它们就无法亲密接触了,就不会合并了啊。</p> <p>或者给父元素设置padding也是可以的喔。</p> </div> </div> </body> </html>
垂直方向のマージン結合を排除する方法: 親要素にボーダーまたはパディングを追加して、親要素のマージンと子要素の間の密着を解除します。
マージンの結合ルール:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>margin合并规则</title> <style> .container { width: 300px; height: 500px; margin: 50px; background-color: orange; float: left; border: 1px solid black; } .box1,.box2,.box3, .box4,.box5,.box6 { width: 200px; height: 150px; margin: 30px auto; background-color: cyan; text-align: center; line-height: 150px; } .box1 { margin-bottom: 30px; } .box2 { margin-top: 20px; } .box3 { margin-bottom: 30px; } .box4 { margin-top: -30px; } .box5 { margin-bottom: -30px; } .box6 { margin-top: -50px; background-color: green; } p { width: 220px; margin:10px auto; font-size: 16px; line-height: 1.5; } </style> </head> <body> <div class="container"> <div class="box1">box1</div> <div class="box2">box2</div> <p>box1的margin-bottom为30px,box2的margin-top为20px,两个margin都是正数,取绝对值大的。</p> </div> <div class="container"> <div class="box3">box3</div> <div class="box4">box4</div> <p>box3的margin-bottom为30px,box4的margin-top为-30px,两个margin一正一负,相加。</p> </div> <div class="container"> <div class="box5">box5</div> <div class="box6">box6</div> <p>box5的margin-bottom为-30px,box6的margin-top为-50px,两个margin都是负数,取绝对值大的。</p> </div> </body> </html>
1. 両方のマージンは正の数値であり、大きい方の絶対値を取得します。
2. 一方のマージンは正の数値であり、もう一方のマージンは負の数値です。
3. 2 つのマージン これらはすべて負の数であり、絶対値の大きい方を取ります。
上記の CSS マージンの包括的な理解は、編集者が共有したすべての内容です。参考にしていただければ幸いです。また、皆様にも PHP 中国語 Web サイトをサポートしていただければ幸いです。
CSS マージン関連の記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。