今天看到别人的代码,发现有位大神写了如下代码
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%;
}
水平垂直居中
三栏自适应布局
中间的主体使用双层标签,外层
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;
}
三栏自适应布局