css——网格布局


名词解释

div{$}*9+tab键,快捷生成

 

记首字母gtc 

网格布局:display: grid;        grid-template-columns: 100px 100px 100px;        grid-template-rows: 100px 100px 100px; (父元素)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 300px;background-color: skyblue;/* 设置之网格布局 */display: grid;/* 设置纵向单元格属性(列) */grid-template-columns: 50px 20% auto;/* 20% 占父盒子的20% *//* 设置横向单元格属性(行) */grid-template-rows: 2fr 1fr 0.5fr;/* fraction n份 */}.box div{background-color: pink;width: 20px;height: 20px;}</style>
</head>
<body><div class="box"><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>
</html>

合并单元格:父盒子grid-template-areas:"a1 a1 a2"  "a1 a1 a2""a3 a3 a3"; 子盒子grid-area: a1;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 300px;background-color: skyblue;/* 设置之网格布局 */display: grid;/* 设置纵向单元格属性(列) *//* grid-template-columns: 50px 20% auto; *//* 20% 占父盒子的20% *//* 设置横向单元格属性(行) *//* grid-template-rows: 2fr 1fr 0.5fr; *//* fraction n份 */grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;grid-template-areas: "a1 a1 a2""a1 a1 a2""a3 a3 a3";}.box div{background-color: pink;/* width: 20px;height: 20px; */border: 1px solid black;}.box div:nth-of-type(1){grid-area: a1;/* 指定元素代表单元格模板中的哪个标识 */}.box div:nth-of-type(2){grid-area: a2;}.box div:nth-of-type(3){grid-area: a3;}</style>
</head>
<body><div class="box"><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>
</html>

组合属性:grid-template:"a1 a1 a2" 1fr "a1 a1 a2" 1fr"a3 a3 a3" 1fr/ 1fr 1fr 1fr;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 300px;background-color: skyblue;/* 设置之网格布局 */display: grid;/* 设置纵向单元格属性(列) *//* grid-template-columns: 50px 20% auto; *//* 20% 占父盒子的20% *//* 设置横向单元格属性(行) *//* grid-template-rows: 2fr 1fr 0.5fr; *//* fraction n份 *//* grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;grid-template-areas: "a1 a1 a2""a1 a1 a2""a3 a3 a3"; *//* 组合属性 */grid-template: "a1 a1 a2" 1fr"a1 a1 a2" 1fr"a3 a3 a3" 1fr/ 1fr 1fr 1fr;}.box div{background-color: pink;/* width: 20px;height: 20px; */border: 1px solid black;}.box div:nth-of-type(1){grid-area: a1;/* 指定元素代表单元格模板中的哪个标识 */}.box div:nth-of-type(2){grid-area: a2;}.box div:nth-of-type(3){grid-area: a3;}</style>
</head>
<body><div class="box"><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>
</html>

 

行间隙row-gap: 20px;列间隙column-gap: 30px; 组合gap:20px 30px;

也可用于弹性盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 300px;background-color: skyblue;/* 设置之网格布局 */display: grid;/* 设置纵向单元格属性(列) *//* grid-template-columns: 50px 20% auto; *//* 20% 占父盒子的20% *//* 设置横向单元格属性(行) *//* grid-template-rows: 2fr 1fr 0.5fr; *//* fraction n份 *//* grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;grid-template-areas: "a1 a1 a2""a1 a1 a2""a3 a3 a3"; *//* 组合属性 */grid-template: "a1 a1 a2" 1fr"a1 a1 a2" 1fr"a3 a3 a3" 1fr/ 1fr 1fr 1fr;/* row-gap: 20px;column-gap: 30px; */gap: 20px 30px}.box div{background-color: pink;/* width: 20px;height: 20px; */border: 1px solid black;}.box div:nth-of-type(1){grid-area: a1;/* 指定元素代表单元格模板中的哪个标识 */}.box div:nth-of-type(2){grid-area: a2;}.box div:nth-of-type(3){grid-area: a3;}</style>
</head>
<body><div class="box"><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>
</html>

 

子元素对齐 主轴 justify-items: end/start/auto/center;  交叉轴align-items ;  组合place-items: center end;(交叉轴 主轴)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 300px;background-color: skyblue;/* display: flex;flex-wrap: wrap;row-gap: 20px;column-gap: 20px; */display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;/* justify-items: end;align-items: center; */place-items: center end;}.box div{width: 50px;height: 50px;background-color: pink;}</style>
</head>
<body><div class="box"><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>
</html>

