页面布局——三栏布局

三栏布局

首先解释一下什么是“三栏布局”：顾名思义，三栏布局就是在网页上以平铺方式展现的左中右三列布局，其特点在于，左右两列可固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化（简单来说就是两端固定，中间自适应）。

下面围绕的这样的目的，罗列出大约7种解决方法(高度固定)：

浮动布局

浮动布局的优缺点

html代码：

<style>
    .container>div{min-height:200px}
    .container .left{float:left;300px;background:red}
    .container .center{background:#ff0}
    .container .right{float:right;300px;background:#00f}
</style>
<section class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</section>

缺点:1. 当宽度小于左右两边宽度之和时，右侧栏会被挤下去；2. html的结构不正确；3.脱离文档流，要处理浮动

优点：比较简单,兼容性好

绝对布局

绝对布局的优缺点

html代码：

<style>
    .container>div{min-height:200px;position:absolute}
    .container .left{left:0;300px;background:red}
    .container .center{left:300px;right:300px;background:#ff0}
    .container .right{right:0;300px;background:#00f}
</style>
<section class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</section>

缺点：因为布局已经脱离文档流了，意味着下面元素也需要脱离文档流，导致了可用性比较差

优点：快捷

圣杯布局

圣杯布局的优缺点

<style>
    .container{padding:0 300px}
    .container>div{min-height:200px;float:left;position:relative}
    .container .left{300px;background:red;margin-left:-100%;left:-300px}
    .container .center{100%;background:#ff0}
    .container .right{right:-300px;300px;margin-left:-300px;background:#00f}
</style>
<section class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</section>

缺点：当父元素有内外边距时，会导致中间栏的位置出现偏差

优点：兼容目前所有的主流浏览器，包括IE6在内；

双飞翼布局

双飞翼布局的优缺点

<style>
    .container div{min-height:200px;float:left}
    .container .left{300px;margin-left:-100%;background:red}
    .container .center{100%;background:#ff0}
    .container .center .center-wrap{margin:0 300px}
    .container .right{300px;margin-left:-300px;background:#00f}
</style>
<section class="container">
    <div class="center">
        <div class="center-wrap"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</section>

缺点：1. 结构不正确 2. 多了一层标签

优点：兼容目前所有的主流浏览器，包括IE6在内；

flex布局

flex布局的优缺点

html代码：

<style>
    .container{display:flex}
    .container>div{min-height:200px}
    .container .left{300px;background:red}
    .container .center{flex:1;background:#ff0}
    .container .right{300px;background:#00f}
</style>
<section class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>

缺点：需要考虑浏览器的兼容性

优点：简单实用，未来的趋势

表格布局

表格布局的优缺点

<style>
    .container{100%;display:table;min-height:200px}
    .container>div{display:table-cell}
    .container .left{300px;background:red}
    .container .center{background:#ff0}
    .container .right{300px;background:#00f}
</style>
<section class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>

缺点：无法设置栏间距

优点：兼容性非常好

网格布局

网格布局的优缺点

<style>
    .container{100%;display:grid;grid-template-rows:100px;grid-template-columns:300px auto 300px}
    .container .left{background:red}
    .container .center{background:#ff0}
    .container .right{background:#00f}
</style>
<section class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>

缺点：兼容性比较差

优点：代码简洁，容易理解