grid了解

news2024/10/6 4:01:38

结构

   <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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

css中重难点整理

css中重难点整理

一、vertical-align 在学习vertical-align的时候&#xff0c;可能会很困惑。即使网上有一大推文章讲veitical-align,感觉看完好像懂了&#xff0c;等自己布局的时候用到vertical-align的时候好像对它又很陌生。这就是我在布局的时候遇到的问题。 本来vertical-align就很不好理…
阅读更多...
LeetCode分类刷题-----贪心算法

LeetCode分类刷题-----贪心算法

贪心算法贪心455.分发饼干376.摆动序列53.最大子序和122.买卖股票的最佳时机||55.跳跃游戏45.跳跃游戏||1005.K次取反后最大化的数组和134.加油站135.分发糖果860.柠檬水找零406.根据身高重建队列452.用最少数量的箭引爆气球![在这里插入图片描述](https://img-blog.csdnimg.cn…
阅读更多...
[算法和数据结构]--回溯算法之DFS初识

[算法和数据结构]--回溯算法之DFS初识

回溯算法——DFSDFS介绍(Depth First Search)DFS经典题目1. 员工的重要性2. 图像渲染3.被围绕的区域4.岛屿数量5. 电话号码的字母组合6.数字组合7. 活字印刷8. N皇后DFS介绍(Depth First Search) 回溯法&#xff08;back tracking&#xff09;&#xff08;探索与回溯法&#x…
阅读更多...
嵌入式和Python（二）：python初识及其基本使用规则

嵌入式和Python（二）：python初识及其基本使用规则

目录 一&#xff0c;python基本特点 二&#xff0c;python使用说明 ● 两种编程方式 ① 交互式编程 ② 脚本式编程 ● python中文编码 ● python行和缩进 ● python引号 ● python空行 ● python等待用户输入 ① 没有转换变量类型 ② 转换变量类型 ● python变…
阅读更多...
[Pytorch]DataSet和DataLoader逐句详解

[Pytorch]DataSet和DataLoader逐句详解

将自己的数据集引入Pytorch是搭建属于自己的神经网络的重要一步&#xff0c;这里我设计了一个简单的实验&#xff0c;结合这个实验代码&#xff0c;我将逐句教会大家如何将数据引入DataLoader。 这里以目标检测为例&#xff0c;一个batch中包含图片文件、先验框的框体坐标、目标…
阅读更多...
【C语言进阶：指针的进阶】你真分得清sizeof和strlen？

【C语言进阶：指针的进阶】你真分得清sizeof和strlen？

本章重点内容&#xff1a; 字符指针指针数组数组指针数组传参和指针传参函数指针函数指针数组指向函数指针数组的指针回调函数指针和数组面试题的解析这篇博客 FLASH 将带大家一起来练习一些容易让人凌乱的题目&#xff0c;通过这些题目来进一步加深和巩固对数组&#xff0c;指…
阅读更多...
基于注解@Transactional事务基本用法

基于注解@Transactional事务基本用法

关于概念性的放在最下面,熟读几遍 在使用时候也没多关注,总是加个Transactional 初识下 一般查询 Transactional(propagation Propagation.SUPPORTS) 增删改 Transactional(propagation Propagation.REQUIRED) 当然不能这么马虎 Spring中关于事务的传播 一个个测试,事…
阅读更多...
计算机网络第八版——第一章课后题答案（超详细）

计算机网络第八版——第一章课后题答案（超详细）

第一章 该答案为博主在网络上整理&#xff0c;排版不易&#xff0c;希望大家多多点赞支持。后续将会持续更新&#xff08;可以给博主点个关注~ 【1-01】计算机网络可以向用户提供哪些服务&#xff1f; 解答&#xff1a;这道题没有现成的标准答案&#xff0c;因为可以从不同的…
阅读更多...
操作系统——15.FCFS、SJF、HRRN调度算法

操作系统——15.FCFS、SJF、HRRN调度算法

这节我们来看一下进程调度的FCFS、SJF、HRRN调度算法 目录 1.概述 2.先来先服务算法&#xff08;FCFS&#xff0c;First Come First Serve&#xff09; 3.短作业优先算法&#xff08;SJF&#xff0c;Shortest Job First&#xff09; 4.高响应比优先算法&#xff08;HRRN&…
阅读更多...
Jackson CVE-2018-5968 反序列化漏洞

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

0x00 前言 同CVE-2017-15095一样&#xff0c;是CVE-2017-7525黑名单绕过的漏洞&#xff0c;主要还是看一下绕过的调用链利用方式。 可以先看&#xff1a; Jackson 反序列化漏洞原理 或者直接看总结也可以&#xff1a; Jackson总结 影响版本&#xff1a;至2.8.11和2.9.x至…
阅读更多...
【数据结构】AVL平衡二叉树底层原理以及二叉树的演进之多叉树

【数据结构】AVL平衡二叉树底层原理以及二叉树的演进之多叉树

1.AVL平衡二叉树底层原理 背景 二叉查找树左右子树极度不平衡&#xff0c;退化成为链表时候&#xff0c;相当于全表扫描&#xff0c;时间复杂度就变为了O(n) 插入速度没影响&#xff0c;但是查询速度变慢&#xff0c;比单链表都慢&#xff0c;每次都要判断左右子树是否为空 需…
阅读更多...
java Spring JdbcTemplate配合mysql实现数据批量修改

java Spring JdbcTemplate配合mysql实现数据批量修改

其实这个操作和批量添加挺像的 调的同一个方法 首先 我们看数据库结构 这是我本地的 mysql 里面有一个test数据库 里面有一张user_list表 然后创建一个java项目 然后 引入对应的JAR包 在src下创建 dao 目录 在下面创建一个接口 叫 BookDao 参考代码如下 package dao;impo…
阅读更多...
进程控制~

进程控制~

进程控制 &#xff08;创建、终止&#xff0c;等待&#xff0c;程序替换&#xff09; 进程创建&#xff1a; pid_t fork();父子进程&#xff0c;数据独有&#xff0c;代码共享&#xff0c;各有各的地址 pit_t vfork();父进程阻塞&#xff0c;直到子进程exit退出或者程序替换之…
阅读更多...
电力系统稳定性的定义与分类

电力系统稳定性的定义与分类

1电力系统稳定性的定义与分类 IEEE给出电力系统稳定性定义&#xff1a;电力系统稳定性是指电力系统这样的一种能力—对于给定的初始运行状态&#xff0c;经历物理扰动后&#xff0c;系统能够重新获得运行平衡点的状态&#xff0c;同时绝大多数系统变量有界&#xff0c;因此整个…
阅读更多...
自己写一个简单的IOC

自己写一个简单的IOC

什么是SpringIOC&#xff1f; 答&#xff1a;IOC即控制反转&#xff0c;就是我们不在手动的去new一个对象&#xff0c;而是将创建对象的权力交给Spring去管理&#xff0c;我们想要一个User类型的对象&#xff0c;就只需要定义一个User类型的变量user1&#xff0c;然后让Spring去…
阅读更多...
蓝桥杯-刷题统计

蓝桥杯-刷题统计

蓝桥杯-刷题统计1、问题描述2、解题思路3、代码实现3.1 方案一&#xff1a;累加方法(超时)3.2 方案二1、问题描述 小明决定从下周一开始努力刷题准备蓝桥杯竞赛。他计划周一至周五每天做 a 道题目, 周六和周日每天做 b 道题目。请你帮小明计算, 按照计划他将在 第几天实现做题数…
阅读更多...
KNN学习报告

KNN学习报告

原理 KNN算法就是在其表征空间中&#xff0c;求K个最邻近的点。根据已知的这几个点对其进行分类。如果其特征参数只有一个&#xff0c;那么就是一维空间。如果其特征参数只有两个&#xff0c;那么就是二维空间。如果其特征参数只有三个&#xff0c;那么就是三维空间。如果其特征…
阅读更多...
软件设计师教程（七）计算机系统知识-操作系统知识

软件设计师教程（七）计算机系统知识-操作系统知识

软件设计师教程 软件设计师教程&#xff08;一&#xff09;计算机系统知识-计算机系统基础知识 软件设计师教程&#xff08;二&#xff09;计算机系统知识-计算机体系结构 软件设计师教程&#xff08;三&#xff09;计算机系统知识-计算机体系结构 软件设计师教程&#xff08;…
阅读更多...
Redis十大类型——Hash常见操作

Redis十大类型——Hash常见操作

Redis十大类型——Hash常见操作命令操作简列存放及获取获取健值对长度元素查找列出健值对对数字进行操作赋值hsetnx很明显咯它也是以健值对方式存在的&#xff0c;只不过value也就是值&#xff0c;在这里也变成了一组简直对。 &#x1f34a;个&#x1f330;&#xff1a; 想必多…
阅读更多...
【Linux】P3 用户与用户组

【Linux】P3 用户与用户组

用户与用户组root 超级管理员设置超级管理员密码切换到超级管理员sudo 临时使用超级权限用户与用户组用户组管理用户管理getentroot 超级管理员 设置超级管理员密码 登陆后不会自动开启 root 访问权限&#xff0c;需要首先执行如下步骤设定 root 超级管理员密码 1、解除 roo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023