单元格对齐 justify-content: space-around;align-content: center;组合place-content: center space-around;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 300px;background-color: skyblue;/* display: flex;flex-wrap: wrap;row-gap: 20px;column-gap: 20px; */display: grid;grid-template-columns: 50px 50px 50px;grid-template-columns: 50px 50px 50px;/* justify-items: end;align-items: center; *//* place-items: center end; *//* justify-content: space-around;align-content: center; */place-content: center space-around; }.box div{width: 50px;height: 50px;background-color: pink;}</style>
</head>
<body><div class="box"><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>
</html>

隐式单元格 grid-auto-flow: row; grid-auto-rows: 50px; 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 300px;background-color: skyblue;display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr;/* 控制隐式单元格 */grid-auto-flow: row;grid-auto-rows: 50px;/* grid-auto-flow: column; *//* grid-auto-columns: 150px; */}.box div{background-color: pink;}</style>
</head>
<body><div class="box"><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>
</html>

默认

 

控制隐式单元格后

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何构建适合企业需求的即时通讯与音视频通话私有化平台?

在数字化转型的浪潮中&#xff0c;企业对于内部沟通的需求日益复杂化和多元化。传统的沟通方式已难以满足高效协作、信息安全及个性化定制的需求。因此&#xff0c;“即时通讯音视频通话”集成的私有化部署软件应运而生&#xff0c;成为企业优化内部沟通、提升工作效率的得力助…

PN IO设备ET 200SP支持R1模式

IA博途V18除了支持性能大幅提升的V3.0版本S7-1500 CPU&#xff08;不包含S7-1517/18 CPU&#xff09;外&#xff0c;还支持我们一直期待的R1模式的PROFINET IO设备ET200SP&#xff01;这样使S7-1500H 冗余系统的PN IO设备配置更加灵活。 1. PN 设备接口模式 以前的S7-1500R/…

【重学 MySQL】二十七、七种 join 连接

【重学 MySQL】二十七、七种 join 连接 union 的使用UNION 的基本用法示例UNION ALL 的用法 七种 join 连接代码实现语法格式小结 union 的使用 UNION 在 SQL 中用于合并两个或多个 SELECT 语句的结果集&#xff0c;并默认去除重复的行。如果希望包含重复行&#xff0c;可以使…

jmeter之setUP、tearDown线程组

setUp线程组&#xff1a; 用于在执行常规线程组之前执行一些必要的操作 ------会在普通线程组执行前被触发 应用场景举例&#xff1a; A、测试数据库操作功能时&#xff0c;用于执行打开数据库连接操作 B、测试用户购物功能时&#xff0c;用于执行用户的注册、登录等操作 tea…

DMDPC单副本集群安装

1. 环境描述 2. 部署步骤 2.1. 安装DM数据库软件启动DMAP [dmdbalei1 ~]$ DmAPService status DmAPService (pid 1269) is running.2.2. 初始化数据库实例 [dmdbalei1 data]$ dminit path/dmdba/data/sp1 instance_nameSP1 port_num5236 ap_port_num6000 dpc_modeSP initdb …

