三栏布局实现方式优缺点总结（圣杯和双飞翼重点）

Posted 2022-11-24 六月June June

写给自己看的，你可能突然看会看不懂。

三栏布局就是两边固定，中间自适应这样的一种效果。实现这种效果的方法有很多，但对比下来发现较优方案还是圣杯和双飞翼。

目录

浮动实现

定位实现

flex实现

calc实现

圣杯布局（重点）

双飞翼布局（重点）

---

浮动实现

弊端：中间栏center必须放在最后，不能优先渲染，对SEO和无障碍方面有些影响。

<div class="box">
    <div class="left"></div>     /* 宽度固定，左浮动 */
    <div class="right"></div>    /* 宽度固定，右浮动 */
    <div class="center"></div>   /* 写margin给左右腾地儿 或 overflow:hidden;触发BFC不被左右覆盖 */
</div>

定位实现

弊端：大盒子box高度靠只能靠中间栏center来撑，导致可能出现侧边栏覆盖后面标准流(比如覆盖到footer上)。

两边栏绝对定位放在中间盒子的margin上

<div class="box">
    <div class="center"></div>	    /*不写宽度，写margin给左右腾地儿*/
    <div class="left"></div>		/*绝对定位，宽度固定*/
    <div class="right"></div>		/*绝对定位，宽度固定*/
</div>

两边栏绝对定位放在中间盒子的padding上，中间栏center宽度100%，用IE盒模型box-sizing:border-box;（该属性兼容到IE8）

<div class="box">
    <div class="center"></div>	    /*用IE盒模型 + 100%宽度 + padding给左右腾地儿*/
    <div class="left"></div>		/*绝对定位*/
    <div class="right"></div>		/*绝对定位*/
</div>

flex实现

flex兼容到IE11

<div class="box">					/*display:flex;*/
    <div class="left"></div>		/*宽度固定*/
    <div class="center"></div>	    /*不写宽度,写flex:1;*/
    <div class="right"></div>		/*宽度固定*/
</div>

calc实现

兼容到IE9

弊端：css中表达式尽量少写，因为渲染较慢

<div class="box">
    <div class="left fl"></div>		/*宽度固定*/
    <div class="center fl"></div>	/*宽度calc()动态计算长度值，自适应*/
    <div class="right fl"></div>	/*宽度固定*/
</div>

.center 
    /* calc动态计算长度值(运算度前后都要保留一个空格)，兼容到IE9 */
    width: calc(100% - 400px);     /*100%为屏幕宽度，400px为left和right的宽度之和*/
    ...

圣杯布局（重点）

全线兼容，且中间栏优先渲染，不会影响或覆盖后面标准流。

三栏全部浮动，

左右栏负margin配合相对定位方式来移到大盒子box的padding上，

      左栏margin-left:-100%; + 相对定位right:左栏宽度;

      右栏margin-right:-右栏宽度;

boy最好写个min-width，值为leftW*2+rightW

<div class="box clearfix">                   /*写padding给左右栏腾地儿*/
    <div class="center fl"></div>	/*宽度100%*/
    <div class="left fl"></div>		/*宽度固定*/
    <div class="right fl"></div>	/*宽度固定*/
</div>

双飞翼布局（重点）

与圣杯相似，只不过

      左栏不需要相对定位，直接margin-left:-100%;一步到位。

      右栏margin-left:-右栏宽度;

<div class="box clearfix">
    <div class="center fl">		    /*宽度100%*/
        <div class="content"></div>	/*宽度不写，写margin给左右腾地儿*/
    </div>
    <div class="left fl"></div>		/*宽度固定*/
    <div class="right fl"></div>	/*宽度固定*/
</div>