如何更容易地记住圣杯布局与双飞翼布局

0、两种布局方式都是三列布局，且实现左右固定，中间自适应的效果。

1、首先建立一个最基本的结构。“中”要在最前面。

2、让三个盒子都左浮动。宽度：中100%，左右两个盒子给一定的宽度，如左300px，右200px。为了让盒子显示，给它们一个高度200px，以及分别设置背景色。

然后看下效果：

3、使它们在同一行。

      让左盒子直接向上移动一行，贴着左边界。所以给左盒子设置margin-left: -100%（这里的100%就是父元素的宽度）。

      效果如图，左盒子已经向上移动了一行，同时右盒子靠到了最左边。

    我们再让右盒子向上移动一行，同时贴靠右边界。给右盒子添加margin-left: -自身宽度 即可。

    效果如下，已经实现了我们想要的效果，但是存在一个问题，发现中盒子上的字“中”不见了。这是因为左右两个盒子把中盒子两边部分给遮挡住了。

4、解决遮挡有两种方法

  4.1、使用相对定位让左右两个盒子分别向左右两个方向，刚好把自身移出父容器，这样就中间盒子就显示完整了。

           由于父容器宽度占据整个屏幕，左右盒子已经移出了屏幕，为了让它们回来，使用margin让父容器宽度变窄。

效果如下：“中”字已经显示出来了，这种布局方式称为“圣杯布局”。

 

   4.2、另一种布局方式称为双飞翼布局。在中盒子内部再加一个盒子inner，使用margin让inner减少宽度以避免被左右盒子遮挡

         

同样实现我们想要效果