关于margin的二三事

      上一篇博客讲了padding的妙用，这一篇就来对margin做一个回顾复习吧。

       margin实现一侧定宽的两栏自适应布局：

       假如：我们定宽的部分是240px,自适应的部分是文字

      1、图片左侧定位

       代码如下

.container{
	  overflow:hidden;
}
.container>img{
	  float:left;
}
.container>p{
	  margin-left:260px;/*图片宽度+margin值*/
}

<div class="container">
  <img src="img/girl.png" alt="">
  <p>可以，一般台式电脑都有充足的硬盘扩展空间的，把新硬盘固定在空闲的硬盘固定支架上，接上电源线和数据线就可以了。修电脑的当然可以帮你安装了，这是非常简单的事情，具体收多少费用，完全是商家自己决定的，太简单了，甚至有可能不收钱
   可以，一般台式电脑都有充足的硬盘扩展空间的，把新硬盘固定在空闲的硬盘固定支架上，接上电源线和数据线就可以了。修电脑的当然可以帮你安装了，这是非常简单的事情，具体收多少费用，完全是商家自己决定的，太简单了，甚至有可能不收钱</p>
</div>

2、图片右侧固定

.container{
	overflow:hidden;
}
.container>img{
	float:right;
}
.container>p{
        margin-right:260px;
}

 此方法改变了文档流。

3、如果图片右侧定位，同时顺序一致

                .container{
			overflow:hidden;
		}
		.container .left{
			width:100%;
			float:left;
		}
		.container .left p{
			margin-right:260px;
		}
		.container>img{
		   margin-left:-242px;/*图片宽度*/
		   float:left;
		}

       <div class="container">
   	  <div class="left">
   	    <p>可以，一般台式电脑都有充足的硬盘扩展空间的，把新硬盘固定在空闲的硬盘固定支架上，接上电源线和数据线就可以了。修电脑的当然可以帮你安装了，这是非常简单的事情，具体收多少费用，完全是商家自己决定的，太简单了，甚至有可能不收钱
   	    可以，一般台式电脑都有充足的硬盘扩展空间的，把新硬盘固定在空闲的硬盘固定支架上，接上电源线和数据线就可以了。修电脑的当然可以帮你安装了，这是非常简单的事情，具体收多少费用，完全是商家自己决定的，太简单了，甚至有可能不收钱</p>
   	  </div>
   	  <img src="img/girl.png" alt="">
   	</div>

4、关于margin 合并

a.相邻兄弟元素margin合并。

b.父级和第一个/最后一个子元素合并。

比如网站的头图加上大大的标题，如下

               header{
			max-width:1920px;
			height:320px;
			background:url(img/timg.jpg) no-repeat center;

		}
		header>h2{
			font-size:80px; 
                        color:#f92672;
                        text-align:center;
		}

        <header>
	   <h2>梦想是要有的</h2>
	</header>

实现的效果是这样的:

我们想把标题距离顶端有一定的距离，然后我们想到的是在h2上加上margin-top:110px。然后我们发现效果是这样的

文字在图片上的位置还是跟原来的一直，但是顶部却出现了110px的空白，此处就是父级margin和子级的margin重叠的典型例子，而防止margin-top重叠的方法如下

  a.父元素设置为块级格式上下文元素

  b.父元素设置border-top的值

  c.父元素设置padding-top值

  d.父元素和第一个子元素之间添加内联元素进行分隔

所以此处只用在header上加上overflow:hidden就可以实现我们想要的如下效果

补充防止margin-bottom合并的方法

  a.父元素设置为块级格式化上下文元素

  b.父元素设置border-bottom的值

  c.父元素设置padding-bottom的值

  d.父元素和最后一个子元素之间添加内联元素进行分隔

  e.父元素设置height、min-height或max-height

关于margin合并的计算规则总结为“正正取大值”，“正负值相加”，“负负最负值（取绝对值大的值）”

5.关于margin:auto

margin:auto填充规则

  (1)如果一侧定值，一侧auto,则auto为剩余空间大小

  (2)如果两侧均是auto，则平分剩余空间   

最后上两个栗子,

margin实现块级元素的水平垂直居中

       .father{
			width:400px;
			height:200px;
			position:relative;
			background:#c0e654;
		}
        .son{
        	position:absolute;
        	top:0;
        	left:0;
        	right:0;
        	bottom:0;
        	width:200px;
        	height:100px;
        	margin:auto;
        	background:#fff;
        }

         <div class="father">
   	  	<div class="son">
   	  		
   	  	</div>
   	  </div>

效果：

暂时先总结这么多，以后想到啥再补。。。。。。语言表达能力有限，看起来会有些乱，仅供自己复习