CSS

回顾div+css几种经典布局

Nick · 2月18日 · 2020年本文5264字 · 阅读14分钟899

三列布局

什么是三列布局
经典的三栏布局：左右量栏固定，中间宽度自适应
可以利用浮动，定位，fiex布局，gird布局等方法来实现
以下是几种可以实现三列布局的方法，各有优缺点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面布局</title>
    <style>
        html * {
            margin: 0px;
            padding: 0px;
        }
        body{
            min-width: 800px;
        }
    </style>
</head>

<body>
    <!--float布局-->
    <section>
        <style>
            .layout-float {
                margin-bottom: 10px;
            }

            .layout-float>div {
                height: 100px;
            }

            .left {
                float: left;
                width: 300px;
                background: red;
            }

            .right {
                float: right;
                width: 300px;
                background: blue;
            }

            .middle {
                background: yellow;
            }
        </style>
        <article class="layout-float">
            <div class="left"></div>
            <div class="right"></div>
            <div class="middle">float的三栏布局</div>
        </article>
    </section>
    <!--绝对定位-->
    <section>
        <style>
            .layout-position>div {
                height: 100px;
                position: absolute;
            }

            .left {
                left: 0;
                width: 300px;
                background: red;
            }

            .middle {
                left: 300px;
                right: 300px;
                background: yellow;
            }

            .right {
                right: 0px;
                width: 300px;
                background: blue;
            }
        </style>
        <article class="layout-position">
            <div class="left"></div>
            <div class="middle">position的三栏布局</div>
            <div class="right"></div>

        </article>
    </section>
    <!--flex布局-->
    <section>
        <style>
            .layout-flex {
                height: 100px;
                display: flex;
                margin-top: 120px;
            }

            .left {
                width: 300px;
                background: red;
            }

            .middle {
                flex: 1;
                background: yellow;
            }

            .right {
                width: 300px;
                background: blue;
            }
        </style>
        <article class="layout-flex">
            <div class="left"></div>
            <div class="middle">flex的三栏布局</div>
            <div class="right"></div>
        </article>
    </section>
    <!--grid布局-->
    <section>
        <style>
            .layout-grid {
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
                margin-top: 10px;
            }

            .left {
                background: red;
            }

            .middle {
                background: yellow;
            }

            .right {
                background: blue;
            }
        </style>
        <article class="layout-grid">
            <div class="left"></div>
            <div class="middle">grid的三栏布局</div>
            <div class="right"></div>
        </article>
    </section>
</body>

</html>

三列布局的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 800px;
        }
        .header {
            height: 50px;
            background-color: lightpink;
            text-align: center;
        }

        .left {
            float: left;
            background-color: #FFD700;
            height: 200px;
            width: 200px;
            text-align: center;
        }

        .right {
            float: right;
            background-color: #FFD700;
            height: 200px;
            width: 200px;
            text-align: center;
        }

        .middle {
            background-color: greenyellow;
            height: 200px;
            text-align: center;
            box-sizing: border-box;
        }

        .footer {
            background-color: #FFA500;
            clear: both;
            text-align: center;
        }
    </style>
</head>

<body>
    <header class="header">头部标签</header>
    <section class="container">
        <!-- 主题内容必须放在最后 -->
        <div class="right">右侧边栏</div>
        <div class="left">左侧边栏</div>
        <div class="middle">
            <p>主题内容</p>
            <p>主题内容</p>
            <p>主题内容</p>
        </div>
    </section>
    <footer class="footer">尾部区域</footer>
</body>

</html>

效果如下
回顾div+css几种经典布局-左眼会陪右眼哭の博客

圣杯布局

