圣杯和双飞翼的一些思考

圣杯和双飞翼布局的思考
圣杯和双飞翼布局实现的效果一样，他们的共同点都是实现三栏布局。

1、两侧宽度固定，中间宽度自适应的效果；

2、中间部分优先加载;

3、允许三列中的任意一列为最高列；

4、均只使用了一个额外的div;

圣杯布局：

布局上如下图所示：

<div class="header"></div>
    <div class="container">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
<div class="footer"></div>

constainer包裹着center，left，right,将center放在最前面的目

的是达到优先加载中间部分的要求。

给上面的代码加样式之后显示效果是这样的：

既然要两边宽度固定，假设左边的固定宽度为200px,右边的宽

度为150px，那么先给两边留出它们的空间，所以给container

加左右padding200px和150px。

中间宽度自适应，所以中间的宽度要为100%，这是自适应的

关键，两边固定宽度分别为200px和150px。

.container {
            padding-left: 200px;
            padding-right: 150px;
        }
.center {
            width: 100%;
            background-color: palegoldenrod;
        }
.left {
            width: 200px;
            height: 150px;
            background-color: palevioletred;
        }
.right {
            width: 150px;
            height: 150px;
            background-color: palegreen;
        }

接下来我们是不是该给center,left,right放到一行显示，那么让

块级元素放到一行的方式这里采取浮动的方式。（此处不能采

取inline-block的方式来让他们一行显示，inline-block会自带块

与块之间的间隙，并且没有脱离文档流）

.center {
            float: left;
            width: 100%;
            background-color: palegoldenrod;
        }
        .left {
            float: left;
            height: 100px;
            background-color: palevioletred;
        }
        .right {
            float: left;
            height: 100px;
            background-color: palegreen;
        }

由于浮动的元素不占位置，脱离了原来的位置，所以footer往

上占据了container的位置，我们需要给footer清除一下浮动

.footer {
            height: 50px;
            text-align: center;
            line-height: 50px;
            clear: both;
            background-color: skyblue;
        }

由于center的宽度是100%，加上center又浮动了，所以center

会占据第一行的位置，也就是占据了整个container内容的宽

度，left和right就被挤到了第二行。

那么我们需要将left放到原先预留出的位置，这里采取的是

margin负边距的方式。

.left {
            width: 200px;
            float: left;
            height: 150px;
            background-color: palevioletred;
            margin-left: -100%;  //margin负百分数是相对父元素移动 负像素值是相对自身移动
        }

但是left还是没有走到我们预留的位置，这时候就需要定位出手

啦，用定位的方式调节它的left值，让left值往左移动200px,这

样我们的left盒子就占据了原先预留出来的位置啦。当让除了给

它添加left: -200px让它左移200px, 还可以给它添加right:

200px，同样也可以左移。

left {
            position:relative;
            left: -200px;
            width: 200px;
            float: left;
            height: 150px;
            background-color: palevioletred;
            margin-left: -100%;
        }

到这里左边的盒子就已经占据了预留出来的位置了，那么还有

右边的盒子也需要占据右边预留的空间，我们还是采用margin

负外边距的方式，让right往右移动整个自身的宽度，直接给

right添加margin-right: -150px;或者margin-right: -100%;

.right {
            width: 150px;
            float: left;
            height: 150px;
            background-color: palegreen;
            margin-right: -150px;
        }

得到效果啦。但是要想保证页面正常显示，还需要设置一

个最小宽度，由于两侧是固定宽度所以最小宽度至少要是

200+150，到这可没有结束，刚刚左侧部分使用了相对定位

（不脱离文档流，原来的位置还在）左移了200px, 也就是说

center的前面还留出了200px的宽度，所以最终最小的宽度为

200+150+200=550px。我们给body加一个min-width必须大于

等于550px。

body {
            min-width: 550px;
        }

得到最终最终效果啦。
双飞翼布局：
与圣杯布局不同的是在DOM布局上。

<div class="header"></div>
<div class="container">
    <div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<div class="footer"></div>

container包裹着center,而不包含left和right。布局出来效果是这

