程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

圣杯布局与双飞翼布局

圣杯与双飞翼布局主要解决三列布局，要求中间内容优先渲染，左右内容宽度固定，中间内容宽度自适应

圣杯与双飞翼布局原理是利用浮动，负外边距以及相对定位来实现

1.圣杯布局

​ 圣杯的原理是将上中下三个容器包裹在一个父容器里，这里的重点是**#center容器要放在第一位**

​ **注意点：**圣杯布局的最小尺寸为2*200+200=600px，前一个200为#left容器的宽度，后一个200为#right容器的宽度，所以要设置#container的最小宽度为600px

<div id="container">
	<div id="center"></div>    
	<div id="left"></div>    
	<div id="right"></div>    
</div>

body {
        padding: 0;
        margin: 0;
    }

    #container {
        padding: 0 200px;
        min-width: 600px;
    }
    #center {
        height: 100px;
        background-color: darkcyan;
        float: left;
        width: 100%;
    }
    #left {
        height: 100px;
        background-color: blue;
        float: left;
        width: 200px;
        position: relative;
        left: -200px;
        margin-left: -100%;
    }
    #right {
        height: 100px;
        background-color: crimson;
        float: left;
        width: 200px;
        margin-right: -200px;
    }

2.双飞翼布局

双飞翼的原理是将#center放入#container中，设置#container,#left,#right左浮动，#container设置width:100%; #center设置左右margin为#left，#right的宽度，再使用margin-left调整#left，#right，代码如下：(当然不要忘记上面提到的最小宽度)

注意：这里的容器#container也要放在#left，#right的前面的

<div id="container">
    <div id="center"></div>    
</div>
<div id="left"></div>    
<div id="right"></div>    

<style>
    body {
        padding: 0;
        margin: 0;
    }
    #container {
        height: 100px;
        float: left;
        width: 100%;
        background-color: darkcyan;
    }
    #center {
        margin-left: 200px;
        margin-right: 200px;
    }
    #left {
        height: 100px;
        background-color: blue;
        float: left;
        width: 200px;
        margin-left: -100%;
    }
    #right {
        height: 100px;
        float: left;
        background-color: crimson;
        width: 200px;
        margin-left: -200px;
    }
</style>

3.flex布局

flex布局关键在于父容器使用display:flex；#center使用flex：1；

<div id="container">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

<style>
    body {
        padding: 0;
        margin: 0;
    }

    #container {
        display: flex;
    }
    #center {
        background-color: darkcyan;
        flex: 1;
    }

    #left {
        height: 100px;
        background-color: blue;
        width: 200px;
    }

    #right {
        height: 100px;
        background-color: crimson;
        width: 200px;
    }
</style>

4.相对定位布局

<div id="container">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

<style>
    body {
        padding: 0;
        margin: 0;
    }

    #container {
        position: relative;
    }
    #center {
        margin: 0 200px;
        background-color: darkcyan;
        width: 100%;
        height: 100px;
    }

    #left {
        height: 100px;
        background-color: blue;
        width: 200px;
        position: absolute;

    }

    #right {
        height: 100px;
        background-color: crimson;
        width: 200px;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

5.总结：

1.圣杯与双飞翼布局优点兼容性好，但是要把center放在前面，不符合开发布局的排列（从左到右），flex布局兼容性差，低版本不兼容，硬要说相对定位的缺点就是要外层添加一个父元素包裹元素。

以上即是解决三栏布局4中解决方法，圣杯与双飞翼也解决中间部分优先加载的问题，因为#center在前面，符合dom树渲染规则。

原文链接:https://blog.csdn.net/yuanqi3131/article/details/121719607