css三栏布局

最新推荐文章于 2023-06-23 19:33:50 发布

名小楼一夜听风雨

最新推荐文章于 2023-06-23 19:33:50 发布

阅读量247

点赞数

文章标签： HTMl CSS css布局

本文链接：https://blog.csdn.net/s15085276473/article/details/79422171

版权

前言

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

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

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

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</body>

*{
    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的大小不能与浮动重叠。

<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

*{
    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偏移。

    <div id="header"></div>
        <div id="container" class="column">
            <div id="center" class="column"></div>
            <div id="left" class="column"></div>
            <div id="right" class="column"></div>
        </div>
        
    <div class="footer"></div>

*{
    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负值即可实现。

<body>
    <div class="clearfix">
        <div class="center">
            <div class="sub"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

*{
    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力推的布局方案

<body>
    <div class="flex">
            <div class="center">conter</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

*{
    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);
}