今天无意中看到了双飞燕,圣杯布局,发现里面主要是有用到一个负外边距,感觉挺神奇的这玩意
( ⊙ o ⊙ )!看就了一些关于负外边距的资料,这里自己总简单结一下。
参考网址:
http://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html
http://www.daqianduan.com/6239.html
负外边距主要分为在普通文档流的作用效果和 对浮动元素的作用效果
对普通文档流
- marin-left或者margin-top是负值:它会将元素在相应的方向进行移动。left就是左右方向移动,top就是上下方向移动。也就是会使元素在文档流里的位置发生变化。
- margin-right或者margin-bottom是负值:它不会移动该元素(该元素不变化),但会使该元素后面的元素往前移动。也就是说,如果margin-bottom为负值,那么该元素下面的元素会网上移动;如果margin-right为负值,那么该元素右边的元素会往左移动,从而覆盖该元素。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px
}
#div1{
background-color: red;
width:100px;
height: 100px;
margin-bottom:-50px;
}
#div2{
height: 100px;
width:100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2"></div>
</body>
</html>
效果如图:
- 如果元素没有设置宽度,那么margin-left和margin-right取负值 ,会将元素左右拉长,我们可以看见宽度边长了。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px
}
#div1{
width:400px;
height: 100px;
border:10px solid black;
}
#div3{
height: 100px;
margin-right: -100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<div id="div3"></div>
</div>
</body>
</html>
效果见下图:
显然,div3的长度被拉长了100px。
对浮动元素
对于浮动元素来说,负外边距的效果和普通文档流类似,不过也有一些特殊的地方。】
和之前一样,如果是设置left,top那么该元素会移动,如果是bottom和right也会使后面的元素往前移动,遮盖前面的元素。
如果有几个相邻的浮动元素,设置左右的负的外边距,那么右边的浮动元素会向左覆盖前面的浮动元素。并且,如果某个浮动元素是因为窗口大小或者它前面的浮动元素的宽度,从而掉到下一行的话,那么给他设置一个margin-left负值或者给她前面的元素设置一个margin-right负值,就会使得这个元素往上一行移动。(╮(╯_╰)╭就是从下面一行的左边消失,从上一行的右边出现,感觉挺神奇的)
例:
这是没有设置负外边距的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px
}
#div1{
width:2000px;
height: 100px;
background-color: yellow;
float: left;
}
#div2{
height: 100px;
width:100px;
background-color: red;
float:left;
/*margin-left: px;*/
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
现在给div2设置一个负的margin-left
#div2{
height: 100px;
width:100px;
background-color: red;
float:left;
margin-left: -100px;
}
从图中可以发现div2消失了,也就是它向左移动了本身的宽度值后,在页面上没有显示了,然后把margin-left设置为-200px
效果如下:
可以发现div2跑到上面一行去了,以此类推…
注意:在这里,给div1设置负的margin-right和给div2设置负的margin-left效果是一样的。
负的外边距的作用其实很强大,许多布局定位都可以使用负的外边距,具体的实现以后有时间在补充吧~~
待续…