CSS:三栏布局

作者: 肆意咯咯咯 | 来源:发表于2018-05-02 17:17 被阅读0次

文章收藏
css
css flex布局详解
经典CSS布局：双飞翼和圣杯布局
圣杯布局2019-12-18
##深入学习CSS布局系列（一）布局常用属性
块状元素和内联元素、盒子模型
CSS布局
CSS Grid 布局完全指南1-grid基础知识
CSS布局

1.position:absolute;定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,html{
                width:100%;
                height:100%;
                padding:0;
                margin:0;
            }
            .parent{
                width:100%;
                height:100%;
            }
            .left{
                width:100px;
                height:100%;
                background-color:peachpuff;
                position: absolute;
                left:0;top:0;
            }
            .right{
                width:100px;
                height:100%;
                background-color:peachpuff;
                position: absolute;
                right:0;top:0;
            }
            .center{
                height:100%;
                margin:0 100px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="left">left</div>
            <div class="center">center</div>
            <div class="right">right</div>
        </div>
    </body>
</html>

注意：中间元素使用margin给左右元素留出位置；

2.float左右浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            body,html{
                height:100%;
            }
            .parent{
                width:100%;
                height:100%;
            }
            .left{
                width:100px;
                height:100%;
                float:left;
                background-color:blanchedalmond;
            }
            .right{
                width:100px;
                height:100%;
                float:right;
                background-color:blanchedalmond;
            }
            .center{
                                width:100%;
                height:100%;
                margin:0 100px;
                background-color:plum;
            }
            
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="center">center</div>
        </div>
    </body>
</html>

注意：中间元素必须放在最后；

3.flex:1;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            body{
                width:100%;
                height:100%;
                display:flex;
                flex-direction: column;
            }
            header,footer{
                width:100%;
                background-color:mediumspringgreen;
                flex:0 0 100px;
            }
            .parent{
                width:100%;
                display:flex;
                flex-direction: row;
                flex:1;
            }
            
            .left,.right{
                flex:0 0 100px;
                /*height:800px;*/
                background-color:aquamarine;
                
            }
            .center{
                background:red;
                height:1000px;

        /* 
        横向中间内容区自适应，即使未指定宽度，但会分配宽度 
        块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
        */
                flex:1;
            }
        </style>
    </head>
    <body>
        <header>header</header>
        <section>
            <div class="parent">
                <div class="left">left</div>
                <div class="center">center</div>
                <div class="right">right</div>
            </div>
        </section>
        <footer>footer</footer>
    </body>

注意：如果把center写在前面，则需要注意left将会在它的后面排列，则需将left元素的order属性设为-1;
.left{
order:-1;
}
使其排列在center前面；
接下来说一下三栏布局的两种经典：圣杯布局和双飞翼布局；
圣杯布局
 双飞翼布局