为何使用margin-right用负值，元素不会往右移动呢？

同学你好， 老师以一个不是很恰当但是很方便同学的理解的方式， 给同学解释一下为什么设置负的margin-right值等于自身的宽度， 不用结合定位， 就可以实现在右边。

1. 首先， 我们要了解元素在页面中实际占据的宽度为margin+border+padding+width

2. 那么， 我们就从盒子占据页面的实际宽度这个点出发。

   （1）当三个盒子同时设置浮动 ,本来是要在一行显示的。 但是由于中间的盒子宽度需要自适应 ,设置成100% ,所以左右两个小盒子被挤下去了 .

   （2）左侧盒子通过负的margin-left值结合定位属性实现左侧显示。

   （3）右侧盒子设置负的margin-right值， 那么它占据页面的实际宽度就是 负的margin-right + width， 当这个负值刚好等于自身宽度的时候， 我们可以理解为它实际占据页面的宽度为0，我们可以抽象的理解成它不占据位置， 所以可以在一排显示在最右侧了

3. 然后， 同学可以测试一下，调整右侧盒子负的margin-right值。当这个负值小于自身宽度的时候， 他会在原地不动， 当这个负值大于自身的宽度的时候， 他会继续显示在右侧

最后， 老师这里想跟同学说一下， 对于圣杯布局这一块， 课程上也做了标注，了解即可，同学目前不需要纠结这一块具体的原理，可以继续往后学习。 圣杯布局它其实更像是是一个公式，因为有规律可循，大家使用的时候一般都是按着这个公式来， 所以才被称作是一种布局方案。 同学如果是对这一块感兴趣，可以等知识积累到一定程度，再返回来研究这一块， 会更容易理解哦

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~