ホームページ > 記事 > ウェブフロントエンド > CSSマージンの包括的な理解
CSSマージンの包括的な理解
- 高洛峰オリジナル
- 2017-02-16 13:36:231832ブラウズ
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 サイトに注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。