• 布局:高度已知,布局一个三栏布局,左栏和右栏宽度为200px,中间自适应


    需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示:

    方法一:float浮动布局

    原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为200px,然后设置左边栏宽度为200px并且float:left,设置右边栏宽度为200px并且float:right

    优点:兼容性比较好

    缺点:float会脱离文档流,需要处理float周边的元素比如清除浮动

    浮动布局的原理:查看浮动布局详解

    <style>
        html *{
            padding: 0;
            margin: 0;
        }
        .layout article div{
            min-height: 200px;
        }
        .left{
            width: 200px;
            float: left;
            background-color: red;
        }
        .right{
            width: 200px;
            float: right;
            background-color: blue;
        }
        .center{
            background-color: green;
        }
    </style>
    <body>
        <section class="layout float">
            <article class="left-right-center">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center">浮动解决方案</div>
            </article>
        </section>
    </body>

    效果如下:拉动浏览器窗口的时候,中间宽度自动变化,左右边栏不会变化

    当center这个元素里面的内容超过设置的这个高度,会出现如下这样的问题

    解决办法可以在center中添加一个属性:overflow: hidden;后效果如下:

    所以当高度不确定的时候,这种布局方式不适用,左右两边的高度不会跟着变动

    方法二:绝对定位布局

    实现原理:设置三个区块分别左中右,并且统一设置高度为200px和绝对定位,左边栏left:0,右边栏right:0,最重要的是中间的区块,不设置宽度,并且设置left:200px,right:200px,这个定位的数值也就是左边栏和右边栏的宽度大小

    优点:快捷,不容易出问题

    缺点:定位会脱离文档流,那么后面的元素也都是要脱离文档流的,这个方式的可使用性比较差

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        html *{
            padding: 0;
            margin: 0;
        }
        .layout article div{
            min-height: 200px;
            position: absolute;
        }
        .left{
            width: 200px;
            left: 0;
            background-color: red;
        }
        .right{
            right: 0;
            width: 200px;
            background-color: blue;
        }
        .center{
            background-color: green;
            left: 200px;
            right: 200px;
        }
    </style>
    <body>
        <section class="layout absolute">
            <article class="left-right-center">
                <div class="left"></div>
                <div class="center">绝对定位解决方案</div>
                <div class="right"></div>
            </article>
        </section>
    </body>
    </html>

    效果如下:拉动浏览器窗口的时候,中间宽度自动变化,左右边栏不会变化

    方法三:flexbox布局方式

    实现原理:首先定义三个区块,分别为左中右,并且统一设置高度为200px,然后在这三个区块的父元素中设置display:flex,设置左边栏和右边栏宽度为200px,中间区块设置flex:1

    优点:比较完美的一种方式,在移动端基本都是使用这个布局方式,这是css3中的新的布局方式,当设置最小高度后,中间区块内容溢出时高度会自动撑开,左右两边的高度也可以跟着撑开

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        html *{
            padding: 0;
            margin: 0;
        }
        .layout.flexbox article div{
            min-height: 200px;
        }
        .layout.flexbox .left-right-center{
            display: flex;
        }
        .left{
            width: 200px;
            background-color: red;
        }
        .right{
            width: 200px;
            background-color: blue;
        }
        .center{
            background-color: green;
            flex: 1;
        }
    </style>
    <body>
        <section class="layout flexbox">
            <article class="left-right-center">
                <div class="left"></div>
                <div class="center">flexbox解决方案</div>
                <div class="right"></div>
            </article>
        </section>
    </body>
    </html>

    效果如下:拉动浏览器窗口的时候,中间宽度自动变化,左右边栏不会变化

    方法四:表格布局方式

    实现原理:定义三个区块,并且统一设置高度为200px和display:table-cell,然后左边栏和右边栏宽带设置为200px,中间区块不设置宽度,最后需要在这三个区块的父元素上设置100%和display:table

    优点:兼容性非常好,在IE8也是可以的,弥补flexbox布局在IE8下的不支持

    缺点:当某个区块高度不足的时候(固定高度),其他区块也跟着需要调整高度,但有这种需求就是其他区块不想跟着调整高度,这就是这个布局的缺点

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        html *{
            padding: 0;
            margin: 0;
        }
        .layout.table article div{
            display: table-cell;
            height: 200px;
        }
        .layout.table .left-right-center{
            display: table;
            width: 100%;
        }
        .left{
            width: 200px;
            background-color: red;
        }
        .right{
            width: 200px;
            background-color: blue;
        }
        .center{
            background-color: green;
        }
    </style>
    <body>
        <section class="layout table">
            <article class="left-right-center">
                <div class="left"></div>
                <div class="center">表格布局解决方案</div>
                <div class="right"></div>
            </article>
        </section>
    </body>
    </html>

    方法五:网格布局

    实现原理:定义三个区块分别为左边栏,中间区块,右边栏,然后再父元素上设置display:grid,grid-template-rows: 200px;(设置格子的高度),grid-template-columns: 200px auto 200px;(这里表示有三列,第一列和第三列的宽度为200px,第二列自动)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        html *{
            padding: 0;
            margin: 0;
        }
        .layout.grid .left-right-center{
            width:100%;
            display: grid;
            grid-template-rows: 200px;
            grid-template-columns: 200px auto 200px;
        }
        .left{
            background-color: red;
        }
        .right{
            background-color: blue;
        }
        .center{
            background-color: green;
        }
    </style>
    <body>
        <section class="layout grid">
            <article class="left-right-center">
                <div class="left"></div>
                <div class="center">网格布局解决方案</div>
                <div class="right"></div>
            </article>
        </section>
    </body>
    </html>

    效果如下:效果如下:拉动浏览器窗口的时候,中间宽度自动变化,左右边栏不会变化

    需求:如果高度不确定,那么上述的布局方式哪个还可以适用

    flexbox布局和table布局是可以通用的,会自动增加高度(三个区块都会自动增加高度)

    网格布局:高度不会自动增加,里面的内容会溢出,但可以不设置grid-template-rows: 200px;这个属性的话,三列都会随着内容而增高,并且可以设置三个区块的最小高度

    <style>
        html *{
            padding: 0;
            margin: 0;
        }
        .layout.grid .left-right-center{
            width:100%;
            display: grid;
            min-height: 100px;
            grid-template-columns: 200px auto 200px;
        }
        .left{
            background-color: red;
        }
        .right{
            background-color: blue;
        }
        .center{
            background-color: green;
        }
    </style>
    <body>
        <section class="layout grid">
            <article class="left-right-center">
                <div class="left"></div>
                <div class="center">
                    <p>flexbox解决方案</p>
                    <p>flexbox解决方案</p>
                    <p>flexbox解决方案</p>
                </div>
                <div class="right"></div>
            </article>
        </section>
    
    </body>

    浮动布局:会出现下面这种情况

    因为浮动的原理,中间区块的内容被区块1挡住了,当内容超出以后,没有了遮挡物,所以就出现了这种情况,解决这种问题需要使用BFC(查看盒子模型和弹性盒子模型的详解

    绝对定位:比如讲center里的内容增加,超过高度后这个区块自动增加,但是其他区块是不会自动增加的

  • 相关阅读:
    第十八章所有者权益部分考点知识点
    会计基础模拟练习一(3)
    会计基础模拟练习一(2)
    会计基础模拟练习一(1)
    第三章 复式记账
    第二章 会计科目和账户 笔记
    【Flink系列一】Flink开启Checkpoint,以及从Checkpoint恢复
    【已解决】解决Gradle在使用代理的情况下访问中央仓库返回403 Forbidden的问题
    Surface Laptop 3三个月使用心得
    Spring跨系统转发HTTP请求的简易实现(支持下载文件二进制流)
  • 原文地址:https://www.cnblogs.com/LO-ME/p/7374350.html
Copyright © 2020-2023  润新知