样子的。

同样的，我们给左右设置固定宽度，中间自适应让container宽

度为100%，但是预留宽度我们是在container里面预留出宽

度，通过给center添加两个外边距的方式留出位置。

.container {
            width: 100%;
            background-color: palegoldenrod;
        }
        .center {
            margin-left: 200px;
            margin-right: 150px;
            background-color: palegoldenrod;
        }
        .left {
            width: 200px;
            height: 150px;
            background-color: palevioletred;
        }
        .right {
            width: 150px;
            height: 150px;
            background-color: palegreen;
        }

让这三盒子一行显示，同样加浮动，并给footer清除浮动。

.footer {
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: skyblue;
            clear: both;
        }
.container {
            float: left;
            width: 100%;
        }
.left {
            float: left;
            width: 200px;
            height: 150px;
            background-color: palevioletred;
        }
.right {
            float: left;
            width: 150px;
            height: 150px;
            background-color: palegreen;
        }

图中，container内部预留了左右200px和150px的宽度，

container,left,right三个盒子添加了浮动，container宽度为

100%所以占据了一行，而left和right被挤到了下一行。

同样，接下来我们需要将left和right放到预留的位置，采取

margin负外边距的方式。

先让left外边距负100%

.left {
            float: left;
            width: 200px;
            height: 150px;
            background-color: palevioletred;
            margin-left: -100%; //margin负百分数是相对父元素移动 负像素值是相对自身移动
        }

**margin负百分数是相对父元素移动 负像素值是相对自身移动
**
此处如果采取margin-left: 200px的方式，那么left盒子只是相对

自身的位置左移了200px的距离，就会出现下面的情况。

接下来再让right移动到原先你预留的位置就好了，我们应该让

right盒子往左边移动150px就好了，所以通过给right添加

margin-left: -150px，的方式达到。

.right {
            float: left;
            width: 150px;
            height: 150px;
            background-color: palegreen;
            margin-left: -150px;
        }

同样为了让页面一直正常显示，我们需要给body添加一个最小

宽度，这里最小宽度就不用像圣杯布局那样计算，只需要大于

200+150就好啦。此处我们设置为500比较合适。

body {
            min-width: 500px;
        }

这样双飞翼布局就完成了。
双飞翼布局不用像圣杯布局那样使用定位，但是DOM结构上
不如圣杯布局那么清晰明白。并且最小宽度可以比圣杯布局小。
当然啦，还有一种方式可以实现这样三列布局的效果，那就是flex。

flex需要我们采用圣杯布局的DOM结构。代码实现如下:

.container {
            display: flex;
        }
        .center {
            flex: 1;
        }
        .left {
            flex: 0 0 200px; // flex-grow与flex-shirk都为0，意思是当剩余空间充足或者不足时，该项既不放大也不缩小
             /* width: 200px; 可以直接给width */
            order: -1; // order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
        }
        .right {
            flex: 0 0 150px; // flex-basis可以设为跟width或height属性一样的值（比如350px）
             /* width: 150px; 可以直接给width */ 
        }


<div class="header"></div>
    <div class="container">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
<div class="footer"></div>

这里可能大部分同学需要解释的只有一个地方，那就是flex属
性的三个值分别是指什么。

flex是flex-grow, flex-shirk, flex-basis的缩写，默认值是 0，1，auto

flex-grow: 定义项目的放大比例， 默认为0，意思就是有剩余

空间，但是也放大比例。

如果每一项flex-grow为1，那么每一项将会等分剩余空间，假

如第一项flex-grow为2，其他项为1，那么第一项将占据两份，

也就是第一项将为其他项的两倍。

flex-shirk: 定义了项目的缩小比例，默认为1，即如果空间不

足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等

比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为

1，则空间不足时，前者不缩小。

flex-basis：属性定义了在分配多余空间之前，项目占据的主轴

空间（main size）。浏览器根据这个属性，计算主轴是否有多

余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则

项目将占据固定空间。所以left盒子和right盒子可以不用给flex-

basis值，可以直接给width。