《前端面试》必问的5种三栏布局精髓！！！

作者: MrHu1 | 来源:发表于2019-05-14 21:02 被阅读0次

2020-01-19做些js的数组练习吧
《前端面试》必问的5种三栏布局精髓！！！
圣杯布局和双飞翼布局（前端面试必看）
web前端入门到实战：圣杯布局和双飞翼布局
前端面试必问--盒子模型布局
前端面试必问的
前端面试必问内容
前端面试必问总结
圣杯布局
前端面试必问之Webpack

一、浮动解决方案

    <style>
        html,body{
            padding: 0;
            margin: 0;
        }
        
        /* 浮动布局 */
        #left,#right{
            width: 300px;
            height: 200px;
            background-color: #ffe6b8;
        }
        #left{
            float: left;
        }

        #right{
            float: right;
        }

        #center{
            height: 500px;
            overflow: hidden;
            background-color: #a0b3d6
        }
    </style>
</head>

<body>
    <div id="left">我是左边</div>
    <div id="right">我是右边</div>
    <div id="center">我是中间</div>
</body>

</html>

二、弹性盒子布局

 <style>
        body {
            padding: 0;
            margin: 0;
        }
        /* 弹性盒子布局 */
        #box{
            display: flex;
            width: 100%;
            height: 300px;
        }
        #left,#right{
            height: 300px; 
            width: 300px;
            background: blue;
        }
        #center{
            flex: 1;
            height: 300px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="left">我是左边</div>
        <div id="center">我是中间</div>
        <div id="right">我是右边</div>
    </div>
</body>

三、圣杯布局

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            padding: 0 220px;
        }
        html,body{
            width: 100%;
        }
        #left,#center,#right{
            min-height: 150px;
        }
        #left,#right{
            width: 220px;
        }
        #left{
            margin-left: -220px;
            background: green;
        }
        #center{
            width: 100%;
            background: darkcyan;
        }
        #right{
            margin-right: -220px;
            background: darkmagenta;
        }
        #left,#center,#right{
            float: left;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>

四、双飞翼布局

<style>
        body{
            padding: 0;
            margin: 0;
        }
        .left,.main,.right{
            float: left;
            min-height: 200px;
            text-align: center;
        }
        .left{
            margin-left: -100%;
            width: 300px;
            background: blue;
        }
        .right{
            margin-left: -300px;
            width: 300px;
            background: pink;
        }
        .main{
            width: 100%;
            background: green;
        }
        .content{
            margin: 0 300px 0 300px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main">
            <div class="content">middle</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

五、网格布局

<body>
    <!-- 网格布局的解决方案     -->
    <div class="layout grid">
        <style>
            .layout.grid .left-center-right {
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }
    
            .layout.grid .left {
                background: red;
            }
    
            .layout.grid .center {
                height: 500px;
                background: yellow;
            }
    
            .layout.grid .right {
                background: blue;
            }
        </style>
        <div class="left-center-right">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
    </div>
</body>