CSS布局笔记（2）

三栏布局（两端固定宽度，中间自适应）

1、利用position

代码如下：

<style>
        #left,#right{
            position: absolute;
            top: 0px;
            width: 200px;
            height: 100%;
        }

        #left{
            left: 0;
            background-color: coral;
        }
        #right{
            right: 0;
            background-color: #A7C942;
        }
        #main{
            margin: 0 210px;
            background-color: black;
            height: 100%;
        }
    </style>


<div id="left"></div>
    <div id="right"></div>
    <div id="main"></div>

注意：
1、左右两边采用绝对定位，已经脱离了文档流，所以main版块才是文档流，利用左右外边距使得被夹在中间，外边距和左右版块的差值就是空白。
2、main版块是文档流，必须把body、html的高度和main都设成100%，否则这个地方由于是空白块，中间部分高度将为0（只有main为100%是不行的）
3、div顺序可以换，不影响结果

2、利用float 布局

这是最简单直接的布局方法，代码如下：

<style>
        body{
            font-size: 20px;
        }
        #main{
            height: 200px;
            margin: 0 210px;
            background-color: #A7C942;
            color: white;
        }
        #left,#right{
            width: 200px;
            height: 200px;
            background-color: coral;
            color: white;
        }
        #left{
            float: left;
        }
        #right{
            float: right;
        }

    </style>

<div id="left">左边</div>
    <div id="right">右边</div>
    <div id="main">中间</div>

效果如图：

注意点：
1、同样是利用main区域的margin达到被夹在中间的目的
2、HTML源文件三个版块的顺序有要求，必须先把左右浮动元素排好再排文档流main元素，如果先排main效果如下：
原因很简单，先排文档流之后浮动元素一定是从文档流下方开始布局；反之，先排浮动元素，文档流还是从最顶处开始布局，因为浮动元素脱离了文档流。
3、问了稳妥起见，可以最后清除浮动元素

3、利用flex弹性盒子布局

以上两种方法都是利用block元素框的水平宽度要撑满整行，会随着父元素的大小而改变，而要达到这种效果，个人感觉一行只能有一个block，即自适应窗口只能有一个，其他的框要么浮动要么absolute，脱离文档流。当然，如果一行需要两个自适应框，我觉得还是要设置成inline-block，这样就可以一行多个 排列。

另一种方法是利用flex弹性盒子的分配功能：
代码如下：

    <style>
        body{
            font-size: 20px;
            display: flex;
        }
        #main{
            height: 200px;

            background-color: #A7C942;
            color: white;
            flex: 1 auto;

        }
        #left,#right{
            width: 200px;
            height: 200px;
            background-color: coral;
            color: white;
            flex: 0 auto;
        }


    </style>

<div id="left">左边哈哈哈放大答案阿凡达</div>
<div id="main">中间</div>
<div id="right">右边</div>

注意：
1、在比例分配的时候，中间main的flex参数设为1，左右设为0，实现在给左右固定宽度分外之后剩下的所有全给中间部分。
2、左右两边的宽度可以设置为200px，然后flex第二个参数设为auto；当然也可以直接把flex第二个参数设为200px，就不用设置宽度了；同时我发现flex的优先级似乎比width高，如果我把auto改为210px，保留width=200px，最后效果是210px。
3、这样设置出来是没有间隔的，可以在main区间设置margin左右边距来增加间隔。

GitHub代码地址：三栏布局练习