重学前端之CSS(六)CSS经典布局

这篇文章主要介绍CSS中的一些经典布局,其中包括垂直居中布局、两列布局、三列布局、圣杯布局和双飞翼布局、Sticky footer布局。

垂直居中布局

垂直居中布局: 元素在容器的中间显示。

    // 公用的CSS和HTML
    /* CSS */
    .wrap {
        width: 300px;
        height: 300px;
        border: 1px solid lightblue;
    }
    .item {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
    }
    <!-- HTML -->
    <div class="wrap">
        <div class="item"></div>
    </div>

1) 使用flex

    .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
    }

2) 使用定位和margin

    .wrap {
        position: relative;
    }
    .item {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

3) 利用定位和移动子元素的位置实现

    .wrap {
        position: relative;
    }
    .item {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* 另一种 */
    .item {
        position: absolute;
        top: 100px;
        left: 100px;
    }

    /* 另一种 */
    .item {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }

4) 利用display和vertical-align进行垂直居中

    .wrap {
        display: table-cell;
        vertical-align: middle;
    }
    .item {
        margin: 0 auto;
    }

5) 利用padding来使其居中

    .wrap {
        padding: 99px;
        box-sizing: border-box;
    }

两列布局

两列布局: 左侧固定，右侧自适应。

    /* CSS */
    body {
        margin: 0;
    }

    .left {
        width: 100px;
        height: 500px;
        background-color: lightskyblue;
    }
    .right {
        height: 600px;
        background-color: yellowgreen;
    }
    <!-- HTML 外面一层wrap只是为了一些方法使用，没有设置wrap样式的就说明不需要这一层-->
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
    </div>

1) 利用浮动和margin

    .left {
        float: left;
    }
    .right {
        margin-left: 100px;
    }

2) 利用浮动和BFC

    .left {
        float: left;
    }
    .right {
        /* overflow: scroll; */
        /* overflow: auto; */
        overflow: hidden;
    }

3) 利用浮动和calc

    .left {
        float: left;
    }
    .right {
        float: left;
        width: calc(100% - 100px);
    }

4) 利用定位

    .wrap {
        position: relative;
    }
    .left {
        position: absolute;
        top: 0;
    }
    .right {
        margin-left: 100px;
    }

5) 利用弹性盒

    .wrap {
        display: flex;
    }
    .right {
        flex: 1;
    }

6) 利用网格

    .wrap {
        display: grid;
        grid-template-columns: 100px auto;
    }

三列布局

三列布局: 左右元素宽度固定，中间自适应。

    /* CSS */
    .left, .right {
        width: 100px;
        height: 500px;
        background-color: lightskyblue;
    }
    .center {
        height: 600px;
        background-color: yellowgreen;
    }
    <!-- HTML -->
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

1) 利用浮动和margin

    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .center {
        margin: 0 100px;
    }

2) 利用定位和margin

    .wrap {
        position: relative;
    }
    .left {
        position: absolute;
    }
    .right {
        position: absolute;
        right: 0;
    }
    .center {
        margin: 0 100px;
    }

3) 利用弹性盒

    .wrap {
        display: flex;
    }
    .right {
        order: 1;
    }
    .center {
        flex: 1;
    }

4) 利用网格

    .wrap {
        display: grid;
        grid-template-columns: 100px  auto 100px;
        grid-template-areas: 'a b c';
    }
    .right {
        grid-area: c;
    }

5) 圣杯布局和双飞翼布局

圣杯布局和双飞翼布局

一、特点
圣杯布局和双飞翼布局: 都是为了实现两侧宽度固定，中间部分宽度自适应。中间部分在DOM结构上优先，以便于先行渲染。
二、圣杯布局
圣杯布局: 利用margin和定位来实现布局，需要设置页面的最小宽度，不然当页面宽度过小时，页面布局就会乱。这个宽度为左元素宽度 * 2 + 右元素宽度。因为左元素使用了 position:relative，所以中间区域一直存在一个左元素的宽度。

    /* CSS */
    body {
        margin: 0;
        min-width: 600px; /*这里为 left * 2 + right*/
    }
    .fl {
        float: left;
    }
    .clearfix {
        zoom: 1;
    }
    .clearfix::after {
        display: block;
        height: 0;
        content: "";
        visibility: hidden;
        clear: both;
    }

    .header, .footer {
        line-height: 40px;
        background-color: lightgray;
        text-align: center;
    }
    .container {
        padding: 0 200px;
    }
    .center {
        width: 100%;
        height: 500px;
        background-color: yellowgreen;
    }
    .left {
        position: relative;
        left: -200px;
        width: 200px;
        height: 300px;
        background-color: lightblue;
        margin-left: -100%;
    }
    .right {
        margin-right: -100%;
        width: 200px;
        height: 300px;
        background-color: lightcoral;
    }
    <!-- HTML布局 -->
    <div class="header">header</div>
    <div class="container clearfix">
        <div class="center fl"></div>
        <div class="left fl"></div>
        <div class="right fl"></div>
    </div>
    <div class="footer">footer</div>

