grid网格布局

最新推荐文章于 2024-06-19 23:31:32 发布

咩有猫腻.

最新推荐文章于 2024-06-19 23:31:32 发布

阅读量254

点赞数

分类专栏： html、css 文章标签： html html5 css css3

本文链接：https://blog.csdn.net/DcTbnk/article/details/104751786

版权

html、css 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

1. outline: none;
chrome浏览器选中选中元素的默认蓝色框框。

2. grid网格布局

**作用在==父==容器上的：**

        display : grid
        grid-template-columns : 设置列数
        grid-template-rows : 设置行数
            fr单位
            repeat()方法
            注：网格中提供了一个新的单位：fr ( 比例单位 )
        grid-template-areas : 划分区域的
            注：区域必须是矩形。
        grid-template:复合写法
            grid-template-rows
            grid-template-columns
            grid-template-areas

            grid-template: 
            "a1 a1 a1" 1fr
            "a3 a3 a2" 1fr
            "a3 a3 a2" 1fr
            /1fr 1fr 1fr;

        grid-column-gap : 列的间距
        grid-row-gap : 行的间距
        grid-gap : 复合写法
            grid-row-gap  grid-column-gap

        justify-items : 子项的水平居中方式
            默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。
            start
            center
            end

        align-items : 子项的垂直居中方式
            默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。
            start
            center
            end
        place-items : 复合写法
            align-items justify-items

        justify-content : 整体网格的水平对齐方式
             默认：stretch
             start
             end
             center
             space-between
             space-around
             space-evenly

        align-content : 整体网格的垂直对齐方式
            默认：stretch
             start
             end
             center
             space-between
             space-around
             space-evenly

        place-content : 复合写法
            align-content justify-content

    
 

**作用在==子==项上的：**

        grid-area : 找指定的区域
            1.对应网格的名字
            2.写对应的线的数字：grid-area : 1 / 3 / span 2 / 4; 
                grid-row-start / grid-column-start / grid-row-end / grid-column-end

        grid-column-start  水平方向上占据的起始位置
        grid-column-end    水平方向上占据的结束位置
        grid-row-start     垂直方向上占据的起始位置
        grid-row-end       垂直方向上占据的结束位置
            注：只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。 
                正常数字是位置，加上span是个数。

        grid-column:3 / 4;
            grid-column-start / grid-column-end
        grid-row:1 / span 2;
             grid-row-start / grid-row-end

        justify-self
        algin-self
        place-self