蓝桥杯备赛刷题——css

新鲜的蔬菜

这题需要使用grid

我不会

去学一下

一.什么是grid

Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。

display 属性

display: grid指定一个容器采用网格布局。


div {display: grid;
}

默认情况下,容器元素都是块级元素,但也可以设成行内元素。

div {display: inline-grid;
}
上面代码指定div是一个行内元素,该元素内部采用网格布局。

注意,设为网格布局以后,容器子元素(项目)的floatdisplay: inline-blockdisplay: table-cellvertical-aligncolumn-*等设置都将失效。

grid-template-columns 属性,
grid-template-rows 属性

容器指定了网格布局以后,接着就要划分行和列。grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。


.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
}

上面代码指定了一个三行三列的网格,列宽和行高都是100px

除了使用绝对单位,也可以使用百分比。


.container {display: grid;grid-template-columns: 33.33% 33.33% 33.33%;grid-template-rows: 33.33% 33.33% 33.33%;
}

(1)repeat()

有时候,重复写同样的值非常麻烦,尤其网格很多时。这时,可以使用repeat()函数,简化重复的值。上面的代码用repeat()改写如下。


.container {display: grid;grid-template-columns: repeat(3, 33.33%);grid-template-rows: repeat(3, 33.33%);
}

repeat()接受两个参数,第一个参数是重复的次数(上例是3),第二个参数是所要重复的值。

repeat()重复某种模式也是可以的。


grid-template-columns: repeat(2, 100px 20px 80px);

上面代码定义了6列,第一列和第四列的宽度为100px,第二列和第五列为20px,第三列和第六列为80px

fr 关键字

为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr2fr,就表示后者是前者的两倍。


.container {display: grid;grid-template-columns: 1fr 1fr;
}

上面代码表示两个相同宽度的列。

回到题目

.box{display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;
}
#box1 .item,#box3 .item:nth-child(2){grid-column: 2 / span 1;grid-row: 2 / span 1;
}
#box2 .item:nth-child(1),#box3 .item:nth-child(1){grid-column: 1 / span 1;grid-row: 1 / span 1;
}
#box2 .item:nth-child(2),#box3 .item:nth-child(3){grid-column: 3 / span 1;grid-row: 3 / span 1;
}

注意点:

这里box1,2,3是id选择器 前面要用#

#box2 .item是后代选择器,中间要有空格

#box1 .item,#box3 .item:nth-child(2)是并集选择器 中间要有,

电影院排座位

.seat-area{margin-top: 50px;font-size: 0;
}
.seat{display: inline-block;margin-right: 10px;margin-bottom: 10px;
}
.seat:nth-child(8n){margin-right: 0px;
}
.seat:nth-child(n+41){margin-bottom: 0px;
}
.seat:nth-child(8n-6){margin-right: 30px;
}
.seat:nth-child(8n-2){margin-right:30px;
}

这里偷学一下人家的代码

有点疑惑的是为什么“8n+6”不行

“8n-6”就可以

这个n到底是从几开始的

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

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

相关文章

前端三剑客 —— JavaScript (第二节)

目录 内容回顾 数据类型 基本数据类型: 引用数据类型: 常见运算 算术运算符 比较运算符 逻辑运算符 赋值运算符 自增/减运算符 三目运算符 位运算符 内容回顾 1.概述 2.基本数据 1.使用方式(行内、页面、外部) 2.对话框…

《手把手教你》系列基础篇(八十四)-java+ selenium自动化测试-框架设计基础-TestNG日志-上篇(详解教程)

宏哥微信粉丝群:https://bbs.csdn.net/topics/618423372 有兴趣的可以扫码加入 1.简介 TestNG还为我们提供了测试的记录功能-日志。例如,在运行测试用例期间,用户希望在控制台中记录一些信息。信息可以是任何细节取决于目的。牢记我们正在使…

Qt事件处理机制2-事件函数的传播

所有继承自QObject的类都有event函数,该函数用来处理自身的事件,函数定义如下: virtual bool QObject::event(QEvent *e);Qt帮助文档: This virtual function receives events to an object and should return true i…

Failed to delete XXXX.jar

Failed to delete XXXX.jar 问题:idea控制台报Failed to clean project:Failed to delete idea中点击maven->对应pom->lifecycle->clean时,报错 原因:target文件可能时编译的文件被其他程序占用,导致资源无法回收 解…

thinkphp6中使用监听事件和事件订阅

目录 一:场景介绍 二:事件监听 三:配置订阅 一:场景介绍 在项目开发中有很多这样的场景,比如用户注册完了,需要通知到第三方或者发送消息。用户下单了,需要提示给客服等等。这些场景都有一个…

重塑未来医疗:用AI挑战病例分析和误诊率的边界

市场分析 当前医疗行业正处于关键的转型期。伴随着人口老龄化速度的加快,例如在2020年,全球65岁及以上的老年人口比例已经超过了8.5%(联合国数据),并且预计到2050年这一数字将翻倍。此外,全球性健康问题也在…