什么是圣杯布局
圣杯布局是三列布局的升级版，以上实现的三列布局是完全静态的，当元素溢出后，布局不会跟着拉伸，宽高是完全被固定好的，在某些效果上不适用，圣杯布局解决了这个问题。
圣杯布局的特点：
1. 两边固定，中间自适应
2. 当中列要显示完整
3. 当中列要优先加载
技术点：
浮动：搭建完整的技术框架
margin为负值：调整旁边两列的位置（使三列布局到一行上
使用相对定位：调整旁边两列的位置（使两列的位置调整到两头
等高布局
缺点：
用了定位
代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            min-width: 600px;
        }
        #header,
        #footer {
            height: 30px;
            text-align: center;
            border: 1px solid lightpink;
            background-color: gray;
        }

        #container {
            padding: 0 200px;
            overflow: hidden;
        }
        #container #middle {
            background: pink;
            width: 100%;
            float: left;
        }
        #container #left {
            position: relative;
            width: 200px;
            background: yellow;
            float: left;
            left: -200px;
            margin-left: -100%;
        }
        #container #right {
            position: relative;
            float: left;
            width: 200px;
            background: yellow;
            right: -200px;
            margin-left: -200px;
        }
        /* 等高布局 */
        #container #right,
        #container #left,
        #container #middle {
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        /* 清楚浮动 */
        .clearfix {
            *zoom: 1;
        }
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">header</div>
    <div id="container" class="clearfix">
        <div id="middle">
            <h3>middle</h3>
            <h3>middle</h3>
            <h3>middle</h3>
            <h3>middle</h3>
            <h3>middle</h3>
            <h3>middle</h3>
            <h3>middle</h3>
            <h3>middle</h3>
            <h3>middle</h3>
        </div>
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>

    </div>
    <div id="footer">footer</div>
</body>
</html>

效果如图
回顾div+css几种经典布局-左眼会陪右眼哭の博客

双飞翼布局

什么是双飞翼布局：
双飞翼布局跟圣杯布局相似，解决的三列布局的布局完全静态的问题，不同的是弥补圣杯布局中的缺点：用到了定位。（在最外层布局中尽量不要用到定位，因为里层的布局可能还会用到定位，最外层尽量保持纯净的文档流，不要产生层级关系）但是双飞翼布局增加了一层dom节点。
圣杯布局和双飞翼布局的对比:
1. 两种实现方式都是把主列放在文档流的最前面，是主列优先加载
2. 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局
3. 两种布局方式的不同之处在于如何处理中间主列的位置：
代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双飞翼布局</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        min-width: 600px;
    }

    /* 三列伪等高布局 */

    #container .middle,
    #container .left,
    #container .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
        /* height: 50px; */
        float: left;
    }

    /* 头部尾部布局 */

    #header,
    #footer {
        border: 1px solid rgb(119, 82, 82);
        background: pink;
        text-align: center;
    }

    /* 双飞翼布局 */

    #container {
        overflow: hidden;
    }

    #container .middle {
        background-color: deeppink;
        width: 100%;
    }

    /* 跟圣杯布局不一样的地方，没有使用定位，使用内部padding来布局，没有层级关系 */

    #container .middle .m-inner {
        padding: 0 200px;
    }

    #container .left,
    #container .right {
        background-color: pink;
        text-align: center;
        width: 200px;
    }

    #container .left {
        margin-left: -100%;
    }

    #container .right {
        margin-left: -200px;
    }
</style>
<body>
    <div id="header">header</div>
    <div id="container" class="clearfix">
        <div class="middle">
            <div class="m-inner">
                <h3>middle</h3>
                <h3>middle</h3>
                <h3>middle</h3>
                <h3>middle</h3>
                <h3>middle</h3>
                <h3>middle</h3>
                <h3>middle</h3>
                <h3>middle</h3>
                <h3>middle</h3>
            </div>
        </div>
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>
    <div id="footer">footer</div>
</body>
</html>

实现效果
回顾div+css几种经典布局-左眼会陪右眼哭の博客

总结

布局是前端的基本功，合理的运用盒子，边距，定位，浮动，才能更好的掌控文档流，

相关文章

新拟物化UI设计

8月13日 · 2021年

Get几个小技能——悬浮音乐播放器、字体压缩和打印效果

5月10日 · 2020年

get几个小技能：图标库使用技巧，css3文本小技巧

2月25日 · 2020年

wordpress字体样式——css炫酷的字体样式实现

1月28日 · 2020年
0 条回应
©2021版权所有
在线人数：1人 来访统计
说谎
林宥嘉
隐藏