zoukankan      html  css  js  c++  java
  • 前端知识整理-DIV+CSS 之页面布局

    终于收到了第一份面试邀请。

    时间是下周一。 也是为了验证自己的修炼水平 进行一下知识整理 顺带 查漏补缺 也给后来的同学 提供一些参考

    我们用实例来总结:

    假设 进行三栏布局 左右300px 中间自适应 我们有几种解决方案呢?

    第一种,我们用float

    第二种,我们用绝对布局

    以上两种过于简单 不解释了

    第三种,就是flaxbox了

    flexbox就是我心目中的最佳解决方案了,很多坑都是用flex来解决的 

    代码如下:

    <head>
    html *{
    display:flax;
    }
    .left{
    300px;
        }
    .center{
    flex:1;
    background:red;
    
    }
    .right{
    300px;
    }
    </head>
    
    
    <body>
    <div class="left"></div>
            <div class="center">
              <h2>flexbox解决方案</h2>
            </div>
            <div class="right"></div>
    </body>

    给所有HTML加上flax  然后给中间的加flax=1就行了 没有特别写的呢 默认都是0

    第四种:表格布局。

    解决思路就是给三个块加一个总width:100%  然后左右各300px 中间就是剩下的也是自适应 

    第五种 网格布局 这个我也不是很熟悉 

      100%;
              display: grid;
              grid-template-rows: 100px;
              grid-template-columns: 300px auto 300px;
    

      貌似这样加上所有块的css就行了

    总结一下:第一种第二种有各种缺憾 flax布局就是用来解决他们俩的缺陷的 但是flax比较新 我查了一下 兼容到IE10 也是一种遗憾吧

    第四种 表格布局大家都在摒弃  但是我用的挺顺手的 

    第五种:网格布局 感觉很简便 但是不熟悉 刚刚查的 

    大家还有什么好方法 或我哪里说的不对的请斧正

  • 相关阅读:
    uniapp数据循环带参数拼接方法
    UniApp页面跳转
    layui表单提交时关闭默认刷新页面
    js计时器
    Jquery 鼠标移入移出事件
    jquery常用ajax请求
    易宝网上支付接口的实现
    不使用缓存和不同缓存下程序的效率测试
    Mysql常见指令--常用的命令
    PHP冒泡与快速排序法
  • 原文地址:https://www.cnblogs.com/dash-soap/p/10013720.html
Copyright © 2011-2022 走看看