体验css：repeat和grid

news2024/10/5 14:14:22

文章目录

  • 一、repeat
    • 1. 语法
    • 2. auto-fill和auto-fit
    • 3. 专属尺寸
      • ① fr
      • ② auto
      • ③ max-content
      • ④ min-content
  • 二、grid
    • 1. 设置grid布局
    • 2. 设置列宽行高
    • 3. 设置间距
    • 4. 设置分区
    • 5. 设置布局排列顺序
    • 6. 设置单元格内容对齐方式
    • 7. 设置整个网格对齐方式
    • 8. 设置隐式网格大小
    • 9. 设置网格位置

一、repeat

要想了解grid布局，首先了解 repeat() 的作用。

1. 语法

  • 见名知意，repeat() 函数表示轨道列表的重复片段。
  • 目前只有放在 grid-template-columns和grid-template-rows 上才有效。
  • 语法：repeat([auto-fill | auto-fit | <integer>] , [<line-names> ? [<fixed-size> | <track-size>]] + <line-names>?)
    • 轨道：一行叫行轨道，一列叫列轨道。
    • 第一个参数：auto-fill和auto-fit 会尽量在（一行/一列，看用的是...columns还是...rows）多创建轨道。重复次数就是重复创建多少次。
    • 第二个参数：轨道名、轨道尺寸。
    • 示例：repeat(4, [col-name] 1fr [col-name] 20px)
      在这里插入图片描述

2. auto-fill和auto-fit

在这里插入图片描述

  • 我比较喜欢用 auto-fit，可以填满整个父元素。
  • 不能只使用 fr、auto、min-content、max-content，否则一个占一行。比如：repeat(auto-fill, 1fr min-content)
  • 在 子元素总宽度 <= 父元素宽度时，差异比较明显：
<body>
<div class="container">
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
</div>
<div id="container">
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
</div>
</body>
<style>
    .container {
        display: grid;
        width: 600px;
        background-color: #ccc;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
        border: 1px dashed skyblue;
    }
    #container {
        display: grid;
        width: 600px;
        background-color: skyblue;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
        border: 1px dashed skyblue;
    }
</style>

在这里插入图片描述

  • 在 子元素总宽度 > 父元素宽度时，没什么差异：
    .container {
	 	...
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        ...
    }
    #container {
        ...
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        ...
    }

在这里插入图片描述

3. 专属尺寸

① fr

  • fr 单位代表网格容器中可用空间的一等份

② auto

  • 由浏览器决定长度。
  • 作为最大值，等同于 max-content。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值（如同min-width/min-height所指定的)）。
<body>
<div class="container">
    <div style="border: 1px solid black;height: 50px;">225255656sad56561</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
</div>
</body>
<style>
    .container {
        display: grid;
        width: 300px;
        background-color: #ccc;
        grid-gap: 5px;
        grid-template-columns: repeat(1, auto 20px);
        border: 1px dashed skyblue;
    }
</style>

在这里插入图片描述

③ max-content

  • 代表占据网格轨道的网格项目所分配的最大内容区域的最大值。
<body>
<div class="container">
    <div style="border: 1px solid black;height: 50px;">225255656sad56561</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
</div>
</body>
<style>
    .container {
        display: grid;
        width: 300px;
        background-color: #ccc;
        grid-gap: 5px;
        grid-template-columns: repeat(1, max-content 20px);
        border: 1px dashed skyblue;
    }
</style>

在这里插入图片描述

④ min-content

  • 代表占据网格轨道的网格项目所分配的最小内容区域的最小值。
<body>
<div class="container">
    <div style="border: 1px solid black;height: 50px;">225255656sad56561</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
</div>
</body>
<style>
    .container {
        display: grid;
        width: 300px;
        background-color: #ccc;
        grid-gap: 5px;
        grid-template-columns: repeat(1, min-content 20px);
        border: 1px dashed skyblue;
    }
