css三栏布局

前言

    最近在学习前端，本着学习的精神写下自己学过的东西以后可以参考。

三栏布局是常见的布局方式，应用场景：左、右两侧是定宽的导航栏，中间内容自适应。

    比较简单的就是左边的往左浮动，右边的右浮动，最后渲染中间的

*{
    margin: 0;
    padding: 0;
}
.left{
    float: left;
    width:100px;
    height: 200px;
    background-color: tomato;
}
.right{
    float: right;
    width:100px;
    height: 200px;
    background-color: yellowgreen
}
.center{
    height: 200px;
    background-color: aqua
}

可以在center中设置margin来让center与两边的元素产生距离。

BFC三栏布局跟流动式布局差不多，给center加了overflow：hidder，产生BFC，center的大小不能与浮动重叠。

    
left
    
right
    
center

*{
    margin: 0;
    padding: 0;
}
.left{
    float: left;
    width:100px;
    height: 200px;
    background-color: tomato;
}
.right{
    float: right;
    width:100px;
    height: 200px;
    background-color: yellowgreen
}
.center{
    overflow: hidden;
    height: 200px;
    background-color: aqua
}

这两种布局都是先渲染左右的div然后渲染中间的，而现实中我们总是想要先渲染中间位置的div。

    圣杯布局

    三栏布局在web设计中，有很多解决方案但是每种方案都有缺点，所以业界对于完美解决三栏布局的方案称为圣杯布局。不过，目前已经有个哥们给出了一种较好三栏布局解决方案，并得到广泛的认同，所以这个解决方案被为圣杯布局。

    圣杯布局是让三个元素都左浮动，先写中间div，让其margin值左右偏移从而给出左右两端的宽度。两边div进行浮动，然后相对center进行margin偏移。

*{
    padding: 0;
    margin: 0;
}
#container{
    padding-left: 120px;
    padding-right: 120px;
}
#container:after{
    content: "";
    display: block;
    clear: both;
}
#left{
    float: left; 
    position: relative;
    left: -120px;
    margin-left: -100%;
    width: 100px;
    height: 200px;
    background-color: salmon;

}
#right{
    float: left; 
    position: relative;
    left: 120px;
    width:100px;
    height: 200px;
    margin-left: -100px;
    background-color: royalblue;
}
#center{
    float: left; 
    width:100%;
    height: 200px;
    background-color: powderblue;
}

圣杯布局主要是利用相对位置进行位置偏移。

双飞翼布局

    双飞翼布局是出自淘宝前端UED团队，它跟圣杯模式相类似，主要区别是少了position，在center上多了个div。在子div设置margin来为左右流出位置。左右div只要设置margin负值即可实现。

*{
    margin: 0;
    padding:0;
}
.left{
    float: left;
    margin-left: -100%;
    width: 100px;
    height: 200px;
    background-color: powderblue;
}
.right{
    float: left;
    margin-left: -100px;
    width: 100px;
    height: 200px;
    background-color: palegoldenrod;
}
.sub{
    margin-left: 120px;
    margin-right: 120px;
    height: 200px;
    background-color: seagreen;
}
.center{
    width: 100%;
    float: left;
}
.clearfix{
    content: "";
    display:block;
    clear: both;
}

双飞翼布局就是让center外包一层div，让外层div占据所有宽度，而根据center来进行margin负值偏移。

flex布局

flex布局是css3力推的布局方案

    

            
conter
        
left
        
right
    

*{
    margin: 0;
    padding:0;
}
.flex{
    width:100%;
    height: 200px;
    display: flex;
}
.flex .left{
    /* flex=flex-grow,flex-shrink,flex-basis
    flex-grow定义项目放大比例 默认值0
    flex-shrink定义项目缩小比例 默认值1
    flex-basis定义分配空间大小 默认值auto
    */
    flex: 0 1 100px;
    background-color: rgb(0, 255, 42);
    margin-right: 20px;
    order:-1;
}
.flex .right{
    order:1;
    flex: 0 1 100px;
    margin-left: 20px;
    background-color: rgb(0, 255, 200);
}
.flex .center{
    flex-grow: 1;
    background-color:rgb(80, 213, 247);
}

需要看详细的属性请Flex 布局教程：语法篇