当前位置: 首页 > news >正文

grid了解

结构

   <div class="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>10</div></div>

css

.grid {width: 300px;height: 300px;border: 2px solid red;display: grid;margin: 0 auto;grid-template-rows: repeat(4, 1fr);grid-template-columns: repeat(3, 1fr);row-gap: 10px;column-gap: 10px;/* gap: 10px; */}.grid div {background-color: green;background-clip: content-box;border: 1px solid yellow;}

开启网格布局 

display: grid

行间距

row-gap: 10px

列间距
column-gap: 10px

简写,行列间距
 gap: 10px

定义行-4行,每行等分

grid-template-rows: repeat(4, 1fr);

定义列-3列,每列等分
grid-template-columns: repeat(3, 1fr);

 <div class="grid1"><div>1</div></div>

  .grid1 {width: 500px;height: 500px;margin: 0 auto;display: grid;grid-template-rows: repeat(4, 1fr);grid-template-columns: repeat(4, 1fr);column-gap: 10px;border: 1px red solid;}.grid1 div {border: 1px black solid;}.grid1 div:first-child {grid-row-start: 2;grid-column-start: 2;grid-row-end: 4;grid-column-end: 4;background-color: red;}

定义开始行

        grid-row-start: 2;

定义开始列
        grid-column-start: 2;

定义结束行
        grid-row-end: 4;

定义结束列
        grid-column-end: 4;

结构

 <div class="grid2"><div>1</div><div>2</div><div>3</div></div>

css样式

 .grid2 {width: 300px;height: 300px;border: 1px solid green;margin: 0 auto;display: grid;grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(2, 1fr);}.grid2 div {background-clip: content-box;background-color: red;padding: 10px;}.grid2 div:first-child {grid-row-start: 1;grid-column-start: 1;grid-row-end: 3;grid-column-end: 1;}

 结束也可以使用偏移量写法

       .grid4 {width: 300px;height: 300px;border: 3px solid black;margin: 0 auto;display: grid;grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(2, 1fr);}.grid4 div {background-clip: content-box;background-color: green;padding: 10px;}.grid4 div:first-child {background-clip: content-box;background-color: green;padding: 10px;grid-row-start: 1;grid-column-start: 1;grid-row-end: span 2;}
   <div class="grid4"><div>1</div><div>2</div><div>3</div></div>

 实现一个上下固定,左侧固定,右侧自适应

 定义行列--定义边线名

 .box {width: 100vw;height: 100vh;display: grid;grid-template-rows: 60px 1fr 60px;grid-template-columns: 60px 1fr;grid-template-areas: 'header header' 'nva main' 'footer footer';/* grid-column-gap: 10px; */}

结构

 <div class="box"><header></header><nva></nva><main></main><footer></footer></div></body>

 设置背景色,内边距

     header,nva,main,footer {border: 1px black solid;background-clip: content-box;background-color: green;padding: 10px;}

合并命名盒子

  header {grid-area: header;}nva {grid-area: nva;}main {grid-area: main;}footer {grid-area: footer;}

不用上面写法-使用偏移量写法--效果相同

header {grid-row-start: 1;grid-column-start: 1;grid-column: span 2;}footer {grid-row-start: 3;grid-column-start: 1;grid-column: span 2;}

结构

<div class="grid4"><div>1</div><div>2</div><div>3</div><div>4</div>
</div>

css

      .grid4 {width: 300px;height: 300px;border: 3px solid black;margin: 0 auto;display: grid;grid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);}.grid4 div {background-clip: content-box;background-color: green;padding: 10px;}.grid4 div:first-child {grid-column: 1 / span 2;}.grid4 div:nth-child(2) {grid-column: 2 / span 1;}

 栅格容器--让后面子元素自动填满

  grid-auto-flow: row dense;

结构 

 <div class="grid5"><div>1</div><div>2</div><div>3</div></div>

css

 .grid5 {width: 300px;height: 300px;border: 3px solid black;margin: 0 auto;display: grid;grid-template-rows: repeat(1, 1fr);grid-template-columns: repeat(3, 1fr);}.grid5 div {background-clip: content-box;background-color: green;padding: 10px;}

子元素未设置宽高-默认拉伸

 设置元素在栅格内的排序方式

 justify-items: start;align-items: end;

单独设置某一个元素

 .grid5 div:nth-child(2) {align-self: start;}.grid5 div:nth-child(3) {justify-self: end;}

 