</style>

在这里插入图片描述

二、grid

1. 设置grid布局

  • display: grid：块级元素。
<body>
1
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
2
</body>
<style>
    #container {
        display: grid;
        grid: repeat(2, 60px) / auto-flow 80px;
    }

    #container > div {
        background-color: #8ca0ff;
        width: 50px;
        height: 50px;
    }
</style>

在这里插入图片描述

  • display: inline-grid：行内元素。
<body>
1
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
2
</body>
<style>
    #container {
        display: inline-grid;
        grid: repeat(2, 60px) / auto-flow 80px;
    }

    #container > div {
        background-color: #8ca0ff;
        width: 50px;
        height: 50px;
    }
</style>

在这里插入图片描述

  • grid：可以用来设置多个属性。比如grid-template-rows、grid-template-columns 和 grid-template-areas等等。类似于 background 可以设置 bgColor、bgPosition。

2. 设置列宽行高

  • grid-template：用以定义网格中行、列与分区。
  • grid-template-columns：基于网格列的维度，定义网格线的名称和网格轨道的尺寸大小
  • grid-template-rows：基于网格行的维度，定义网格线的名称和网格轨道的尺寸大小
<body>
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
<style>
    #container {
        display: inline-grid;
        grid-gap: 5px;
        grid-template-columns: repeat(2, 50px);
        grid-template-rows: repeat(4, 50px);
    }

    #container > div {
        background-color: #8ca0ff;
        width: 50px;
        height: 50px;
    }
</style>

在这里插入图片描述

3. 设置间距

  • grid-row-gap：行间距
  • grid-column-gap：列间距
  • grid-gap：行列间距
<body>
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
<style>
    #container {
        display: inline-grid;
        grid-column-gap: 10px;
        grid-row-gap: 20px;
        grid-template-columns: repeat(2, 50px);
        grid-template-rows: repeat(4, 50px);
    }

    #container > div {
        background-color: #8ca0ff;
        width: 50px;
        height: 50px;
    }
</style>

在这里插入图片描述

4. 设置分区

  • grid-template-areas 用于划分网格区域。
  • grid-area 用于指定网格所属哪个区域。
  • 取名的名字自己取，. 表示不会用到这个区域。
<body>
<div id="container">
    <header>header</header>
    <nav>nav</nav>
    <main>main</main>
    <footer>footer</footer>
</div>
</body>
<style>
    #container {
        display: grid;
        grid-template-columns: 50px 200px;
        grid-template-rows: 50px 200px 50px;
        grid-template-areas: ". head"
                            "nav main"
                            "foot foot";
    }

    header {
        grid-area: head;
        background-color: #fedcba;
    }
    nav {
        grid-area: nav;
        background-color: #abcdef;
    }
    main {
        grid-area: main;
        background-color: #654321;
    }
    footer {
        grid-area: foot;
        background-color: #98abcd;
    }
</style>

在这里插入图片描述

5. 设置布局排列顺序

  • grid-auto-flow 控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。（指定排列顺序）
  • 语法：grid-auto-flow: [ row | column ] || dense
  • 默认时row，即把一行填满再填下一行。
  • column：列顺序。
  • dense：指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

6. 设置单元格内容对齐方式

  • 用于设置单元格内容在单元格内的对齐方式。
  • justify-items：内容水平对齐（start | end | center | stretch）。
  • align-items：内容垂直对齐（start | end | center | stretch）。
  • place-items：可以同时设置垂直对齐和水平对齐。
  • 默认值是 stretch，铺满网格。

7. 设置整个网格对齐方式

  • 用于设置整个内容区域在容器中的对齐方式。
  • justify-content：容器水平对齐（start | end | center | stretch | space-around | space-between | space-evenly）。
  • align-content：容器垂直对齐（start | end | center | stretch | space-around | space-between | space-evenly）。
  • place-content：同时设置垂直对齐和水平对齐。
