margin详解

margin属性指定了盒的margin区的宽度。margin简写属性一次性设置四周的margin，而其它margin属性只设置它们各侧的。这些属性适用于所有元素，但非替换行内元素上的竖直margin将不会产生任何效果

margin与容器尺寸

`margin与可视尺寸`

margin与可视尺寸

只适用于没有设定width/height的普通block元素
只适用于水平方向尺寸

一侧定宽的自适应布局(未修改版)

`margin与占据尺寸`

margin与占据尺寸

我们修改图片的margin-bottom值,容器的高度随着margin值变化

block/inline-block水平元素均适用
与有没有设定width/height值无关
适用于水平方向和垂直方向

滚动容器内上下留白

margin与百分比

普通元素百分比

普通元素的百分比margin都是相对于容器的宽度计算的

绝对定位百分比

绝对定位元素的百分比margin是相对于第一个祖先定为元素(relative/absolute/fixed)的宽度计算的

宽度2:1自适应矩形

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重叠

空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

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左右均设置auto,图片水平居中

margin:0 auto没有使图片水平居中,因为img是inline水平元素,需要设置display:block属性,这样,就算没有width,元素也会占据整个容器

改变流动方向,使用margin:auto垂直居中

使用margin:auto,绝对定位的水平垂直居中,浏览器要求IE8+

上例中绝对定位的水平垂直居中的原理

margin负值

`常规流中的margin负值`

常规流中的margin负值

在常规流中,设置margin-left:-20px,元素会向左移动-20px,对于设置margin-top也一样.

当设置margin-right:-20px;,元素本身不会移动,后面的元素会向左移动20px到该元素上.对于设置margin-bottom同理

同时,在元素不指定宽度的情况下,如果设置margin-left或者margin-right为负值的话,会在元素的对应方向上增加其宽度.

`相对定位元素的margin负值`

相对定位元素的margin

当设置margin-bottom/top的时候,表现如上,需要注意的是,设置了position:relative属性的元素会覆盖在后面的元素上面(后面的元素没有设置定位以及Z-index)

`float元素的margin负值`

float与marginDemo

对于设置了float的margin,设置margin为负值的时候,表现如下:

如果设置的margin的方向与float相同,那么,元素会往对应的方向移动对应的距离.

如果设置margin的方向与float的方向相反,则元素不动,元素之前或者之后的元素会向该元素的方向移动相应的距离.

第二个例子是使用margin负值与float实现的一列定宽的两列流式布局

`使用margin负值的绝对定位垂直居中对齐`

垂直居中对齐Demo

给元素设置absolute，left、top分别为50%；然后margin-top为负的高度的一半、margin-left为负的宽度的一半

这种方法的缺点是需要固定宽高

`使用margin负值的有边框的列表布局`

有边框的列表布局

这里用margin与padding的偏移使边框重合

`使用margin负值的有间距的列表布局以及两端对齐`

有间距的列表布局以及两端对齐

两个例子用到当元素没有固定宽度时负值会增加自身宽度

第一个例子实现有间距的列表布局,其中需要消除ul的样式,并且在ul设置margin负值抵消li中的margin值

第二个例子实现margin负值下的两端对齐

`一侧定宽自适应布局`

一侧定宽自适应布局以及DOM顺序正确的修改版

第一个例子的重点是给左边的div嵌套了一个父级div并设置为宽度100%,这样当容器宽度变化时,左边的div自适应

第二个例子,我们利用同样的原理,来使DOM顺序和最终视觉顺序相符,也就是上面第一个一侧定宽的自适应布局的修改版

`等高列布局`

等高列布局Demo

等高列布局主要利用了padding会显示背景颜色的原理,先给div一个巨大的margin负值,从而产生塌陷,再使用padding正值填补塌陷,从而达到多等高列布局

`半遮挡的标题`

半遮挡的标题Demo

这个例子使用relative属性会在后面元素上面显示的特性,配合margin负值偏移

`圣杯布局`

圣杯布局Demo

圣杯布局中,需要注意:

三栏都使用浮动,需要使用clear:both清除浮动影响
左右两列需要使用position:relative以及负margin来达到三栏一行的目的
父容器需要指定跟左右两栏宽度相同的padding,用来盛放左右两栏

圣杯布局详细介绍

`双飞翼布局`

双飞翼布局Demo

双飞翼布局是圣杯布局的改良版,区别在于对待中间栏内容不被遮挡的处理.
圣杯布局用padding以及相对定位来处理,而双飞翼布局让中间栏新增div的margin处理

CSS深入理解之margin
理解并运用 CSS 的负 margin 值
 margin负值详解