-----------------------伪元素使用----------------------------------------------------------

结构

 <span class="box">你好</span>

使用伪元素-设置下边线

  .box {font-size: 100px;position: relative;}.box::before {content: '';//设置内容position: absolute;//绝对定位width: 50px;//绝对定位属性盒子,可以设置宽高border: 1px solid black;//设置边线bottom: 0px;//定位到底部left: 50%;//居中父盒子左侧50%transform: translate(-50%);//反方向移动自身50%}

 实现效果

使用伪元素清除浮动

    <div class="one clear"><div>1</div><div>2</div></div><div>999</div>

   .one {width: 100vw;justify-content: space-between;}.one div:nth-child(1) {float: left;min-width: 20%;border: 1px solid black;}.one div:nth-child(2) {float: right;min-width: 20%;border: 1px solid rgb(130, 45, 45);}.clear::after {content: '';display: block;clear: both;}

未清除时

父盒子,因为子元素浮动,无法撑开,下方盒子上移---(圣杯布局?)

 加入之后,恢复正常

------------------------------------------粘性布局使用--------------------------------------------------

结构

<body><div>1</div><div class="scroll"></div>
</body>

样式

  <style>* {margin: 0;padding: 0;box-sizing: border-box;}div:first-child {position: sticky;width: 100px;height: 100px;top: 0;left: 0;background-color: red;margin-top: 90vh;}.scroll {height: 5000px;}</style>

相关文章:

grid了解

结构 <div class"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>&l…...

2023年全国最新工会考试精选真题及答案13

百分百题库提供工会考试试题、工会考试预测题、工会考试真题、工会证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 81.女职工委员会在&#xff08;&#xff09;下开展工作。 A.企业工会委员会领导 B.企业工会委员会指导 …...

初识HTML技术

文章目录一、为什么学习前端?二、第一个HTML文件VSCode三. HTML元素四. HTML页面一、为什么学习前端? 我们作为一个后端程序员&#xff0c;为什么还要学习前端&#xff0c;因为我们的终极目的是实现web开发&#xff0c;搭建网站&#xff0c;网站 前端 后端 比如我们随便…...

我们为什么要用消息队列?

消息队列是系统设计中存在时间最长的中间件之一&#xff0c;从系统有通信需求开始&#xff0c;就产生了消息队列。 消息队列的使用场景 在日常系统设计与实现的过程中&#xff0c;下面3种场景会涉及到消息队列&#xff1a; 异步处理流量控制服务解耦 异步处理 典型的应用场…...

Linux进程控制

进程控制fork函数进程终止退出码常见的退出方式进程等待什么是进程等待&#xff0c;为什么要进程等待阻塞与非阻塞进程替换替换原理替换函数执行系统命令执行自己写的程序模拟实现简易的shellfork函数 fork函数是创建一个子进程&#xff0c;之前用过。 #include <unistd.h…...

PMP项目管理引论介绍

目录1. 指南概述和目的1.1 项目管理标准1.2 道德与专业行为规范2 基本要素2.1 项目2.2 项目管理的重要性2.3 项目、项目集、项目组合以及运营管理之间的关系2.3.1 概述2.3.2. 项目组合与项目集管理2.3.3. 运营管理2.3.4. 组织级项目管理和战略2.3.5. 项目管理2.3.6. 运营管理与…...

计算机视觉废钢堆提取问题

计算机视觉废钢堆提取问题 背景介绍 在钢铁炼制中&#xff0c;废钢是非常重要的原料&#xff0c;不同等级废钢对于钢成品影响很大&#xff0c;因此需要对废钢进行正确分类。某废钢料场中&#xff0c;卸料区域布置了多个摄像头&#xff0c;用于拍摄卸料场中废钢堆&#xff0c;…...

判断水仙花数-课后程序(Python程序开发案例教程-黑马程序员编著-第二章-课后作业)

实例5&#xff1a;判断水仙花数 水仙花数是一个3位数&#xff0c;它的每位数字的3次幂之和等于它本身&#xff0c;例如13 53 33 153&#xff0c;153就是一个水仙花数。 本实例要求编写程序&#xff0c;实现判断用户输入的3位数是否为水仙花数的功能。 实例目标 掌握Pytho…...

目标检测: 数据增强代码详解

1. 常见的数据增强 1.1 翻转图像 左右水平翻转 假设图片的宽高为w,h,bdbox左上角A坐标为(x1,y1), 右下角B为(x2,y2)。经过左右水平翻转后,bdbox的左上角A1坐标(w-x2,y1) ,右下角B1坐标为(w-x1,y2)左右水平翻转的代码实现如下:from PIL import Image image = Image.open(i…...

第二讲:ambari编译复盘,如何实现一次性成功编译ambari

上节课我们已经讲解了如何成功编译ambari源码,安装ambari-server rpm包以及成功部署ambari。本节课我们来复盘一下上节课的编译过程,以及思考如何实现一次性成功编译ambari。 要想一次性成功编译ambari,那么就需要将预置工作做好,比如: maven镜像源配置,node_moudle模块…...

Windows下jdk安装与卸载-超详细的图文教程

jdk安装 下载jdk 由于现在主流就是jdk1.8&#xff0c;所以这里就下载jdk1.8进行演示。官方下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/#java8-windows。 官方下载需要注册oracle账号&#xff0c;国内下载有可能速度慢&#xff0c;若不想注册账…...

Jackson CVE-2018-5968 反序列化漏洞

0x00 前言 同CVE-2017-15095一样&#xff0c;是CVE-2017-7525黑名单绕过的漏洞&#xff0c;主要还是看一下绕过的调用链利用方式。 可以先看&#xff1a; Jackson 反序列化漏洞原理 或者直接看总结也可以&#xff1a; Jackson总结 影响版本&#xff1a;至2.8.11和2.9.x至…...

解析MySQL 8.0 OCP(1Z0-908)考试中一道大部分同学都会做错的题目

一个用户有下面的权限: mysql>SHOW GRANTS FOR jsmith;---------------------------------------------------------------------- | Grants for jsmith% | ----------------------------------------------------------…...

Java死锁

什么是死锁&#xff1f; 多个线程同时被阻塞&#xff0c;它们中的一个或者全部都在等待某个资源被释放。由于线程被无限期地阻塞&#xff0c;因此程序不可能正常终止。 死锁的必要条件&#xff1a; 1、互斥条件&#xff1a;该资源任意一个时刻只由一个线程占用。 2、请求与…...

BloomFilter原理学习

文章目录BloomFilter简单介绍BloomFilter中的数学知识fpp(误判率/假阳性)的计算k的最小值公式总结编程语言实现golang的实现[已知n, p求m和k](https://github.com/bits-and-blooms/bloom/blob/master/bloom.go#L133)参考BloomFilter简单介绍 BloomFilter我们可能经常听到也在使…...

C语言老题新解第1-5题

文章目录1 互不相同且无重复数字2 企业利润提成3 两个完全平方数4 判断一年的第几天5 三个整数比较大小1 互不相同且无重复数字 1 有1, 2, 3, 4四个数字&#xff0c;能组成多少互不相同且无重复数字的三位数&#xff1f;都是多少&#xff1f; 最简单当然是三重循环嵌套在一起…...

【数据库系列】MQSQL历史数据分区

互联网行业企业都倾向于mysql数据库&#xff0c;虽说mysql单表能支持亿级别的数据量&#xff0c;加上索引优化下查询速度&#xff0c;勉强能使用&#xff0c;但是对于追求性能和效率的互联网企业&#xff0c;这是远远不够的。Mysql数据库单表数据量到达500万左右&#xff0c;达…...

MyBatis常用的俩种分页方式

1、使用 limit 实现分页 select * from xxx limit m,n # m 表示从第几条数据开始&#xff0c;默认从0开始 # n 表示查询几条数据 select * from xxx limit 2,3 # 从索引为2的数据开始&#xff0c;往后查询三个。2、3、4 (1) 创建分页对象&#xff0c;用来封装分页的数据 PS…...

RPC通信原理解析

一、什么是RPC框架&#xff1f; RPC&#xff0c;全称为Remote Procedure Call&#xff0c;即远程过程调用&#xff0c;是一种计算机通信协议。 比如现在有两台机器&#xff1a;A机器和B机器&#xff0c;并且分别部署了应用A和应用B。假设此时位于A机器上的A应用想要调用位于B机…...

【蓝桥杯集训·周赛】AcWing 第93场周赛

文章目录第一题 AcWing 4867. 整除数一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解第二题 AcWing 4868. 数字替换一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解第三题 AcWing 4869. 异或值一、题目1、原题…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...