css缩小行距负值,css3的margin中的负值的深入研究

今天看到别人的代码，发现有位大神写了如下代码

margin-left:-100px

以前也一直用margin这个属性，但是从来没有用过负值，虽然有在别的文章中看到过负值的使用场景，但是一直觉得它是一个无用属性，如果css迭代版本的话，应该会取消这种用法......

但是还是太年轻，去网上查了下

负margin是绝对标准的CSS，W3C甚至标注过：对于margin属性来说，负值是被允许的。

完全兼容 并且所有现代浏览器都支持这种负值

好吧，我现在承认有必要去使用下这种hack方法，如果使用得当，应该会是一个很强大的属性。

表现

首先在两个display为block的元素，并且这两个元素没有使用浮动：

当A元素的margin-top/margin-left被赋予负值时，A元素将被拉进指定的方向。比如向上或者向左

A元素的margin-top/margin-left被赋予负值时

但是当A元素margin-bottom/right为负数，A元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

A元素margin-bottom/right为负数

虽然margin可以应用到所有元素，但display属性不同时，表现也不同，比如inline的上下margin就会无效。block的四个方向的margin都会有效，这个很好理解。

重叠

如果margin设置成了负值，大多数情况下后面的元素会覆盖前面的元素，但是，也不总是，具体覆盖情况要分为背景和内容，以及display的属性。

在普通流布局中，浏览器将页面布局分为内容和背景，内容的层叠显示始终高于背景。block元素分为内容和背景，而inline元素或inline-block元素，它本身就是内容(包括其背景等样式设置)

总结一下就是，

在两个block元素重叠后，后面元素可以覆盖前面元素的背景，但无法覆盖其内容

当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容。

如果两者和浮动元素重叠，那么内容将会在浮动元素之上显示，但是背景可能就会被浮动元素覆盖。

其实这个没有什么意义，真的想要显示在最上面，使用z-index就可以了嘛

应用

水平垂直居中，但是有要求，要居中的元素的宽/高是不变的或者说是确定的，比如width/height=100px,那么设置absolute的top/left=50%，然后margin-left/margin-top=-50px即可.但是这个场景用的不多。

如果要居中的元素的宽/高是不确定的，这时margin负值就不能使用具体的px了，可以使用百分比。但由于margin的百分比都是相对于包含块的宽度，所以这里限制了只能设置宽高相同的居中元素。包含块的宽度如何获得呢？利用absolute的包裹性，在需要居中的元素外面套一个空的

元素即可垂直居中

.box{

position:relative;

width: 200px;

height: 200px;

background-color: lightgreen;

border: 2px solid black;

}

.out{

position: absolute;

left: 50%;

top: 50%;

}

.in{

height: 100px;

width: 100px;

background-color: pink;

margin-left: -50%;

margin-top: -50%;

}

测试内容

水平垂直居中

三栏自适应布局

中间的主体使用双层标签，外层

宽度100%显示，并且浮动，内层

为真正的主体内容，含有左右110px的margin值。左栏和右栏都采用margin负值。左栏左浮动，margin-left为-100%，正好使左栏位于页面左侧。右栏左浮动，大小为其本身的宽度100px垂直居中

html,body{

height: 100%;

}

body{

margin: 0;

}

.main{

width: 100%;

height: 100%;

float: left;

}

.main .in{

margin: 0 110px;

background-color: pink;

height: 100%;

}

.left{

height: 100%;

width: 100px;

float: left;

background-color: lightgreen;

margin-left: -100%;

}

.right{

height: 100%;

width: 100px;

float: left;

background-color: lightgreen;

margin-left: -100px;

}

content

left slider

right slider

三栏自适应布局