【工作记录】css3 grid布局笔记

概述

Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案,是目前唯一一种 CSS 二维布局

参数配置说明

属性说明可配置选项说明
grid-template-rows/grid-template-columns定义行高/列宽px: 固定值
%:百分比
fr: 片段,分配剩余空间
auto: 先于fr计算,获取必要的最小空间
repeat: 简化重复值
grid-auto-flow定义项目的排列顺序
控制排列方向
row: 先填入第一行
column: 先填入第一列
row dense: 按行填充空白
column dense:按列填充空白
grid-auto-rows/grid-auto-columns定义多余网格的行高/列宽
row-gap/column-gap行间距/列间距
gap同时设置行间距和列间距
grid-template-areas定义区域布局位置通过grid-area设置某个块处于哪个位置
justify-items/align-items设置内部布局相对于容器的水平/垂直位置stretch: 默认值,拉伸
start: 开始位置
center: 居中位置
end: 结束位置
place-itemsalign-items和justify-items的简写同时设置水平和垂直位置配置 参数同上
justify-content/align-content设置容器相对于外部区域的水平/垂直位置start: 从行首开始
end:从行尾开始
center: 居中
stretch: 拉伸 占满
space-around: 剩余空间平均分配
space-between: 平均分配行、列间距
space-evenly: 所有间距平均分配
place-contentalign-content和justify-content的简写配置参数同上
grid-row-start/grid-row-end/grid-column-start/grid-column-end每个单元格的位置配置,配置标识从第几根网格线开始到第几根网格线结束,也可以使用span 标识间隔几根网格线number: 从第几根网格线开始,到第几根网格线结束
name: 需要先定义网格线
span number: 标识跨域几根网格线
grid-column/grid-row上面配置的缩写形式1/3 标识从1开始到3结束
grid-area缩写形式1/1/3/3 标识行和列都是从1开始到3结束
align-self/justify-self单元格内容相对于单元格的水平和垂直位置stretch: 默认值 拉伸
start: 开始位置
center: 居中位置
end: 结束位置
place-self上面配置的缩写形式配置值同上

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

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

相关文章

Ubuntu 18.04 OpenCV3.4.5 + OpenCV3.4.5 Contrib 编译

目录 1 依赖安装 2 下载opencv3.4.5及opencv3.4.5 contrib版本 3 编译opencv3.4.5 opencv3.4.5_contrib及遇到的问题 1 依赖安装 首先安装编译工具CMake,命令安装即可: sudo apt install cmake 安装Eigen: sudo apt-get install libeigen3-…

重启redis的步骤

要重启 Redis,需要使用以下步骤: 登录到您的服务器:使用 SSH 或其他远程访问方式登录到托管 Redis 的服务器。 停止 Redis 服务器:您可以使用以下命令停止 Redis 服务器: redis-cli shutdown 这将向 Redis 服务器发送…

计算机的体系与结构

文章目录 前言一、冯诺依曼体系二、现代计算机的结构总结 前言 今天给大家介绍计算机的体系和结构,分为两个板块:冯诺依曼体系和现代计算机的结构。 一、冯诺依曼体系 冯诺依曼体系是将程序指令和数据一起存储的计算机设计概念结构。 冯诺依曼体系可以…

SPA项目之主页面--数据表格的增删改查

SPA项目之主页面--数据表格的增删改查 一.增删改查1.样式准备2.增加3.删除4.修改5.查询二.表单验证1.在表单中使用验证规则 一.增删改查 1.样式准备 <template><div class"books" style"padding: 20px;"><el-form :inline"true"…

c++视觉处理---高斯滤波

高斯滤波处理 高斯滤波是一种常用的平滑滤波方法&#xff0c;它使用高斯函数的权重来平滑图像。高斯滤波通常用于去除噪声并保留图像中的细节。在OpenCV中&#xff0c;可以使用cv::GaussianBlur()函数来应用高斯滤波。 以下是cv::GaussianBlur()函数的基本用法&#xff1a; …

【技能树笔记】网络篇——练习题解析(五)

目录 前言 一、应用层的作用 1.1 应用层的作用 二、HTTP协议 2.1 HTTP协议 三、FTP协议 3.1 FTP协议 四、DNS协议 4.1 DNS协议 五、DHCP协议 5.1 DHCP协议 六、邮件协议 6.1 电子邮件协议 总结 前言 本篇文章给出了CSDN网络技能树中的部分练习题解析&#xff0c…

如何把“中式发音”调整到机器偏爱的口音?Elena老师带你详解突破点!

