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

    grid布局:网格布局,通过在父元素上设置display:grid;来设置一个网格容器,内部的子元素采用网格的方式进行布局。

    fr单位:css自适应单位;在grid布局中如果一行分为四列,其中一列为固定width:100px,其他列都为1fr,那么1fr=(100% - 100px)/ 3。

    单元格:行和列形成的区域,类似表格的单元格。

    网格线:划分单元格的线,类似表格单元格之间的线。

    属性:(以下属性都设置在容器上)

    display:grid || inline-grid //grid=>grid容器区域是一个块级元素,会独占一行;inline-grid=>grid容器区域是个行类块元素,会与其他容器并排显示

    grid-template-columns:100px 1fr 1fr;//设置三列元素,第一列宽为100px,其他两列宽(100% - 100px)/ 2。如果设置了5列而实际只有三个元素也会预留位置;可以使用repeat(3,1fr)设置重复列。minmax(100px, 300px)设置宽度区间。

    grid-template-row:100px 1fr;//设置行高,计算方式和列相同。

    grid-auto-flow:columns || row;//默认元素按行排序渲染,设置为columns会按列排序渲染。

    justify-items:start || end || center || …;//容器内的子元素在其网格内水平显示方式:靠左,靠右,居中

    align-items:start || end || center || …;//容器内子元素在其网格内垂直显示方式:靠上,靠下,居中

    justify-content:start || end || center || …//容器内整体子元素水平显示方式

    align-content:start || end || center || … //容器内整体子元素垂直显示方式

    grid-gap:10px 10px;//设置子元素之间上下左右的距离,不包含和父元素的距离

  • 相关阅读:
    【转】关于char * 与 char[]
    网页打印js代码
    无法用排他锁锁定该数据库,以执行该操作。 (Microsoft SQL Server,错误: 5030)
    CKEditor使用笔记
    FormView作为单独编辑页笔记
    用WindowsMediaPlayer控件写个WinForm播放器
    ListView搭配DataPager控件实现分页笔记
    如何禁用ViewState
    C#获取本机IP搜集整理7种方法
    ListView高效率分页笔记
  • 原文地址:https://www.cnblogs.com/muzs/p/10678843.html
Copyright © 2011-2022 走看看