没有理解.right为什么设置margin-left：-220px
来源：3-2 圣杯布局案例（了解即可）
StickMind
2019-05-01 00:22:43
左边是 margin-left：-100%，这个好理解
但是右边margin-left：-220px什么意思，为什么单位变了
写回答
1回答
-
你好同学，可以跟着老师的分析去理解：
.margin-left为负值是往左移动。 三个盒子本来浮动后要在一行显示 ,并且小盒子应该在middle后面，也就是右边显示 。但是由于middle设置宽度100%把它们挤下去了 。此时如果强制性让小盒子往左移动 ，那么它会回到第一行 ，挤在middle上面 。
右边的盒子因为要在右边显示，所以不需要往左移动太大。只需要移动它自身的宽度，让它整个区域叠在中间盒子上面，所以设置margin-left:-220px。（此时距离右边还剩父元素padding的距离，结合定位移动）
而左边的盒子要在左边显示，所以要往左移动margin-left:-100%就是父元素宽度的100% ，这里不设置px为固定的是因为浏览器宽度不同，那么盒子的宽度也会随着变化的。所以设置100%就是不管父元素宽度多大，都是移动父元素的100%的宽度哦（不包括padding , 所以会贴在middle左侧 ，此时它距离左侧也有父元素padding的距离 ，也结合定位 ，让它移动哦）
祝学习愉快 ，望采纳。
1h019-05-01
相似问题