正在回答
你好同学，解答如下：
1.可以这样理解，假如说middle盒子宽度比较小，那么其他盒子正常在第一行。那right举例子，如果你给它设置margin往左移动，它会重叠在middle上面。
所以两个小盒子本身就不是第二行的内容，你给它设置margin往左移动，它自然与上面的效果一样，叠在middle上面。所以就回到了第一行上面。
2.左侧的盒子margin如果设置固定值，例如你设置-1200px，但是电脑分辨率比较大的话，比如1900px，那也无法移动到最左侧哦。所以需要设置百分比，无论在任何分辨率下，都是移动父元素宽度的100%（注意不包含父元素padding）
右侧盒子不需要移动到最左侧，它本身如果不被挤下去，就是在middle右侧的，所以我们只需要移动它自身宽度（固定值），让它完全叠在middle上 ，即回到了第一行即可。
3.这两个布局类似，如果同学对两个布局不熟练。不建议对比两个布局，因为你这样会更混乱。建议你先去练习圣杯布局，等你熟悉了圣杯布局，再去看双飞翼，会比老师讲还要清晰。
另外，本课程的内容属于课外了解，实际开发中用不到。如果实在不理解这一块，合理安排学习时间，建议往下学习其他内容哦。
祝学习愉快，望采纳。
你好同学，给你讲解一下圣杯布局的原理：
圣杯布局的实现的效果是中间盒子自适应 ,两边盒子固定 。所以中间的盒子设置宽度100% , 这样就占据了父元素的内容宽度,不包括父元素padding ,给父元素设置左右填充是为了给左右的盒子留位置 。
本来三个盒子设置浮动 ,是要在一行显示的。
但是由于中间盒子宽度太大 , 把它们挤到下边了 .两个小盒子是被迫挤下来的 , 所以这里时候就要配合设置margin或者定位 ,让两边的小盒子到达左右两边的位置 。
例如拿右边的盒子举例子 :
它本身应该和中间盒子在一行显示 ,第一行没有它的位置了 , 被挤下去了。所以先设置margin-left:-220px ,让它往左移动 , 叠在中间盒子的右侧 。
叠在middle上后 , 它距离浏览器右侧还有一个父元素右填充的距离 ,也是220px . 所以最后要结合定位 , 通过 设置right: -220px;让它往右移动到右侧了 。
左侧也是这个原理，因为它要显示在最左侧，所以先设置margin-left: -100%; ，让往左移动。100%是移动父元素宽度的100%，但是不包含padding部分。还需要结合定位，设置left: -200px;往左移动200px显示在最左侧哦。
另外，这个布局确实不好理解，可能你听几遍还是听不懂。建议同学跟着视频多练习几遍，在练习的过程中，可以一步步观察，每做到一个步骤，效果发生了什么变化，自己多思考，会容易理解一些哦。
祝学习愉快，望采纳。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星