正在回答 回答被采纳积分+1
同学你好，解答如下：
圣杯布局：
元素占据的总宽度包括“自身的宽度”、“左右padding”、“左右margin”、“左右边框”，div#right只有自身的宽度和margin-right，当margin-right是负值，并且大小与自身宽度一样时，占据的总宽度就类似于0。此时就会发生一个现象，div#right会上移到div#center那一行，并在行末尾显示。
双飞翼布局：
元素设置margin-left负值后，会往左移，类似于元素被往左拽了：
当margin-left是负的自身宽度时，就会被拽到上一行，即会在div#center那行显示。
利用margin-left:负值；、margin-right：负值；布局时的特殊现象，就有了两种布局。
代码非常灵活，不同的写法，往往能实现出很多特别的效果。圣杯布局和双飞翼布局，只是程序员总结出的两种布局形式，二者具体的代码不同；为了区分它们，才取了不同的名字。如果用法相同，就不是两种布局了，那就是一种布局了。
祝学习愉快！
-
Devil_7 #1
这个我也理解了，但是我还是搞不懂，为什么两种布局在这个部分写法是不一样的
为什么在圣杯布局里，不能用margin-left：负值，
类似在双飞翼布局中，不能用margin-right：负值，用了会发生在末端就显示一条缝
2021-08-20 17:02:01 -
同学你好，解答如下：
如果圣杯布局中，右侧元素设置了margin-left负值，那么表现形式是如下样子：
这与我们的预期不符；而换成margin-right负值，页面效果刚好是我们想要的，所以就要使用margin-right负值。
抛开“圣杯布局”这个名词，我们就单纯的使用它的代码，但是右侧元素使用margin-left负值，此时我们新增一些代码，也可以实现“圣杯布局”的效果。但是此时的代码，就不是程序员口中的“圣杯布局”了。
双飞翼同理，使用margin-right：负值后，浏览器表现出来的样子，不是我们想要的，你不能硬性的去命令它“你要按照我脑海中的样子来展示”。而是根据它表现出来的样子，合理的选择属性。
这两种布局形式就是固定的形式，同学记住就行了。
祝学习愉快！
2021-08-20 18:18:19
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