Java项目: 基于SpringBoot+mybatis+maven旅游管理系统(含源码+数据库+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismaven旅游管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、…

Java 入门指南:Java 并发编程模式 —— 生产者-消费者模式

文章目录 生产者-消费者问题解决方案 生产者-消费者模式模式的核心问题基本原理生产者消费者 优点实现方式使用阻塞队列示例代码 使用 wait/notify 机制wait()notify()notifyAll()示例代码 使用 Exchanger示例代码 应用场景总结 生产者-消费者问题 生产者消费者问题是一个经典…

JS - 获取剪切板内容 Clipboard API

目录 1&#xff0c;需求最终效果 2&#xff0c;实现示例 3&#xff0c;注意点1&#xff0c;只支持安全上下文环境2&#xff0c;只能读取当前页面的剪切板3&#xff0c;权限获取问题4&#xff0c;获取内容的 MIME_TYPE 问题1&#xff0c;文本内容2&#xff0c;图片内容 5&#x…

3.C++入门(内联函数,c++11,auto,范围for,nullptr)

⭐本篇文章为C学习的第三篇&#xff1a;主要了解内联函数和部分c11新特性 ⭐本人c代码的Gitee仓库&#xff1a;c学习 橘子真甜/yzc的c学习 - 码云 - 开源中国 (gitee.com) 一. 内联函数 以inline修饰的函数称为内联函数&#xff0c;编译的时候c编译器会在内联函数的地方展开&a…

【GBase 8c V5_3.0.0 分布式数据库常用维护命令】

一、查看数据库状态/检查&#xff08;gbase用户&#xff09; 1.gha_ctl monitor 使用gha_ctl monitor查看节点运行情况(跟dcs的地址和端口) gha_ctl monitor -c gbase -l http://172.20.10.8:2379 -Hall |coordinator | datanode | gtm | server|dcs:必选字段。指定查看哪类集…

【有啥问啥】探索扫地机器人中的 SLAM 算法:原理、实现与未来展望

探索扫地机器人中的 SLAM 算法&#xff1a;原理、实现与未来展望 随着智能家居的普及&#xff0c;扫地机器人逐渐成为日常生活中的常见家电。其自主导航能力使得它能够在复杂的家庭环境中高效完成清洁任务&#xff0c;而这背后的核心技术之一就是 SLAM&#xff08;Simultaneou…

【文件包含】——日志文件注入

改变的确很难&#xff0c;但结果值得冒险 本文主要根据做题内容的总结&#xff0c;如有错误之处&#xff0c;还请各位师傅指正 一.伪协议的失效 当我们做到关于文件包含的题目时&#xff0c;常用思路其实就是使用伪协议&#xff08;php:filter,data,inpput等等&#xff09;执行…

shader 案例学习笔记之step函数

step函数 参数是float step(edge,x)&#xff1a;当x>edge时返回1&#xff0c;否则返回0 #ifdef GL_ES precision mediump float; #endifuniform vec2 u_resolution;void main(){vec2 st gl_FragCoord.xy/u_resolution.xy;float f step(0.5, st.x);gl_FragColor vec4(f…

算法知识点————数论【最大公约数】【快速幂】【分解质因数】

结论1&#xff1a;两个互质的整数mn不能凑出的最大整数是(n-1)(m-1) -1 结论2:一个数的因数可以拆成n个质因数的乘积。 黄金分割&#xff1a;0.61803399 在数论中&#xff0c;如果两个或两个以上的整数的最大公约数是 1 &#xff0c;则称它们为互质。 最大公约数: 两数乘积最…

C语言:结构体

在前面我们已经介绍了整形&#xff0c;浮点型&#xff0c;字符型&#xff0c;还介绍了数组&#xff0c;字符串。但是在实际问题中只有这些数据类型是不够的&#xff0c;有时候我们需要其中的几种一起来修饰某个变量&#xff0c;例如一个学生的信息就需要学号&#xff08;字符串…

基础 Web 开发

1. 构建项目&#xff1a; 2.添加依赖 <dependencies> <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupI…

[ RK3566-Android11 ] 关于 RK628F 驱动移植以及调试说明

问题描述 我这个项目的SDK比较老&#xff0c;移植RK628F最新驱动的调试过程&#xff0c;踩了很多坑&#xff0c;希望大家别踩坑。 解决方案&#xff1a; 首先在FTP上下载最新的RK628的驱动 rk628-for-all-v27-240730 版本。 下载完后 不要直接替换&#xff0c;不要直接替换&a…

网络高级(学习)2024.9.10

目录 一、Modbus简介 1.起源 2.特点 3.应用场景 二、Modbus TCP协议 1.特点 2.协议格式 3.MBAP报文头 4.功能码 5.寄存器 &#xff08;1&#xff09;线圈寄存器&#xff0c;类比为开关量&#xff0c;每一个bit都对应一个信号的开关状态。 &#xff08;2&#xff09…

中学生考试成绩在线查询系统

时代在发展&#xff0c;社会在进步&#xff0c;传统的成绩发布方式已经显得力不从心了。老师们&#xff0c;是时候尝试一种更高效、更安全的成绩查询方式了。 还在为如何保护学生隐私而头疼&#xff1f;还在担心成绩的公平性和准确性&#xff1f;易查分小程序将这些这些问题都将…

安卓13禁止声音调节对话框 删除音量调节对话框弹出 屏蔽音量对话框 android13

总纲 android13 rom 开发总纲说明 文章目录 1.前言2.问题分析3.代码分析3.1 方法13.2 方法24.代码修改4.1 代码修改方法14.2 代码修改方法25.编译6.彩蛋1.前言 客户需要,调整声音,不显示声音调节对话框了。我们在系统里面隐藏这个对话框。 2.问题分析 android在调整声音的…