本节right移动问题

.right{

margin-left: -220px;

right: -220px;

width: 220px;

background: #30a457;

}

改后：

.right{

margin-right: -100%;

width: 220px;

background: #30a457;

}

对于右测right那个块还是没懂为什么要先设置margin-left：-220px，然后再设置right：-220px使得达到效果，，但是我胡乱试了一下：直接把margin-right：-100%，然后不用设置right值了，，直接就跑右上角去达到效果了，，，这只是胡乱试出来的，，还是不知道为什么会这样子。。。

新手_请多关照 2017-10-03

源自：CSS网页布局基础 3-2 圣杯布局案例

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2017-10-04 18:20:05

你好，代码具有灵活性，一种效果实现的方式会有很多种，这里，首先，

.right{
  margin-left: -100%;
  right: -100%;
  width: 220px;
  background: #30a457;
}

这个与老师的代码是统一个原理哟，margin-left: -220px;right: -220px;这里是先把向左移动一个2200px；然后在向，而100%，是先向左移动100%，再向右移动100%（这里的100%，是相对于父级来算的哟），这里原理是相同的哟。可以来测试下。

至于下面这个：

.right{
  margin-right: -100%;
  width: 220px;
  background: #30a457;
}

要考虑到中间部分哟，这里设左中右向左浮动，因为中间100%，左层和右层根本没有位置上去，正常的若设置浮动，因在一行显示，而这里设置margin-right: -100%;

这里主要应用在与浮动相反方向的负margin ，例：

#mydiv1 {float:left; margin-right:-100px;}
若两个元素都为浮动，且#mydiv1的元素设定margin-right为20px。这样#mydiv2会认为#mydiv1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，#mydiv1的内容不受影响，保持原有的宽度。

如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。

祝学习愉快~

收起回答

新手_请多关照提问者 #1

非常感谢！

2017-10-04 18:28:44
snowman022 #2

老师，有个问题指出一下，无意冒犯。关于你回答的第一部分，margin-left: -100%中的100%应该是其父元素的宽度，而不是其本身宽度220px,right: -100%中的100%也是其父元素的宽度，虽然结果一致，但是100%相对其本身还是其父元素还是有区别的。

2017-10-30 08:47:42
好帮手慕糖回复 snowman022 #3

你好，首先感谢你的提醒，这里是我没有描述清楚，这里的100%，是相对于父级来说，还有一点可以简单理解：对绝对定位元素的margin-left的百分比只是相对于.center内容的宽度,不包含padding的大小; 所以这里margin-left:-xx；right:-xx;这两个的属性值，保持一致即可哟（这个属性值要大于或者等于自身的宽度值），这里与老师书写的代码时一个原理，也是开发中的一些技巧，这些技巧记住就好了哟，你也可以自己来根据代码测试总结理解下哟。祝学习愉快~

2017-10-30 10:08:55