目录 1.元音辅音不清晰 2.无重音式发音→缺少word stress(听起来有气无力&#xff0c;声音很慵懒/lazy) 3.拖音式发音拖音节来强调重音 4.机器人式无情感朗读→缺乏句子重音(念经式读法&#xff0c;没有节奏感) 带收音有话筒耳机 拿手机无话筒录 事实证明很多时候&#xf…

ChatGLM2-6B微调实践-Lora方案

ChatGLM2-6B微调实践-Lora方案 环境部署Lora微调项目部署准备数据集修改训练脚本adapter推理模型合并与量化合并后的模型推理 微调过程中遇到的问题参考&#xff1a; 环境部署 申请阿里云GPU服务器&#xff1a; CentOS 7.6 64Anaconda3-2023.07-1-Linux-x86_64Python 3.11.5G…

力扣2578. 最小和分割

题目描述&#xff1a; 给你一个正整数 num &#xff0c;请你将它分割成两个非负整数 num1 和 num2 &#xff0c;满足&#xff1a; num1 和 num2 直接连起来&#xff0c;得到 num 各数位的一个排列。 换句话说&#xff0c;num1 和 num2 中所有数字出现的次数之和等于 num 中所…

中小学生用护眼台灯好不好?好用不伤眼的台灯推荐

在现代社会&#xff0c;人们越来越注重眼睛的健康问题&#xff0c;尤其是对于在电子产品前工作或学习的人来说&#xff0c;护眼灯的需求变得越来越重要。护眼台灯专为保护眼睛而设计&#xff0c;具有多种功能和特点。当然市面上的台灯大同小异&#xff0c;但是在选择台灯时还是…

排序算法——选择排序

一、介绍&#xff1a; 选择排序就是按照一定的顺序从选取第一个元素索引开始&#xff0c;将其储存在一个变量值中&#xff0c;根据排序规则比较后边每一个元素与这个元素的大小&#xff0c;根据排序规则需要&#xff0c;变量值的索引值进行替换&#xff0c;一轮遍历之后&#x…

python向列表中添加元素

要向Python列表中添加元素&#xff0c;可以使用以下几种方法&#xff1a; 使用append()方法&#xff1a; append()方法用于在列表的末尾添加一个元素。例如&#xff1a; my_list [1, 2, 3] my_list.append(4) 现在&#xff0c;my_list将包含 [1, 2, 3, 4]。 使用insert()方法…

STM32 Cube项目实战开发过程中--调用Freemodbus通信出现异常问题原因分析--ADC DMA初始化顺序导致串口数据异常问题解决办法

文章目录 1.ADC与DMA初始化顺序导致使用Freemodbus串口通信异常&#xff1a;2.通信异常时串口初始化的顺序为&#xff1a;3.重新调整初始化位置后&#xff0c;通信问题解决&#xff1a;5.重新调整初始化位置后&#xff0c;通信正常&#xff1a;总结&#xff1a;Cube开发库系统默…

Linux虚拟机克隆之后使用ip addr无法获取ip地址

Linux虚拟机克隆之后使用ip addr无法获取ip地址 因为克隆得到的虚拟机&#xff0c;与原先的linux系统是一模一样的包括MAC地址和IP地址。需要修改信息。 设置IP地址&#xff1a; 使用vi命令打开linux的网卡 //ifcfg-enth0是虚拟网卡的名称&#xff0c;如果你的不叫这个名字&a…

Redis(六) 内存策略

文章目录 Redis内存回收一、过期策略Redis是如何知道一个key是否过期的&#xff1f;是不是TTL到期就立即删除呢&#xff1f; 二、淘汰策略 Redis内存回收 一、过期策略 Redis是如何知道一个key是否过期的&#xff1f; 利用两个Dict分别记录key-value对及key-ttl对 是不是TTL到…

如何在Go中使用操作符进行数学运算

引言 数字在编程中很常见。它们用于表示诸如:屏幕尺寸、地理位置、金钱和点数、视频中经过的时间、游戏角色的位置、分配数字代码的颜色等等。 在编程中有效地执行数学运算是一项需要开发的重要技能&#xff0c;因为你经常会用到数字。虽然对数学的深入理解肯定可以帮助你成为…

linux中Crontab定时参数

注&#xff1a;图片转载于 点我进入图片出处 * * * * * sh /data/var/test.sh >> test_crontab_log.log分钟 0~59 0表示没分周 小时 0~23 0表示每小时 天 1~31 *表示每天 月 1~12 *表示每月 周 0~7 */0/7表示每周

centos 中:Nginx开启https和局域网访问配置

随着网络应用的普及&#xff0c;越来越多的服务和应用开始运行在互联网上。这些服务和应用需要保护用户数据的机密性、完整性和可用性。HTTPS作为一种可防止中间人攻击的加密通信协议&#xff0c;可以有效地保护用户数据的安全性和隐私性。同时&#xff0c;对于在局域网内部运行…

Javaweb中的servlet中的消息体是什么?

2023年10月9日&#xff0c;周一晚上 目录 什么是消息体 什么是HTTP响应 HTTP响应由谁产生&#xff0c;发给谁 响应头具体有什么内容 Content-Type的值怎么写 HTTP响应例子 什么是消息体 消息体(message body)指HTTP响应中的实体主体内容。 什么是HTTP响应 在HTTP响应中…

MTK Logo 逆向解析之 rawx 全解压

紧接上一篇 MTK Logo 逆向解析之 bin 转 rawx 查看 zpipe 源码发现压缩使用 zlib 算法&#xff0c;其中也包含了解压的代码&#xff0c;但直接执行发现并不好使&#xff0c;有bug。很明显 mtk 并没有真正用过解压&#xff0c;那就需要我们自己来修复一下了&#xff0c;总比没…