三栏布局实现方式优缺点总结(圣杯和双飞翼重点)
Posted 六月June June
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三栏布局实现方式优缺点总结(圣杯和双飞翼重点)相关的知识,希望对你有一定的参考价值。
写给自己看的,你可能突然看会看不懂。
三栏布局就是两边固定,中间自适应这样的一种效果。实现这种效果的方法有很多,但对比下来发现较优方案还是圣杯和双飞翼。
目录
浮动实现
弊端:中间栏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>
以上是关于三栏布局实现方式优缺点总结(圣杯和双飞翼重点)的主要内容,如果未能解决你的问题,请参考以下文章