Maison >interface Web >tutoriel CSS >Compréhension complète de la marge CSS
Compréhension complète de la marge CSS
- 高洛峰original
- 2017-02-16 13:36:231868parcourir
1. La marge peut être négative
Dans le modèle de boîte, la largeur/hauteur, le remplissage et la bordure de la zone de contenu ne peuvent pas être négatifs, mais la marge est une exception, elle peut être négative.
Je ne connais pas grand-chose aux compétences d'utilisation des valeurs de marge négatives. J'en ajouterai plus lorsque j'en aurai l'occasion à l'avenir. Voici une application classique La valeur négative de margin-left est combinée avec. flottant pour obtenir une mise en page fluide qui ne modifie pas la structure du 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. La valeur en pourcentage de la marge
Lorsque la valeur de l'attribut margin est un pourcentage, elle est toujours calculée en fonction de la largeur de l'élément parent.
Veuillez jeter un oeil à la démo ci-dessous, qui m'a longtemps torturé. . . C'est juste que je l'ai découvert trop tard, et ça me ferait pleurer si j'en parlais trop. . .
<!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. La fusion des marges dans le sens vertical
Ce problème provoque souvent une certaine confusion, mais vous n'avez besoin de retenir qu'une seule phrase. Les marges dans le sens vertical seront fusionnées comme suit. tant qu'ils sont en contact étroit, fusionnez, et seul un contact étroit fusionnera.
La fusion des marges dans le sens vertical est en fait facile à comprendre si elle se produit sur des éléments adjacents ; mais si elle se produit entre un élément parent et un élément enfant, c'est un peu bizarre.
Regardons un exemple :
<!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>
Méthodes pour éliminer la fusion des marges dans le sens vertical : ajouter des bordures ou un remplissage à l'élément parent pour rompre le contact étroit entre la marge du parent élément et l'élément enfant Can.
Règles de fusion des marges :
<!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. Les deux marges sont des nombres positifs, prenez la valeur absolue la plus grande
2. une marge est un nombre négatif, additionnez-la ;
3. Les deux marges sont des nombres négatifs, prenez la valeur absolue la plus grande.
La compréhension complète ci-dessus de la marge CSS est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez le site Web PHP chinois.
Pour plus d'informations complètes sur la marge CSS et des articles connexes, veuillez prêter attention au site Web PHP chinois !