SAP_ABAP_MM_PO审批_队列实践SMQ1

SAP ABAP 顾问(开发工程师)能力模型-CSDN博客文章浏览阅读1k次。目标:基于对SAP abap 顾问能力模型的梳理,给一年左右经验的abaper 快速成长为三年经验提供超级燃料!https://blog.csdn.net/java_zhong1990/article/det…

【春秋招专场】央国企——国家电网

国家电网目录 1.公司介绍1.1 业务1.2 组成 2.公司招聘2.1 招聘平台2.2 考试安排2.3 考试内容 3.公司待遇 1.公司介绍 1.1 业务 国家电网公司(State Grid Corporation of China,简称SGCC)是中国最大的国有企业之一,主要负责中国绝…

DS数模-Mathorcup妈妈杯C题思路

2024Mathorcup数学建模挑战赛(妈妈杯)C题保姆级分析完整思路代码数据教学 C题题目:物流网络分拣中心货量预测及人员排班 接下来我们将按照题目总体分析-背景分析-各小问分析的形式来 总体分析:题目要求我们处理的是一个关于物流…

在实体类中使用JSONObject对象

有时候我们的业务需求可能字段是json格式,这个时候我们的实体类就对应的也应该是json格式,需要使用到JSONObject这个对象,但是可能会使用不了这个对象,那接下来我将简单介绍如何使用这个对象。 以下为我的实体类中的某个字段&…

什么是云原生

什么是云原生 云原生的定义 aws: 云原生是在云计算环境中构建、部署和管理现代应用程序的软件方法。现代公司希望构建高度可伸缩、灵活和有弹性的应用程序,以便能够快速更新以满足客户需求。为此,他们使用了支持云基础设施上应用程序开发的现…

QT:QT实现TCP协议

1.服务器端 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer>//服务器端类 #include <QMessageBox>//消息对话框 #include <QTcpSocket>//客户端类 #include <QList>//链表容器类 QT_BEGIN_NAMESPACE nam…

cat,tac,nl,more,less,head,tail,od,touch-读书笔记(五)

文件内容查阅 cat 由第一行开始显示文件内容 tac 从最后一行开始显示&#xff0c;可以看出 tac 是 cat 的倒着写&#xff01; nl 显示的时候&#xff0c;顺道输出行号&#xff01; more 一页一页的显示文件内容 less 与 more 类似&#xff0c;但是比 more 更好的是&#x…

OpenAI 推出新网络爬虫GPTBot,为GPT-5做准备

目录 一、GPTBot是什么&#xff1f;它是如何工作的&#xff1f;二、GPTBot 与 Google Bot 等搜索引擎网络爬虫有何不同&#xff1f;三、GPTBot 与 Perplexity AI 的网络爬虫有何不同&#xff1f;四、允许 GPTBot 爬取有哪些风险和好处&#xff1f;4.1 允许 GPTBot 的好处4.2 允…

笔记-Building Apps with the ABAP RESTful Application Programming Model-Week3

Week3 Unit 1: The Enhanced Business Scenario 本节介绍了将要练习的demo的业务场景,在前两周成果的基础上,也就是只读列表,也可以说是报表APP基础上启用了事务能力,也就是CURD以及自定义业务功能的能力,从创建基本的behavior definition,然后behavior definition proj…

Blob 转 Uint8Array、Uint8Array 转 Blob、String 转 Uint8Array、Uint8Array 转 String、异或

Blob 转 Uint8Array blobToArrayBuffer(blob, callback) {let reader new FileReader();reader.onload function() {return callback(this.result);}reader.readAsArrayBuffer(blob); }Uint8Array 转 Blob // 假设我们有一个Uint8Array const uint8Array new Uint8Array([…

Python(8):文件的IO读写操作(操作普通文件/csv/excel)

文章目录 一、文件的IO读写操作1.常用的文件读取标志符2.普通文件的读操作 二、csv文件的读写操作1.读取操作2.读取时候跳过某一行3.列表方式写入csv文件4.字典方式写入csv文件 三、excel的数据操作&#xff08;非pandas模块&#xff09;1.读取excel的某个sheet的某一行的某一列…

【C++】stringstream

stringstream 定义于头文件 <sstream>&#xff0c;它其实是个别名&#xff0c;具体定义如下&#xff1a; typedef basic_stringstream<char> stringstream;<sstream> 定义了三个类&#xff1a;istringstream、ostringstream 和 stringstream&#xff0c;分别…

【WPF应用41】WPF中的Expander控件详解

Windows Presentation Foundation&#xff08;WPF&#xff09;中的Expander控件是一个用于显示详细信息的交互式UI元素。它允许用户通过点击标题来展开或折叠内容区域。Expander控件通常用于在界面上组织内容&#xff0c;提供一种可见/隐藏的功能&#xff0c;以帮助用户专注于当…

java数据结构与算法刷题-----LeetCode268. 丢失的数字

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 数学位运算 数学 解题思路&#xff1a;时间复杂度O( n n n)&…