记录grid布局属性
grid布局
分为容器和项目元素
容器属性
#container{display:grid;grid-template-columns:100px 100px 100px;/* 1fr 表示比例为占1份 */grid-template-columns:1fr 100px 1fr;/*100px为1列,自动填充,容器宽度不足则换行*/grid-template-columns:repeat(auto-fill,100px);/* 表示列为100px 以及 最大值为1fr,最小值为100px的列 */grid-template-columns:100px maxmin(100px,1fr)grid-template-columns: 100px auto 100px;grid-template-columns:repeat(auto-fit,100px);/* 行列之间网格线默认是1开头,可以取别名 */grid-template-rows:[a] 100px [b] 100px [c] 100px [d];/* 行列间的间隔 */grid-column-gap:20px;grid-row-gap:20px;/* 行列间隔 简写 */grid-gap:20px 20px;/* 指定区域的别名,一般与子项目的grid-area配合使用 */grid-template-areas:`a b cd e fg h i`;/* 默认是 row,先行后列 , dense 表示由于 排列有空白时 后面的项目尽可能补充到该空白处*/grid-auto-flow: row| row dense | column | column dense;/* *-items系列指定所有单元格中内容的排列方式 ,默认不指定时子项目为stretch,铺满整个块,除非子项目指定了width,height*/justify-items: start | center | end | stretch;align-items: start | center | end | stretch;place-items: <align-items> <justify-items>;/* *-content系列指定整个内容区域(指由列和行组成的区域,不一定占满容器)在容器内的位置 */justify-content:start | center | end | stretch | space-between space-around | space-evenly;align-content:start | center | end | stretch | space-between space-around | space-evenly;place-content: <align-content> <justify-content>;/* grid-auto-* 系列表示如果子项目超过单元格数量时,新增的行和列的宽高 */grid-auto-columns:50px;grid-auto-rows: 50px;
}
项目属性
以下属性是项目的属性
/* 根据网格线指定项目的定位,实现不同的单元格大小 */
grid-columns-start: 1;
grid-columns -end: 1;
grid-rows-start: 1;
grid-row-end: 1;
/* 简写 */
grid-column: 1 / 3; /* 相当于 1 号,3 号网格线*/
grid-row: <start-line> / <end-line>/* 与容器定义的 grid-template-areas 配合指定项目位置 */
grid-area: a;/* 单个项目指定在单元格内排列方式 */
justify-self: start | center | end | stretch;
align-self: start | center | end | stretch;
place-self: <align-self> <justify-self>;
开发常用布局
- 水平两栏布局
一般设置grid布局,grid-template-columns设置列数和列宽,行高由子项目撑开,
#container{display:grid;grid-template-columns: repeat(2,1fr);
}
- 容器宽度不定,子项目宽高固定,换行排列,比
flex布局方便,关键在repeat(auto-fill,100px)
#container{display:grid;grid-template-columns: repeat(auto-fill,100px);
}
相关文章:
记录grid布局属性
grid布局 分为容器和项目元素 容器属性 #container{display:grid;grid-template-columns:100px 100px 100px;/* 1fr 表示比例为占1份 */grid-template-columns:1fr 100px 1fr;/*100px为1列,自动填充,容器宽度不足则换行*/grid-template-columns:repeat(auto-fill,100px);/* …...
12.爬虫---PyMysql安装与使用
12.PyMysql安装与使用 1.安装 PyMySQL2.使用PyMySQL2.1创建数据表2.2连接数据库2.3增加数据2.4修改数据2.5查询数据2.6删除数据2.7关闭连接 3.总结 MySQL 安装可以看这篇文章MySql 安装与使用(非常详细) 1.安装 PyMySQL PyMySQL是Python中用于连接MySQL…...
VS2022遇到的两个问题
问题一:找不到定义的头文件 别的博主说是:在属性页里面进行改写,改成是,我试过之后并不行; 解决思路:但其实在右边视图里面找到你自己定义的头文件加到你运行文件中就行;因为程序就只有一个入口…...
【Android14 ShellTransitions】(六)SyncGroup完成
这一节的内容在WMCore中,回想我们的场景,是在Launcher启动某一个App,那么参与动画的就是该App对应Task(OPEN),以及Launcher App对应的Task(TO_BACK)。在确定了动画的参与者后&#x…...
技术管理转型之战:决策之道-管理中的智慧与策略
文章目录 引言一、决策的重要性二、常见的决策方式1. 理性决策(Rational Decision Making)2. 有限理性(Bounded Rationality)3. 直觉决策(Intuitive Decision Making)4. 循证管理(Evidence-Base…...
Shell脚本:条件语句(if、case)
目录 硬编码 硬编码的缺点 条件判断 $? 命令行语句 判断指定目录是否存在 判断指定文件是否存在 判断指定对象是否存在 表达式形式语句 判断对象是否存在 判断对象是否有权限 与、或、非 运算 与运算 或运算 非运算 比较大小 判断磁盘利用率实验步骤 字符串…...
在Linux上为Windows目标配置Qt交叉编译
问题描述 我想使用Linux x86_64主机为Windows x86_64目标交叉编译Qt库(最终也包括我的应用程序)。我觉得自己已经接近成功了,但可能对整个过程有一些基本的误解。 我从在我的Fedora机器上安装所有mingw包开始,并修改了win32-g的…...
Introduction to linear optimization 第 2 章课后题答案 11-15
线性规划导论 Introduction to linear optimization (Dimitris Bertsimas and John N. Tsitsiklis, Athena Scientific, 1997), 这本书的课后题答案我整理成了一个 Jupyter book,发布在网址: https://robinchen121.github.io/manual-introdu…...
Java——包
一、包 1、简要介绍 在Java编程语言中,包(Package) 是一种用来组织和管理类(Class)和接口(Interface)的机制。包为开发者提供了一种逻辑分组的方式,使代码更加模块化、结构化和易于…...
Pipeline知识小记
在scikit-learn(通常缩写为sklearn)中,Pipeline是一个非常重要的工具,它允许你将多个数据转换步骤(如特征选择、缩放等)和估计器(如分类器、回归器等)组合成一个单一的估计器对象。这…...
postman国内外竞争者及使用详解分析
一、postman简介 Postman 是一款广泛使用的 API 开发和测试工具,适用于开发人员和测试人员。它提供了一个直观的界面,用于发送 HTTP 请求、查看响应、创建和管理 API 测试用例,以及自动化 API 测试工作流程。以下是 Postman 的主要功能和特点…...
人工智能对决:ChatGLM与ChatGPT,探索发展历程
图: a robot is writing code on a horse, By 禅与计算机程序设计艺术 目录 ChatGLM:...
探索Python元类的奥秘及其应用场景
探索Python元类的奥秘及其应用场景 一、引言 在Python中,元类(Metaclasses)是一个相对高级且容易被忽视的主题。然而,对于深入理解Python的面向对象编程模型以及进行高级框架和库的设计来说,元类是一个不可或缺的工具…...
C语言基础关键字的含义和使用方法
关键字在C语言中扮演着非常重要的角色,它们定义了语言的基本构造和语法规则,通过使用关键字,开发者可以创建变量、定义数据类型、控制程序流程(如循环和条件判断)、声明函数等。由于这些字是保留的,所以编…...
【Golang - 90天从新手到大师】Day09 - string
系列文章合集 Golang - 90天从新手到大师 String 一个字符串是一个不可改变的字节序列。字符串可以包含任意的数据,但是通常是用来包含人类可读的文本。 len()返回字符串字节数目(不是rune数)。 通过索引可以访问某个字节值,0…...
网络安全与区块链技术:信任与安全的融合
# 网络安全与区块链技术:信任与安全的融合 在网络空间,信任是一种宝贵而稀缺的资源。区块链技术以其独特的分布式账本、加密算法和共识机制,为构建网络安全提供了新的解决方案。本文将探讨网络安全与区块链技术如何融合,以增强信…...
MySQL之复制(九)
复制 复制管理和维护 确定主备是否一致 在理想情况下,备库和主库的数据应该是完全一样的。但事实上备库可能发生错误并导致数据不一致。即使没有明显的错误,备库同样可能因为MySQL自身的特性导致数据不一致,例如MySQL的Bug、网络中断、服务…...
【面试干货】 Java 中的 HashSet 底层实现
【面试干货】 Java 中的 HashSet 底层实现 1、HashSet 的底层实现2、 HashSet 的特点3、 总结 💖The Begin💖点点关注,收藏不迷路💖 HashSet 是 Java 集合框架中的一个重要成员,它提供了不存储重复元素的集合。但是&am…...
爬虫经典案例之爬取豆瓣电影Top250(方法二)
在上一篇文章的基础上,改进了代码质量,增加了多个正则表达式匹配,但同事也增加了程序执行的耗时。 from bs4 import BeautifulSoup import requests import time import re from random import randint import pandas as pdurl_list [https…...
如何优化React应用的性能?
优化React应用的性能是一个多方面的过程,涉及到代码的编写、组件的设计、资源的管理等多个层面。以下是一些常见的性能优化策略: 避免不必要的渲染: 使用React.memo、useMemo和useCallback来避免组件或其子组件不必要的重新渲染。 代码分割: 使用React.…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
MySQL:分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区(Partitioning)是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分(分区)可以独立存储、管理和优化,…...
从物理机到云原生:全面解析计算虚拟化技术的演进与应用
前言:我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM(Java Virtual Machine)让"一次编写,到处运行"成为可能。这个软件层面的虚拟化让我着迷,但直到后来接触VMware和Doc…...
