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

Posted 六月June June

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三栏布局实现方式优缺点总结(圣杯和双飞翼重点)相关的知识,希望对你有一定的参考价值。

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

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

目录

浮动实现

定位实现

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>

 

 

以上是关于三栏布局实现方式优缺点总结(圣杯和双飞翼重点)的主要内容,如果未能解决你的问题,请参考以下文章

经典三栏布局之圣杯双飞翼弹性布局

实现三栏布局的六种方式

面试官问:你有多少种方式实现三栏布局?

使用‘圣杯布局’‘双飞翼布局’来解释自适应的三栏水平布局

三栏布局的五种方式&圣杯布局和双飞燕布局

双飞翼布局以及圣杯布局