CSS marging浅析

原创: 2016-07-21 14:53:01 1495浏览

一、margin可以为负值

在盒模型中，内容区的width/height、padding、border都不能为负值，但是margin例外，它可以为负值。

关于margin负值的使用技巧，了解不多，日后有机会再补充，此处先贴两个经典应用。

1. margin-left负值结合浮动实现不改变DOM结构的流体布局。

（此demo与CSS float浅析篇中的是同一个。）

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>不改变DOM结构的流体布局title>
 6         <style>
 7             .container {
 8                 width:600px;
 9                 margin-left: auto;
10                 margin-right: auto;
11                 background-color: orange;
12                 font-size: 16px;
13                 line-height: 1.5;
14             }
15 
16             .box1 {
17                 width:100%;
18                 float:left;
19             }
20 
21             .box2 {
22                 margin-right: 220px;
23                 padding-left: 20px;
24             }
25 
26             img {
27                 width:200px;
28                 float:left;
29                 margin-left:-200px;
30             }
31 
32             .clearfix:after {
33                 content: "";
34                 display: table;
35                 clear: both;
36             }
37 
38             .clearfix {
39                 *zoom: 1;
40             }
41 
42         style>
43     head>
44     <body>
45         <div class="container clearfix">
46             <div class="box1">
47                 <div class="box2">
48                 <h3>不改变DOM位置的流体布局h3>
49                 <p>假如有一段文本和一幅图像，在DOM节点中，文本在前，图像在后，怎么能把图像定位到右边呢？p>
50                 <p>通常的做法是，调换DOM节点中图像与文本的位置，让图像在前，文本在后，然后将图像浮动到右边即可。p>
51                 <p>但这样改变DOM节点顺序始终不妥，还有什么更好的方法呢？p>
52                 <p>下面就介绍一种新的思路来完成布局。p>
53                 <ul>
54                     <li>将文本用div包起来，定义为box1；现在的结构是一个box1和一个img。li>
55                     <li>将box1宽度设为100%，左浮动；将img设置一个宽度，也左浮动，然后margin-left设为负的宽度值；此时图像就定位到文本的右边啦。li>
56                     <li>但是有一个问题，图像盖住了文本内容，这可怎么办？li>
57                     <li>重点来了，在box1中增加一个box2，box2把文本全部包起来，然后margin-right设为图像的宽度（+额外的间距），这样就解决问题啦！li>
58                 ul>
59                 div>
60             div>
61             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />
62         div>
63     body>
64 html>

View Code

2. margin负值实现两列等高布局

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>margin负值实现等高布局title>
 6         <style>
 7             div.container {
 8                 margin-left: 200px;
 9                 overflow: hidden;
10             }
11 
12             div.box {
13                 width:300px;
14                 float: left;
15                 margin-right: 20px;
16             }
17 
18             div.box1 {
19                 background-color: brown;
20                 margin-bottom: -9999px;
21                 padding-bottom: 9999px;
22             }
23 
24             div.box2 {
25                 background-color: green;
26                 margin-bottom: -9999px;
27                 padding-bottom: 9999px;
28             }
29 
30             p {
31                 margin-bottom: 50px;
32             }
33 
34         style>
35     head>
36     <body>
37         <div class="container">
38             <div class="box box1">
39                 <p>box1p>
40                 <p>box1p>
41             div>
42             <div class="box box2">
43                 <p>box2p>
44                 <p>box2p>
45                 <p>box2p>
46                 <p>box2p>
47                 <p>box2p>
48                 <p>box2p>
49                 <p>box2p>
50                 <p>box2p>
51             div>
52         <div class="container">
53     body>
54 html>

View Code

其实现原理为margin负值与padding正值相互抵消。

二、margin的百分比数值

当margin属性的值为百分数时，其总是以父元素的width为基数进行计算。