<body>
<div id="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
</body>
<style>
    #grid {
        height: 500px;
        width: 500px;
        display: grid;
        grid-gap: 10px;
        grid-template: repeat(3, 50px) / repeat(3, 50px);
        grid-auto-flow: row;
        background-color: #f70;
        place-items: stretch stretch;
        /* space-around space-between space-evenly */
        justify-content: space-around; 
    }
    #grid > div{
        background-color: #acd;
    }
</style>

在这里插入图片描述

8. 设置隐式网格大小

  • 如果一个表格项目被定位在没有使用 grid-template-columns 显式指定尺寸的列中，隐式的 grid 轨道就会被创建出来支撑它。显式地定位到超出范围的列中，或者通过自动布局算法创建额外的列，就会发生上述情况。
  • 翻译一下上面的：如果只设置了两列列宽，那这两列是显式网格，其他都是隐式网格（因为没设置到）。
  • grid-auto-rows、grid-auto-columns设置隐式网格大小。
<body>
<div id="grid">
    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
</div>
</body>
<style>
    #grid {
        height: 100px;
        display: grid;
        grid-template-areas: "a a";
        grid-gap: 10px;
        grid-auto-columns: 200px;
    }

    #grid > div {
        background-color: lime;
    }
</style>

在这里插入图片描述

9. 设置网格位置

  • grid-column-start、grid-column-end、grid-row-start、grid-row-end：设置网格的行列开始或结束在哪个位置。
  • 属性值：auto为自动放置，area-name 4 为该区域的第四行/列。
<body>
<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
    <div class="box4">Four</div>
    <div class="box5">Five</div>
</div>
</body>
<style>
    .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 100px;
    }

    .wrapper > div {
        border: 1px solid #000;
    }

    .box1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
    }

    .box2 {
        grid-column-start: 1;
        grid-row-start: 3;
        grid-row-end: 5;
    }
</style>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/548696.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

geoserver图层样式的多种配置方法

geoserver图层样式的多种配置方法

前言&#xff1a;用geoserver发布服务的图层一般都配置了样式&#xff0c;简单的或者复杂的&#xff1b;单一的或者渐进式的等。今天我们结合业务场景、依据具体的数据分析给图层配置样式的多种方式。接着前几篇博客用到的数据为例&#xff1a; 一、配置默认样式 点击此篇文章…
阅读更多...
Vue中展示中文名称

Vue中展示中文名称

我今天调用接口时发现列表展示的楼栋一直是数字&#xff0c;并不是它的中文名称&#xff1b;但是点击编辑获取所属楼栋的下拉框中&#xff0c;又为中文名称&#xff0c;当我选中B栋点击修改之后又变成了B栋对应数字&#xff1b;然后我写了一个根据楼栋id获取对应的中文方法&…
阅读更多...
栈与队列的对决：用队列实现栈的2种思路

栈与队列的对决：用队列实现栈的2种思路

本篇博客会讲解力扣“225. 用队列实现栈”的解题思路&#xff0c;这是题目链接。 先来审题&#xff1a; 以下是输出示例&#xff1a; 以下是提示和进阶&#xff1a; 这道题有2种思路&#xff0c;分别使用2个和1个队列来实现栈。 准备工作 先来实现队列。由于本篇博客的…
阅读更多...
一步一步详解LSTM网络【从RNN到LSTM到GRU等，直至attention】

一步一步详解LSTM网络【从RNN到LSTM到GRU等，直至attention】

