1. 前言
在css布局中margin是一个使用频率比较高的属性，通常我们都是赋值为正数，但是在使用element-ui的栅格系统时，我们经常会发现源码中有使用margin-left和margin-right为负数的情况，特针此进行总结，了解一下margin背后那些不为人知的奇技淫巧。
2. margin-top为负值的情况
2.1 代码
// css* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
h2 {
text-align: center;
}
/*父元素样式*/
.p {
margin: 100px auto;
width: 500px;
height: 500px;
border: 1px solid red;
background-color: #ccc;
}
.c1 {
width: 200px;
height: 200px;
border: 1px solid blue;
margin-top: -20px;
/* 此处的百分数是以父级作为参考的 500 * 20% = 100 */
/* margin-top: -20%; */
}
.c2 {
width: 200px;
height: 200px;
border: 1px solid green;
}
// html
<div class="p">
<div class="c1">
子元素1(自身会向上偏移)
</div>
<div class="c2">
子元素2（跟着上偏移）
</div>
</div>此时的效果如下：
2.2 结论
自身会向上偏移，后面排列的元素跟着向上偏移
3. margin-bottom为负数的情况
3.1 代码
// css* { margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
h2 {
text-align: center;
}
/*父元素样式*/
.p {
margin: 100px auto;
width: 500px;
height: 500px;
border: 1px solid red;
background-color: #ccc;
}
.c1 {
width: 200px;
height: 200px;
border: 1px solid blue;
margin-bottom: -20px;
}
.c2 {
width: 200px;
height: 200px;
border: 1px solid green;
}
// html
<div class="p">
<div class="c1">
子元素1(自身无偏移)
</div>
<div class="c2">
子元素2(向上发生偏移)
</div>
</div>此时的效果如下：
3.2 结论
自身无偏移，后面的元素向上发生偏移
4. margin-left为负数且设置固定宽度的情况
4.1 代码
* { margin: 0; padding: 0; box-sizing: border-box;
}
body,
html {
height: 100%;
}
h2 {
text-align: center;
}
/*父元素样式*/
.p {
margin: 100px auto;
width: 500px;
height: 500px;
border: 1px solid red;
background-color: #ccc;
}
.c1 {
width: 200px;
height: 200px;
border: 1px solid blue;
margin-left: -20px;
/* 此处的百分数是以父级作为参考的 500 * 20% = 100 */
/* margin-left: -20%; */
float: left;
}
.c2 {
width: 200px;
height: 200px;
border: 1px solid green;
float: left;
}
// html
<div class="p">
<div class="c1">
子元素1(自身向左偏移 )
</div>
<div class="c2">
子元素2（跟着向左偏移）
</div>
</div>此时的效果如下：
4.2 结论
自身向左偏移，后面排列的元素跟着向左发生偏移
5. margin-left为负数且不设置固定宽度的情况
5.1 代码
* { margin: 0; padding: 0; box-sizing: border-box;}
body,
html {
height: 100%;
}
h2 {
text-align: center;
}
/*父元素样式*/
.p {
margin: 100px auto;
width: 500px;
height: 500px;
border: 1px solid red;
background-color: #ccc;
}
.c1 {
height: 200px;
border: 1px solid blue;
/**左侧会延宽*/
margin-left: -20px;
/* 此处的百分数是以父级作为参考的 500 * 20% = 100 */
/* margin-left: -20%; */
}
// html
<div class="p">
<div class="c1">
子元素1(自身向左偏移 )
</div>
</div>此时的效果如下：
5.2 结论
自身的宽度向左延宽了
6. margin-right为负数且设置固定宽度的情况
6.1 代码
* { margin: 0; padding: 0; box-sizing: border-box;}body,
html {
height: 100%;
}
h2 {
text-align: center;
}
/*父元素样式*/
.p {
margin: 100px auto;
width: 500px;
height: 500px;
border: 1px solid red;
background-color: #ccc;
}
.c1 {
width: 200px;
height: 200px;
border: 1px solid blue;
margin-right: -20px;
/* 此处的百分数是以父级作为参考的 500 * 20% = 100 */
/* margin-right: -20%; */
float: left;
}
.c2 {
width: 200px;
height: 200px;
border: 1px solid green;
float: left;
}
// html
<div class="p">
<div class="c1">
子元素1(自身没有发生偏移)
</div>
<div class="c2">
子元素2（后面排列的元素想左发生了偏移）
</div>
</div>此时的效果如下：
6.2 结论
自身没有发生偏移，后面的元素向左偏移了
7. margin-right为负数且不设置固定宽度的情况
7.1 代码
* { margin: 0; padding: 0; box-sizing: border-box;}body,html {
height: 100%;
}
h2 {
text-align: center;
}
/*父元素样式*/
.p {
margin: 100px auto;
width: 500px;
height: 500px;
border: 1px solid red;
background-color: #ccc;
}
.c1 {
height: 200px;
border: 1px solid blue;
/**右侧会延宽*/
margin-right: -20px;
/* 此处的百分数是以父级作为参考的 500 * 20% = 100 */
/* margin-left: -20%; */
}
// html
<div class="p">
<div class="c1">
子元素1
</div>
</div>此时的效果如下：
7.2 结论
自身的宽度向右延宽了
8. 总结
- margin负值场景总结