zoukankan      html  css  js  c++  java
  • CSS布局

    这是一个布局案例,其他的比如定宽布局,都可以按照这几个方法拓展。

    如下图所示的布局,高度已知的三栏布局,左栏,右栏各为300px,中间自适应。

    分析可给出五种解决方案,flex,float,绝对定位,表格布局,网格布局。

    下面所有方案的html通用部分:

    <div class="box">
        <div class="d1"></div>
        <div class="d2">
            <h1>flexbox解决方案</h1>
            <p>这里是内容</p>
        </div>
        <div class="d3"></div>
    </div>

    下面直接贴出各个方案的代码:

    1.利用flex布局

    css:

    .box{
        display: flex;
    }
    .box div{
        min-height: 100px;
    }
    .d1{
        background-color: blue;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 300px;
    }
    .d2{
        background-color: pink;
        flex-grow: 1;
        flex-shrink: 1;
    }
    .d3{
        background-color: blue;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 300px;
    }

    2.浮动解决方案

    css:

    .box div{
                min-height: 100px;
            }
            .left{
                float: left;
                width: 300px;
                background-color: blue;
            }
            .center{
                background-color: pink;
            }
            .right{
                float: right;
                width: 300px;
                background-color: blue;
            }

    3.绝对定位

    .box{
        position: relative;
    }
    .box div{
        min-height: 100px;
        position: absolute;
    }
    .left{
        background-color: blue;
        width: 300px;
        left: 0;
        top: 0;
    }
    .right{
        background-color: blue;
        width: 300px;
        right: 0;
        top: 0;
    }
    .center{
        left: 300px;
        right: 300px;
        background-color: pink;
    }

    4.表格

    .box{
        width: 100%;
        display: table;
    }
    .box div{
        min-height: 100px;
        display: table-cell;
    }
    .left{
        width: 300px;
        background-color: blue;
    }
    .right{
        width: 300px;
        background-color: blue;
    }
    .center{
        background-color: pink;
    }

    5.网格

    .box{
        display: grid;
        grid-template-columns: 300px auto 300px;
        grid-template-rows: 100px;
    }
    .left{
        background-color: blue;
    }
    .center{ 
        background-color: pink;
    }
    .right{
        background-color: blue;
    }

    以上方法最终浏览器显示效果:

    对于上述五中方法的优缺点讨论。

    浮动以后是脱离文档流的,处理不好会带来很多问题,这是局限性;优点:兼容性好。只要处理好清除浮动,处理好与周边元素关系的话这是很好的方案。

    绝对定位:优点,快捷,不容易出问题。缺点:布局脱离文档流。下面所有子元素也会脱离文档流,导致可使用性比较差。

    flex布局:是为了解决上述两个方案的不足而出现的,是比较完美的,现在的移动端基本是flex布局。这是非常重要的方案。

    表格布局:兼容性非常好。当用flex无法解决时,可以尝试用表格布局。缺点:会受到其他单元格的宽高改变的影响。

    但是如果抛弃高度已知,就只有表格和flex方法适用了。如下,其他方案就会出现问题。

  • 相关阅读:
    Leetcode 16.25 LRU缓存 哈希表与双向链表的组合
    Leetcode437 路径总和 III 双递归与前缀和
    leetcode 0404 二叉树检查平衡性 DFS
    Leetcode 1219 黄金矿工 暴力回溯
    Leetcode1218 最长定差子序列 哈希表优化DP
    Leetcode 91 解码方法
    Leetcode 129 求根到叶子节点数字之和 DFS优化
    Leetcode 125 验证回文串 双指针
    Docker安装Mysql记录
    vmware虚拟机---Liunx配置静态IP
  • 原文地址:https://www.cnblogs.com/PeriHe/p/8278020.html
Copyright © 2011-2022 走看看