1、margin 负边距
负边距，不会脱离文档流，但后续原素会占用元素空间。
2、负边距与垂直方向元素
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>负边距与垂直方向的元素</title>
<style type="text/css">
.div1{
background: red;
width: 210px;
height: 300px;
}
.div2{
background: blue;
width: 200px;
height: 100px;
margin-top: -240px;
}
.div3{
background: yellow;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<p>div2 设置负边距，div3也会跟随div2持续移动
<br>该特性与水平方向的不一致，水平方向div3触碰div1就会停止移动<p>
<div class="div1">div1 red <br>height300px,</div>
<div class="div2">div2 blue <br>margin-top:-240px</div>
<div class="div3">div3 yellow</div>
</body>
</html>
运行效果：
垂直方向负边距
3、负边距与内边距
内边距展开元素，外边距收缩元素。元素占用空间被撑大，其他元素位置不会受到影响。
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>负边距与内边距</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.div1{
background: red;
width: 100px;
height: 100px;
}
.div2{
background: blue;
width: 300px;
height: 100px;
padding-bottom: 300px;
margin-bottom:-300px;
}
.div3{
background: yellow;
width: 100px;
height: 100px;
}
.div4{
background: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">div1 red</div>
<div class="div2">
div2 blue;通过以下两个属性<br>
padding-bottom: 300px;<br/>
margin-bottom:-300px;<br/>
撑高盒子而不改变其他盒子的位置。
</div>
<div class="div3">div3 yellow</div>
<div class="div4">div4 green</div>
</body>
</html>
运行效果：
div2 被分割成两个部分，元素变大，div3和div4位置未受到影响。
内边距展开元素，外边距收缩元素。元素占用空间变大
利用此特性，填充父元素
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>负边距与内边距</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.div1{
width: 400px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
overflow: hidden;
}
.div2{
background: red;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
div2利用<br/>
padding-bottom: 9999px;<br/>
margin-bottom: -9999px;<br/>
沾满整个父div。
</div>
</div>
</body>
</html>
运行效果：
内边距展开元素，外边距收缩元素。元素占用空间变大,填充父元素
4、负边距与浮动-基础
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin负边距</title>
<style type="text/css">
div{
float: left;
height: 100px;
}
.div1{
width: 100px;
background: red;
}
.div2{
width: 100px;
background: blue;
margin-left: -50px;
}
.div3{
width: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
运行效果： div2设置了负边距，div2占用了div1位置，同时div3位置向前移动。
基础负边距
5、负边距与浮动-元素持续前移
如果把div2的margin-left:-150px,div3与div1相遇，不会持续前进。div3不会跟着div2持续迁移。如果div3想持续前移，需要设置div3的负边距后，才有效。
负边距持续前移
6、负边距与浮动-换行
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin负边距跨行</title>
<style type="text/css">
div{
float: left;
height: 100px;
}
.div1{
width: 100%;
background: red;
}
.div2{
width: 100px;
background: blue;
margin-left: -200px;
}
.div3{
width: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
运行结果：
浮动排列的盒子，盒子的负边距达到一定程度，会引起元素定位到上一行。div2元素负边距超过了自身盒子总宽度，并且div2原本在第二行距离左边0px，因此div2会向上漂浮，div3漂浮到距离第二行左边界0px。
如果让div3向上漂浮呢，参照定位
需要设置div3的负边距为自身盒子总宽度。div3的参照的位置，是div2漂浮后，div3所在的位置
负边距与换行
网友评论