element-ui栅格系统之margin为负值的情况总结

Posted 2023-02-03

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. 总结

1. margin负值场景总结