margin属性指定了盒的margin区的宽度。margin简写属性一次性设置四周的margin，而其它margin属性只设置它们各侧的。这些属性适用于所有元素，但非替换行内元素上的竖直margin将不会产生任何效果
margin与容器尺寸
margin与可视尺寸
只适用于没有设定
width/height的普通block元素只适用于水平方向尺寸
margin与占据尺寸
我们修改图片的margin-bottom值,容器的高度随着margin值变化
block/inline-block水平元素均适用与有没有设定
width/height值无关适用于水平方向和垂直方向
margin与百分比
普通元素的百分比margin都是相对于容器的宽度计算的
绝对定位元素的百分比margin是相对于第一个祖先定为元素(relative/absolute/fixed)的宽度计算的
margin重叠
CSS中，两个或者多个盒（可能但不一定是兄弟）的相邻的margin会被结合成一个margin。Margin按这种方式结合叫合并（collapse），产生的结合的margin叫做margin重叠
CSS里面关于重叠的条件:
都属于流内(In-flow)块级盒,处于同一个块级格式化上下文(BFC)
没有
行盒(line box),没有空隙,没有padding并且没有border把它们隔开都属于竖直相邻盒边(vertically-adjacent box edges)
相邻兄弟元素的重叠
父级和第一个/最后一个子元素
需要注意的是,overflow:hidden只在父子元素margin重叠时有效,相邻兄弟元素重叠中无效
margin-top重叠
父元素非块状格式化上下文元素
父元素没有
border-top设置父元素没有
padding-top值父元素和第一个子元素之间没有
inline元素分隔
margin-bottom重叠
上面的四个例子都可以导致margin-bottom重叠,除此之外
父元素没有
height,min-height,max-height限制
空block元素margin重叠
空block元素margin重叠其他条件
元素没有
border设置元素没有
padding值里面没有
inline元素没有
height或者min-height
margin重叠的计算规则
正正取大值
正负值相加
负负最负值
margin重叠的意义
在互联网早期,网页主要是以文字为载体,连续段落或列表如果没有margin重叠,首尾项间距会和其它兄弟标签1:2关系,排版不自然.所以margin重叠主要是为了解决文字布局排版的问题.
margin重叠实践
在表单中,使用.list{margin-top:15px;margin-bottom:15px;},比.list{margin-top:15px;}更具有健壮性,最后一个元素移除或位置调换,均不会破坏原来的布局
margin:auto
例1,块级元素,就算没有设置width或height,也会自动填充
例2,作为绝对定位元素,width自动填满父级第一个定位元素容器
例3,此时,如果设置width或height,自动填充特性就会被覆盖
例4,设置margin-right:100px,margin-left:auto,则margin-left为剩余空间大小即width–margin-right
例5,两边均设置margin:auto则平分剩余空间
margin:0 auto没有使图片水平居中,因为img是inline水平元素,需要设置display:block属性,这样,就算没有width,元素也会占据整个容器
使用margin:auto,绝对定位的水平垂直居中,浏览器要求IE8+
margin负值
常规流中的margin负值
在常规流中,设置margin-left:-20px,元素会向左移动-20px,对于设置margin-top也一样.
当设置margin-right:-20px;,元素本身不会移动,后面的元素会向左移动20px到该元素上.对于设置margin-bottom同理
同时,在元素不指定宽度的情况下,如果设置margin-left或者margin-right为负值的话,会在元素的对应方向上增加其宽度.
相对定位元素的margin负值
当设置margin-bottom/top的时候,表现如上,需要注意的是,设置了position:relative属性的元素会覆盖在后面的元素上面(后面的元素没有设置定位以及Z-index)
float元素的margin负值
对于设置了float的margin,设置margin为负值的时候,表现如下:
如果设置的margin的方向与float相同,那么,元素会往对应的方向移动对应的距离.
如果设置margin的方向与float的方向相反,则元素不动,元素之前或者之后的元素会向该元素的方向移动相应的距离.
第二个例子是使用margin负值与float实现的一列定宽的两列流式布局
使用margin负值的绝对定位垂直居中对齐
给元素设置absolute，left、top分别为50%；然后margin-top为 负的高度的一半、margin-left为 负的宽度的一半
这种方法的缺点是需要固定宽高
使用margin负值的有边框的列表布局
这里用margin与padding的偏移使边框重合
使用margin负值的有间距的列表布局以及两端对齐
两个例子用到当元素没有固定宽度时负值会增加自身宽度
第一个例子实现有间距的列表布局,其中需要消除ul的样式,并且在ul设置margin负值抵消li中的margin值
第二个例子实现margin负值下的两端对齐
一侧定宽自适应布局
第一个例子的重点是给左边的div嵌套了一个父级div并设置为宽度100%,这样当容器宽度变化时,左边的div自适应
第二个例子,我们利用同样的原理,来使DOM顺序和最终视觉顺序相符,也就是上面第一个一侧定宽的自适应布局的修改版
等高列布局
等高列布局主要利用了padding会显示背景颜色的原理,先给div一个巨大的margin负值,从而产生塌陷,再使用padding正值填补塌陷,从而达到多等高列布局
半遮挡的标题
这个例子使用relative属性会在后面元素上面显示的特性,配合margin负值偏移
圣杯布局
圣杯布局中,需要注意:
三栏都使用浮动,需要使用
clear:both清除浮动影响左右两列需要使用
position:relative以及负margin来达到三栏一行的目的父容器需要指定跟左右两栏宽度相同的
padding,用来盛放左右两栏
双飞翼布局
双飞翼布局是圣杯布局的改良版,区别在于对待中间栏内容不被遮挡的处理.
圣杯布局用padding以及相对定位来处理,而双飞翼布局让中间栏新增div的margin处理
