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;
        }

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