标签：负值 元素 100px height 1px background margin css
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。