三、双飞翼布局
双飞翼布局: 和圣杯布局相比，它在center外加了一层，主要利用margin和float来实现，也需要设置页面最小宽度，以避免页面错乱。

    /* CSS */
    body {
        margin: 0;
        min-width: 400px;
    }
    .fl {
        float: left;
    }
    .clearfix {
        zoom: 1;
    }
    .clearfix::after {
        display: block;
        height: 0;
        content: "";
        visibility: hidden;
        clear: both;
    }

    .header, .footer {
        line-height: 40px;
        background-color: lightgray;
        text-align: center;
    }
    .left {
        margin-left: -100%;
        width: 200px;
        height: 500px;
        background-color: lightblue;
    }
    .container {
        width: 100%;
    }
    .center {
        margin: 0 200px;
        height: 500px;
        background-color: lightcoral;
    }
    .right {
        margin-left: -200px;
        width: 200px;
        height: 500px;
        background-color: yellowgreen;
    }
    <!-- HTML -->
    <div class="header">header</div>
    <div class="clearfix">
        <div class="container fl">
            <div class="center"></div>
        </div>
        <div class="left fl"></div>
        <div class="right fl"></div>
    </div>
    <div class="footer">footer</div>

参考来源: 圣杯布局和双飞翼布局的理解与思考

Sticky footer布局

Sticky footer: 如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

    /* 公共样式 */
    * {
        margin: 0;
        padding: 0;
    }
    .footer {
        text-align: center;
    }
    .main {
        background-color: #ddd;
    }
    .footer {
        background-color: lightblue;
    }

1) 利用flex

    /* CSS */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    .main {
        flex: 1;
    }
    .footer {
        font-size: 1rem;
    }

    <!-- HTML -->
    <div class="main"></div>
    <div class="footer">有意思公司&copy;2019-2030</div>

2) 利用负margin-bottom + 占位div(高度和负margin-bottom一样) + 固定高度的footer(和margin-bottom一样)

    /* CSS */
    html,
    body {
        height: 100%;
    }

    .main {
        min-height: 100%;
        margin-bottom: -40px;
    }
    .footer {
        height: 40px;
    }
    .placeholder {
        height: 40px;
    }
    <!-- HTML -->
    <div class="main">
        <div class="placeholder"></div>
    </div>
    <div class="footer">有意思公司&copy;2019-2030</div>

3) 利用占位div(高度和footer一样) + 固定高度的footer(margin-top的值为负height)

    /*  */
    .main {
        min-height: 100%;
    }
    .placeholder {
        padding-bottom: 40px;
    }
    .footer {
        margin-top: -40px;
        height: 40px;
    }

4) 最外层relative + padding-bottom预留底部空间 + 底部absolute来定位在底部

    /* CSS */
    .wrap {
        position: relative;
        min-height: 100%;
        padding-bottom: 40px;
        box-sizing: border-box;
    }
    .main {
        min-height: 100%;
    }
    .footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
    }
    <!-- HTML -->
    <div class="wrap">
        <div class="main"></div>
        <div class="footer">有意思公司&copy;2019-2030</div>
    </div>

5) 利用calc()属性

    /* CSS */
    .main {
        min-height: calc(100% - 40px);
    }
    .footer {
        height: 40px;
    }

    <!-- HTML -->
    <div class="main"></div>
    <div class="footer">有意思公司&copy;2019-2030</div>

6) 利用table属性使得页面以表格的形态呈现

    /* CSS */
    .wrapper {
        display: table;
        width: 100%;
        min-height: 100%;
    }
    .main {
        display: table-row;
        height: 100%;
    }

    <!-- HTML -->
    <div class="wrapper">
        <div class="main"></div>
        <div class="footer">有意思公司&copy;2019-2030</div>
    </div>

7) 使用Grid网格布局

    /* CSS */
    .wrapper {
        display: grid;
        min-height: 100%;
        grid-template-rows: 1fr auto;
    }
    .footer {
        grid-row-start: 2;
        grid-row-end: 3;
    }
    <!-- HTML -->
    <div class="wrapper">
        <div class="main"></div>
        <div class="footer">有意思公司&copy;2019-2030</div>
    </div>

参考链接: 各种CSS实现Sticky Footer

这篇文章就是CSS系列的最后一篇了。以上内容如有不对,希望大家指出,谢谢。

重学前端之CSS(六)CSS经典布局

垂直居中布局

两列布局

三列布局

圣杯布局和双飞翼布局

Sticky footer布局

雨夜望月

引用和评论

重学前端之JavaScript(五)JavaScript中的相关问题

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合