请看下面这个demo，当初折磨了我N久的。。。只怪我知道得太晚了，说多了都是泪啊。。。

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>margin的百分数值title>
 6         <style>
 7             .container {
 8                 width: 500px;
 9                 height: 300px;
10                 margin: 50px auto;
11                 background-color: orange;
12                 border: 1px solid black;
13             }
14 
15             .box {
16                 width: 250px;
17                 height: 150px;
18                 margin-left: auto;
19                 margin-right: auto;
20                 background-color: cyan;
21             }
22 
23             .box1 {
24                 margin-top: 75px;
25                 margin-bottom: 75px;
26                 padding: 5px;
27             }
28             
29             .box2 {
30                 margin-top: 25%;
31                 margin-bottom: 25%;
32                 padding: 5px;
33             }
34         style>
35     head>
36 
37     <body>
38         <div class="container">
39             <div class="box box1">
40                 <p>父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。p>
41                 <p>OK，居中啦！！！p>
42             div>
43         div>
44         <div class="container">
45             <div class="box box2">
46                 <p>既然子元素的高度是父元素高度的50%，那么只要margin-top和margin-bottom都为25%，应该也能垂直居中。p>
47                 <p>额，这什么鬼？说好的居中呢？p>
48             div>
49         div>
50     body>
51 html>

View Code

三、垂直方向上margin的合并

这个问题经常造成一些困惑，不过只需要记住一句话即可，垂直方向上的margin只要亲密接触就会合并，也只有亲密接触才会合并。

垂直方向上margin的合并，如果发生在相邻元素，其实是很好理解的；但是如果发生在父元素与子元素之间，就有些怪异了。

来看例子：

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>垂直方向上的margin合并title>
 6         <style>
 7             .container {
 8                 width: 500px;
 9                 height: 300px;
10                 margin: 50px auto;
11                 background-color: orange;
12             }
13 
14             .box {
15                 width: 300px;
16                 height: 200px;
17                 margin-left: auto;
18                 margin-right: auto;
19                 background-color: cyan;
20                 margin-top: 25px;
21                 padding: 5px;
22             }
23 
24             .border {
25                 border: 1px solid black;
26                 /*padding: 1px;*/
27             }
28         style>
29     head>
30 
31     <body>
32         <div class="container">
33             <div class="box">
34                 <p>父元素的margin-top为50px，子元素的margin-top为25px；p>
35                 <p>咦，子元素的margin-top呢？为什么都顶到父元素上边界了？p>
36                 <p>额，因为父元素与子元素的margin-top亲密接触了呀，所以它们合并在一起了啊。p>
37             div>
38         div>
39         <div class="container border">
40             <div class="box">
41                 <p>可是我就是想让子元素距离父元素的上边界25px啊，我不想让它们合并呀。p>
42                 <p>很简单，给父元素加个边框，它们就无法亲密接触了，就不会合并了啊。p>
43                 <p>或者给父元素设置padding也是可以的喔。p>
44             div>
45         div>
46     body>
47 html>

View Code

消除垂直方向上margin合并的方法：给父元素加border或者加padding，打破父元素与子元素margin之间的亲密接触即可。

margin合并的规则：

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>margin合并规则title>
 6         <style>
 7             .container {
 8                 width: 300px;
 9                 height: 500px;
10                 margin: 50px;
11                 background-color: orange;
12                 float: left;
13                 border: 1px solid black;
14             }
15 
16             .box1,.box2,.box3,
17             .box4,.box5,.box6 {
18                 width: 200px;
19                 height: 150px;
20                 margin: 30px auto;
21                 background-color: cyan;
22                 text-align: center;
23                 line-height: 150px;
24             }
25 
26             .box1 {
27                 margin-bottom: 30px;
28             }
29 
30             .box2 {
31                 margin-top: 20px;
32             }
33 
34             .box3 {
35                 margin-bottom: 30px;
36             }
37 
38             .box4 {
39                 margin-top:CSS marging浅析PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程