今天看到别人的代码，发现有位大神写了如下代码
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的包裹性，在需要居中的元素外面套一个空的<div>元素即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>垂直居中</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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%;
}
</style>
</head>
<body>
<div class="box">
<div class="out">
<div class="in">测试内容</div>
</div>
</div>
</body>
</html>
水平垂直居中
- 三栏自适应布局
中间的主体使用双层标签，外层<div>宽度100%显示，并且浮动，内层<div>为真正的主体内容，含有左右110px的margin值。左栏和右栏都采用margin负值。左栏左浮动，margin-left为-100%，正好使左栏位于页面左侧。右栏左浮动，大小为其本身的宽度100px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>垂直居中</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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;
}
</style>
</head>
<body>
<div class="main">
<div class="in">content</div>
</div>
<div class="left">left slider</div>
<div class="right">right slider</div>
</body>
</html>
三栏自适应布局
网友评论