css margin负值
作者：互联网
margin，外边距，就是设置元素的从边框最外边缘向外（正值）或者向内（负值）的延申的距离。
margin是完全透明的，看不见的。但它是元素之间的边界
margin的边界线是两个元素之间真正的边界线。
元素的外部边界线就是元素的margin边界线。元素的内部边界想就是元素的padding边界线（或者说是内容区的边界线，两者重叠）
所以，两个并列元素的边界线就是两个元素的margin边界线，父元素与子元素的边界线就是父元素内容区的边界和子元素的margin边界
margin为正值的时候比较好理解。主要说一下margin为负值的时候现象
标准文档流中，一般情况下元素是默认向左和向上流动的，直到遇到边界线。
float元素按照流向会分为向左流动或者向右流动，如果流动元素前面的元素也是流动元素且位于上一行，那么该元素也可能会向上浮动（可以看后面的浮动实例），
元素margin负值的行为总结
先移动margin边界，然后根据元素的流向规律或者auto规律来移动和扩充元素，直到因为负值移动后的边界再次与其他元素的边界重合。
浮动元素因为margin负值移动到父元素边界外，且前一行也是浮动元素时，还会向上浮动
所有的流动元素其实都是行内块可以看作一行，只不过时超过父元素宽度时会自动换行
具体分析如下。
1.普通文档流，没有浮动，也没有定位（position:static 默认值）时。
效果表现一般为
当设置负值的 margin 的方向为 top 或者 left 的时候，元素会按照设置的方向移动相应的距离。
当设置负值的 margin 的方向为 bottom 或者 right 的时候，元素本身并不会移动，元素后面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面。
在元素不指定宽度的情况下，如果设置 margin-left 或者 margin-right 为负值的话，会在元素对应的方向上增加其宽度。效果就和设置 padding-left 或者 padding-right 一样。
实例1
html代码
<body >
<div id="d1">
<div id="d2">
</div>
</div>
</body>
css代码1
#d1 {
background: green;
border: 1px solid pink;
width:200px;
height: 200px;
margin: 100px auto;
}
#d2 {
background: gold;
border: 1px solid rgb(219, 192, 255);
width:100px;
height: 100px;
}
css代码1效果图
css代码2，d2的margin-left设为-50px
#d1 {
background: green;
border: 1px solid pink;
width:200px;
height: 200px;
margin: 100px auto;
}
#d2 {
background: gold;
border: 1px solid rgb(219, 192, 255);
width:100px;
height: 100px;
margin-left: -50px;
}
css代码2的效果图
css代码2的效果图比css代码1看上去其实向左移动了50px。
这是为什么呢？
margin的负值时，是从边框的最外边向内延申的，也即是说margin-left：-50时，margin-left的边界线是位于黄色块左边框的右边的，就如右侧的图，。而子元素的真正的边界就是margin的边界线。所以黄色块的元素就会向左流动，直到遇到父元素的内边界，也就是左侧的效果图。
实例2
再举个margin-bottom为负值的例子
<body >
<div id="d1">
<div id="d2">
</div>
<div id="d3">
</div>
</div>
</body>
css代码1
#d1 {
background: green;
border: 1px solid pink;
width:200px;
height: 200px;
margin: 100px auto;
}
#d2 {
background: gold;
border: 1px solid rgb(219, 192, 255);
width:100px;
height: 100px;
}
#d3 {
background: rgb(255, 0, 200);
border: 1px solid rgb(219, 192, 255);
width:50px;
height: 50px;
}
css代码1效果图
css代码2， 把黄色块的div的margin-bottom设为-50px
把黄色块的div的margin-bottom设为-50px，为社么粉色块会上去了呢？
把黄色块的div的margin-bottom设为-50px，如右图，margin下边界线跑到黄色块下边界上方去了。
而元素之间真正的边界是元素margin的边缘线，所以下方的粉色块就会向上流动，直到遇到黄色块的margin下边界为止。
也就得到了左边的效果图。
实例3
再举一个margin-right为负值的例子
html代码
<body >
<div id="d1">
<div id="d2">
</div>
</div>
</body>
css代码1
#d1 {
background: green;
border: 1px solid pink;
width:200px;
height: 200px;
margin: 100px auto;
padding: 10px;
}
#d2 {
background: gold;
border: 1px solid rgb(219, 192, 255);
height: 100px;
margin-bottom: -50px;
}
css代码1效果图
css代码2，
#d1 {
background: green;
border: 1px solid pink;
width:200px;
height: 200px;
margin: 100px auto;
padding: 10px;
}
#d2 {
background: gold;
border: 1px solid rgb(219, 192, 255);
height: 100px;
margin-right: -100px;
}
css代码2效果图
为什么设置margin-right为-100，会使黄色块加长了100px呢？
margin-right为-100px，如右图所示，margin-right的边界线就向内移动了100px。
而黄色div未设置宽度，默认就是auto，而auto就是使元素的margin边界自动填充到父元素的内容区，所以通过负值跑到里边的margin-right边界线又被自动扩充到父元素右侧内容区的边界，所以看上去就是黄色块加长了
2.元素没有浮动但是定位为relative时
和第一种情况差不多，唯一的区别是，如果产生元素重叠，那么relative元素位于上面，即使是后面的元素也一样 。
而第一种情况是后面的元素会位于上面
3.元素没有浮动但是定位为absolute
由于设置绝对定位的元素已经脱离了标准文档流，所以元素margin设置负值只会对自身有影响，而不会对后面的元素有影响
效果表现为
当设置负值的 margin 的方向为 top 或者 left 的时候，元素也会按照设置的方向移动相应的距离。
设置的 margin 的方向为 bottom 或者 right
由于设置绝对定位的元素已经脱离了标准文档流，所以，设置 margin-right/bottom 对后面的元素并没有影响。
4.元素设置了浮动
如果设置的 margin 的方向与浮动的方向相同，那么，元素会往对应的方向移动对应的距离。
如果设置 margin 的方向与浮动的方向相反，则元素本身不动，元素之前或者之后的元素会向钙元素的方向移动相应的距离。
浮动元素不仅可以左右浮动，如果一个浮动元素的上一行也是浮动元素，则改元素通过margin-left或者margin-right负值整体移动到父元素边框以外时，就会自动向上浮动
实例
html代码
<body >
<div id="d1">
<div id="d2">
</div>
<div id="d3">
</div>
<div id="d4">
</div>
</div>
</body>
css代码1，为浮动前
#d1 {
background: green;
border: 1px solid pink;
width:400px;
height: 400px;
margin: 100px auto;
padding: 10px;
}
#d2 {
background: gold;
border: 1px solid rgb(219, 192, 255);
width:100%;
height: 100px;
}
#d3 {
background: rgb(255, 0, 200);
border: 1px solid rgb(219, 192, 255);
width: 100px;
height: 100px;
}
#d4 {
background: rgb(255, 0, 43);
border: 1px solid rgb(80, 6, 176);
width:50px;
height: 50px;
}
效果图
css代码2， d3，d4左浮动
#d1 {
background: green;
border: 1px solid pink;
width:400px;
height: 400px;
margin: 100px auto;
padding: 10px;
}
#d2 {
background: gold;
border: 1px solid rgb(219, 192, 255);
width:100%;
height: 100px;
}
#d3 {
background: rgb(255, 0, 200);
border: 1px solid rgb(219, 192, 255);
width: 100px;
height: 100px;
float: left;
}
#d4 {
background: rgb(255, 0, 43);
border: 1px solid rgb(80, 6, 176);
width:50px;
height: 50px;
float: left;
}
效果图
css代码3， d3的margin-left为-50， 效果图
css代码4， d3的margin-left：-120px，效果图
css代码5， d2也设置左浮动，这时因为d2已经完全位于父元素之外，这时d2会向上浮动，
效果图
标签：负值,元素,100px,height,1px,background,margin,css 来源： https://www.cnblogs.com/gaoBlog/p/16683325.html