一步一步详解LSTM网络【从RNN到LSTM到GRU等&#xff0c;直至attention】 0、前言1、Recurrent Neural Networks循环神经网络2、The Problem of Long-Term Dependencies长期依赖的问题3、LSTM Networks4、The Core Idea Behind LSTMs5、Step-by-Step LSTM Walk Through6、Varian…
阅读更多...
Linux--进程(一篇博客让你理解操作系统的底层）

Linux--进程(一篇博客让你理解操作系统的底层）

Linux–进程 本篇博客讲开始进入进程模块&#xff0c;我们先从冯诺依曼的体系结构和操作系统讲起&#xff0c;由浅入深&#xff0c;先梳理一个Linux相关知识体系框架~ 进程目录 Linux--进程一、冯诺依曼体系结构1.1外围设备1.2中央处理器(CPU)1.3存储器(内存)1.3.1什么是内存&a…
阅读更多...
【LeetCode20】有效的括号——图解

【LeetCode20】有效的括号——图解

​ 你好&#xff0c;欢迎来到我的博客&#xff01;作为一名程序员&#xff0c;我经常刷LeetCode题目来提升自己的编程能力。在我的博客里&#xff0c;我会分享一些我自己做过的题目和解题思路&#xff0c;希望能够帮助到大家。今天&#xff0c;我想和大家分享一道挑战性较高的题…
阅读更多...
【Java校招面试】实战面经（三）

【Java校招面试】实战面经（三）

目录 前言一、简历中项目的难点及解决方案二、讲讲分布式锁的实现三、AQS(Abstract Queued Synchronizer)的原理四、ConcurrentHashMap的原理五、MySQL InnoDB存储引擎中的MVCC解决了什么问题&#xff0c;MVCC的实现原理六、平时怎么创建线程&#xff1f;为什么用线程池&#x…
阅读更多...
Red Hat Enterprise Linux (RHEL) 8.8 正式版发布

Red Hat Enterprise Linux (RHEL) 8.8 正式版发布

红帽企业 Linux 8.8 发布 Red Hat Enterprise Linux (RHEL) 8.8 (x86_64, aarch64) Release 请访问原文链接&#xff1a;https://sysin.org/blog/rhel-8/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org 2023年 5月 16日&…
阅读更多...
Java学习路线（5）——数组

Java学习路线（5）——数组

一、数组的概念 数组是用来存储一系列同类型数据的内存区域。 二、存储数据 1、静态初始化数组 作用&#xff1a; 定义数组时直接赋值。 格式&#xff1a; 【数据类型[] 变量名 new 数据类型[]{值1,值2…,值n}】 示例&#xff1a; double[] height {172.5,170.1,145.1,152.5,…
阅读更多...
java常用工具之Scanner类

java常用工具之Scanner类

目录 简介一、扫描控制台输入1.1nextLine1.2nextInt1.3其他方法 二、扫描文件三、查找匹配项四、小结 简介 Java 的 Scanner 类是一个方便在控制台扫描用户输入的工具类&#xff0c;虽然它也可以扫描文件内容&#xff0c;但我们通常更喜欢它扮演前面的角色&#xff0c;因为扫描…
阅读更多...
Flink第五章:处理函数

Flink第五章:处理函数

系列文章目录 Flink第一章:环境搭建 Flink第二章:基本操作. Flink第三章:基本操作(二) Flink第四章:水位线和窗口 Flink第五章:处理函数 文章目录 系列文章目录前言一、基本处理函数(ProcessFunction)二、按键分区处理函数&#xff08;KeyedProcessFunction&#xff09;1.处理…
阅读更多...
【Linux进阶之路】基本权限的理解

【Linux进阶之路】基本权限的理解

文章目录 一.用户1.分类2.su3.su-4.sudo 二.文件1.文件分类2.文件权限3.文件权限的身份4.chmod——改写文件权限第一种方式第二种方式 5.chown——改写文件拥有者身份6.chgrp ——改写文件所属组身份7.umask ——设置权限掩码8.目录权限9.粘滞位——特殊的可执行权限 一.用户 …
阅读更多...
关于Markdown文件的处理【笔记】

关于Markdown文件的处理【笔记】

关于Markdown文件的处理【笔记】 前言推荐关于Markdown文件的处理一、md文件转word文档1 准备2 打开3 转为word文档4 导出结果5 打开 二、word文档转md文件1 准备2 导入3 打开4 显示图片5 打开 三、导入到CSDN中1 选择导入2 查看 四、导入设置1 前言2 导入设置3 修改配置 最后 …
阅读更多...
ES6之生成器

ES6之生成器

文章目录 前言一、生成器是什么&#xff1f;二、生成器总结 前言 生成器 一、生成器是什么&#xff1f; 生成器就是一个特殊的函数&#xff0c;实现异步编程。格式function *名称(){...} (这个*靠近function写&#xff0c;靠近名称写&#xff0c;或者两边空格都不靠近均正确)…
阅读更多...
[比赛简介]Parkinson‘s Freezing of Gait Prediction

[比赛简介]Parkinson‘s Freezing of Gait Prediction

比赛链接&#xff1a;https://www.kaggle.com/competitions/tlvmc-parkinsons-freezing-gait-prediction 比赛简介 本次比赛的目标是检测步态冻结&#xff08;FOG&#xff09;&#xff0c;这是一种使人衰弱的症状&#xff0c;困扰着许多帕金森病患者。您将开发一个机器学习…
阅读更多...
YOLO V3 SPP ultralytics 第三节：关于yolo 中cfg的网络配置信息和读取cfg配置文件

YOLO V3 SPP ultralytics 第三节：关于yolo 中cfg的网络配置信息和读取cfg配置文件

目录 1. 介绍 2. 关于yolo的cfg网络配置文件 2.1 关于卷积层 2.2 关于池化层 2.3 关于捷径分支shortcut 2.4 关于route 层 2.5 关于上采样层 2.6 关于yolo层 3. 解析cfg 文件 4. 代码 1. 介绍 根据 第二节 的步骤&#xff0c;生成了属于自己的 my_yolov3.cfg 配置…
阅读更多...
Python 墨西哥湾流（gulf stream）可视化

Python 墨西哥湾流（gulf stream）可视化

背景介绍 墨西哥湾流和黑潮分别是北半球两支强大的西边界流&#xff0c;墨西哥湾流的流速还要强于黑潮&#xff0c;也是温盐环流的重要组成部分。 引入涡度的概念&#xff0c;将涡度分为两个部分&#xff1a; 1、行星涡度&#xff0c;记为 f f f&#xff0c;与地球自转有关…
阅读更多...
【软考数据库】第十四章 数据库主流应用技术

【软考数据库】第十四章 数据库主流应用技术

目录 14.1 分布式数据库 14.2 Web与数据库 14.3 XML与数据库 14.4 面向对象数据库 14.5 大数据与数据库 14.6 NewSQL 前言&#xff1a; 笔记来自《文老师软考数据库》教材精讲&#xff0c;精讲视频在b站&#xff0c;某宝都可以找到&#xff0c;个人感觉通俗易懂。 14.1 …
阅读更多...
Springcloud1----＞openFeign

Springcloud1----＞openFeign

目录 简介快速入门导入依赖开启Feign配置Feign客户端接口Feign使用小结feign feign配置负载均衡feign配置Hystix支持 简介 Feign可以把Rest的请求进行隐藏&#xff0c;伪装成类似SpringMVC的Controller一样。你不用再自己拼接url&#xff0c;拼接参数等等操作&#xff0c;一切…
阅读更多...
WebSocket 详解，以及用QWebSocket 实现服务端和客户端（含代码例子）

WebSocket 详解，以及用QWebSocket 实现服务端和客户端（含代码例子）

目录 1、WebSocket 诞生背景 2、WebSocket的特点&#xff1a; 3、 WebSocket 简介 4、WebSocket 优点 5、QWebSocket通讯—客户端&#xff1a; 6、QWebSocket通讯—服务端&#xff1a; 1、WebSocket 诞生背景 早期&#xff0c;很多网站为了实现推送技术&#xff0c;所用的技术都…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023