CSS布局——三栏布局

运用DIV+CSS布局对页面进行布局一直是个经典的问题，同时也是多数公司会出的面试笔试题

这篇文章主要介绍三栏布局，淘宝等网页都有采用过三栏布局，是网页布局的常用方式

三栏布局的要求就是两边固定，中间随浏览器宽度不同而自适应，实现这个效果有几种不同的方法，下面逐一列举

效果图

1.使用浮动的方法

        <div class="left"></div>        <div class="right"></div>        <div class="middle"></div>

        .left{            width: 100px;            height: 100px;            float: left;            background: red;        }        .right{            width: 100px;            height: 100px;            float: right;            background: blue;        }        .middle{            height: 100px;            margin: 0 100px;            background: green;        }

上面这是比较简单的一种是用浮动的方法，下面还有一种使用浮动的，据说是叫做双飞翼布局，可以区别一下

        <div class="main">            <div class="middle"></div>        </div>        <div class="left"></div>        <div class="right"></div>

        .left{            width: 100px;            height: 100px;            float: left;            background: red;            margin-left: -100%;        }        .right{            width: 100px;            height: 100px;            float: right;            background: blue;            margin-left: -100px;        }        .main{            float: left;            width: 100%;        }        .middle{            height: 100px;            margin: 0 100px;            background: green;        }

发现没有，首先是结构上发生了区别，必须注意，结构不能轻易改变

这个方法主要是通过全部浮动，而且通过margin负值来实现的，主内容区还外包裹了一个新容器

这个Div很重要，不包裹的话margin值不会起作用，只会对浏览器左边产生margin值

简单的理解就是三个区现实因为浮动顺序是中间左边右边，因为中间容器具有了宽度，在改变中间内容区相对于浏览器两边位置后

利用margin来改变视觉上的浮动顺序

2.使用绝对定位

除了浮动以外，还可以使用绝对定位的方法来进行布局

这个方法比较好理解，实用性强

        <div class="middle"></div>        <div class="left"></div>        <div class="right"></div>

        .left{            width: 100px;            height: 100px;            background: red;            position: absolute;            left: 0;            top: 0;        }        .right{            width: 100px;            height: 100px;            background: blue;            position: absolute;            right:0;            top: 0;        }        .middle{            height: 100px;            margin: 0 100px;            background: green;        }

上面是我了解的几种三栏布局的方法，当然方法不止有这几种，等我学习以后继续更新哈