圣杯和双飞翼布局的实现与理解

        对于圣杯和双飞翼的布局这种专业性的名词，可能很多人不理解；但要是说到在传统的流式布局中如何实现三栏式布局中，左右两栏固定宽度，中间栏自适应的问题。可能很多人都会恍然大悟。而圣杯和双飞翼布局正是为了解决这个问题而衍生出的两种比较经典的解决方案。

   一、关于圣杯布局

      圣杯布局最早由 Matthew Levine 在一篇文章中提出，这种左右两栏固定中间自适应的布局；他将其命名为Holy Grail(圣杯)这就是圣杯布局的来历。圣杯布局实现左右两栏固宽中间自适应的方案是:在三栏的最外层包裹一个div，然后通过浮动以及定位的方式将所有栏放置到相应的位置从而达到中间自适应左右两边固定的布局。

   大概实现流程大体有三步：1.创建一个基本的上中下三部分，然后将中间部分的左右内边距设置为左右两栏的宽度；2.向中间部分添加列，然后将添加的列设置为浮动以便于后面三列能够被放置在同一行上；3.通过定位以及边距的调整将其每一列放置到对应的栏中。最后我们可以通过设置min-width来保证布局的正确显示

具体的流程如下：

STEP1:Create the frame 首先创建一个框架,由三部分组成；头部、中间部分以及尾部 然后我们设置中间部分的左右内边距为我们想要的左右两栏的宽度
STEP2:ADD the cloumns
第二步我们需要向中间部分添加列，添加的列就是我们所需要的栏数；这里我们需要三行；所以我们将添加三列
            接下来我们给这三栏添加适当的宽度并浮动他们，当然为了防止尾部的位置受到浮动的影响变化，我们需要清除浮动
            注意：在我们添加栏数的时候,我们需要将处于中间栏的标签写在其他栏之前；这么做是因为中间栏的宽度
            设置的是100% 如果不写在其他栏前面；那么当浮动的时候中间这一栏的前后栏会各自占据一行的空间。从而导致留白等问题。

STEP3:PULL the left cloumn into place
            描述：将左边列放置到左栏中，首先我们设置左边列的左外边距为-100%这样左边行就完全处于container这个容器的最左边  然后我们需要用定位将其调整到左侧：具体的方法是设置其为相对定位并且right值为其宽度，那样左列就会向左平移其宽度个单位  从而达到放置到左栏位置的目的。
STEP4 PULL the right cloumn into place
            描述：将右列放置到右栏中，具体的操作可以参考左栏；但是作者在这里提供了一个比较简单的方法
            就是直接设置其margin-right值为负的其宽度个单位，这样右列就会自动升到右栏中

至此，基本上完成了整个圣杯布局，然后我们为了确保能够正确的显示；我们需要将body的宽度设置一个最小宽度以确保圣杯布局能够正确的显示在用户的界面上
        这个宽度为：2*左列的宽+右列的宽(在我们这里为2*150px+120px)

具体的实现细节参考：https://alistapart.com/article/holygrail这篇文章

下面是我自己的实现代码，和文章中基本相似https://github.com/shengbeer/Study/blob/master/TestHoly.html

PS：这里分享我刚刚接触到的一个知识点，也是我的一个知识盲区；我发现在左栏和右栏中输入英文字符时，并不会自动换行；而是会一直增加宽度；甚至右边栏都出现了滚动横条。后来经过查阅我才发现，原来浏览器在解析英文，纯数字时；不会自动断行，会撑开所在区域块。我们需要手动换行，设置word-wrap属性为break-word即可解决这个问题。同样这个问题严谨一点的说法是：英文单词没有结束之前是不能自动换行的，而每个英文单词之间都是用空格来分隔，所以我们连续的英文会被认为是一个单词；所以自动换行会出现问题。

 

双飞翼布局：双飞翼布局是国内比较经典的固比固布局方式，最早由淘宝UED玉伯大大提出；是为了应对圣杯布局的缺陷：即当浏览器的宽度无限制缩小时；圣杯会“碎掉”。因此提出了这种和圣杯类似的固比固布局，双飞翼布局也是和圣杯布局一样，中间内容优先渲染；但他只使用了负边距加上浮动实现。只不过在圣杯布局的中间栏外包裹了一层div，用来代替相对定位。从而实现布局关于圣杯布局以及双飞翼布局的比较可以参见这篇文章https://segmentfault.com/a/1190000011990028#articleHeader4

圣杯布局和双飞翼布局的实现可以参见https://www.jianshu.com/p/2fe0e6953d0f这篇文章。

需要说明的是，这里的圣杯布局和双飞翼布局只是两种比较经典的固比固布局；他们实现的目标是左右两栏固宽。中间一栏自适应，并力求用最简单的办法实现最好的兼容性。

这是一种布局的思想，我们需要理解的应该是其中所包含的布局思想；实现的代码有很多中，只要我们的思路是对的。那么我们就能够实现这两种布局，通过其他的方式。

另外随着技术的不断发展，现在CSS3中的flex布局以及grid布局实现这些起来应该更容易理解；只不过受制于不同浏览器兼容性的问题。

  如果你发现文章中有什么错误，烦请指正；或者发邮件到shengbeer@126.com