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

    display: grid;  
    //行
    
    //每一行中有几块,每块所占的width的百分比(1)
    grid-template-columns: 70% 30%; 
    
    //每个div的width 100px,自动排行,超出自动换行(1)
    grid-template-columns: repeat(auto-fill, 100px);
    
    //相当于一行有3个div ,他们的长度是百分比33.33% , 这个width是固定的不会随着内容而撑开 (1)
    grid-template-columns: repeat(3, 33.33%);
    
    //[]里面的值随便填,[a1]相当于这行第一个width100px , [a2]第二个100px [a3] 剩下的全是[a3]的
    grid-template-columns: [a1] 100px [a2] 100px [a3] auto;
    
    //上面的简洁版 表示第一div的长度100px 第二个div的长度自适应 第三个100px
    grid-template-columns: 100px auto 100px; 
    
    //minmax函数两个参数 第一个最小width值 第二个最大不能超过另外两个的长度
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);
    
    //fr相当于把剩下的width分成几份 2fr 1rf 相当于把剩下width分成3份 第一个div有2份
    grid-template-columns: 1fr 1fr;
    
    //行于行的间隔
    grid-row-gap: 20px; 
    //列与列的间隔
    grid-column-gap: 20px; 
    //他们可以简写成 div的两边还不会有间隔 只是内容与内容间的间隔,省略了第二个值,浏览器认为第二个值等于第一个值。
    grid-gap: 20px 20px; 
    

      

     
  • 相关阅读:
    contextMenu,右键菜单
    hashchange
    web攻击日志分析之新手指南
    工匠人生
    数学有卵用之通信篇
    精英主义(一)
    flaskbb部署笔记
    深入分析一波,你们说的云安全到底是什么鬼?
    Gh0st与云安全
    困境与突破
  • 原文地址:https://www.cnblogs.com/gfweb/p/10615728.html
Copyright © 2011-2022 走看看