现今 CSS3 最强二维布局系统 Grid 网格布局

深入学习 CSS3 目前最强大的布局系统 Grid 网格布局

Grid 网格布局的基本认识

Grid 网格布局: Grid 布局是一个基于网格的二位布局系统,是目前 CSS 最强的布局系统,它可以同时对列和行进行处理(它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局)

CSS 布局的过渡: CSS 一直用于对页面进行布局,但一直都不是很完美

  • 1.一开始我们使用 table 做布局,然后转向浮动、定位以及 inline-block,但所有这些方法本质上都是 Hack 的方式,并且遗漏了很多重要的功能(例如垂直居中)

    • "Hack" 通常指的是一种快速、非标准或非预期的解决方案,用于绕过某些限制或问题
      
  • 2. 随着 CSS3 的引入,特别是 Flexbox 和 Grid 布局的出现,网页布局变得更加直观和灵活,减少了对这些 “Hack” 方法的依赖,Flexbox 和 Grid 提供了更强大的布局控制,解决了许多历史遗留的布局问题,如垂直居中、响应式设计等

  • 3. Flexbox 在一定程度上解决了这些问题,但它的目的是为了更简单的一维布局,而不是复杂的二维布局

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

  • 5. Grid 布局是第一个专门为解决布局问题而生的 CSS 模块

术语: 在深入了解网格的概念之前,我们需要了解一些重要的术语

  • 1. 网格容器与项目

    • 容器(Container): 设置了 "display: gird / inline-grid" 的元素,就称之为网格容器(grid container)

    • 项目(Item): grid 容器中的直接子元素就为网格项目(grid item)

      • .container {display: gird
        }
        
      • + 下面的 .container 元素就为网格容器(grid container),所有的直接子元素 .item 就为该网格容器的一个个项目(grid item)
        <div class="container"><div class="item"></div> <div class="item"><p class="sub-item"></p></div><div class="item"></div>
        </div>
        
  • 2. 行和列: 容器里面的水平区域称为 "行"(row),垂直区域称为 "列"(column)

    • 在这里插入图片描述
  • 3. 单元格: 行和列的交叉区域,称为 "单元格"(cell)

  • 4. 网格线: 划分网格的线,称为"网格线"(grid line),水平网格线划分出行,垂直网格线划分出列

    • 在这里插入图片描述

Grid 网格布局的使用

Grid 网格布局的属性主要分为两类: 一类定义在容器上面,称为容器属性,另一类定义在项目上面,称为项目属性

容器属性

display: 将元素定义为 grid contaienr,并为其内容建立新的网格格式化上下文(grid formatting context)

  • grid - 生成一个块级 (block-level) 网格

  • inline-grid - 生成一个行级 (inline-level) 网格

  • subgrid - 如果你的 grid container 本身就是一个 grid item(即,嵌套网格),你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小,而不是指定它自己的大小

  • .container {display: grid | inline-grid | subgrid;
    }
    
  • tip: 注意:column, float, clear, 以及 vertical-align 对一个 grid container 没有影响(即设置这些属性了也无效)

grid-template-columns / grid-template-rows: 划分行和列,使用空格来分隔的多个值来定义网格的列和行

  • grid-template-columns: - 属性定义每一列的列宽

  • grid-template-rows: - 属性定义每一行的行高

  • .container {display: grid; /* 定义网格布局 */grid-template-rows: 100px 100px 100px; /* 定义每一行行高 */grid-template-columns: 100px 100px 100px; /* 定义每一列列宽 */
    }+ 上面代码指定了一个三行三列的网格,列宽和行高都为 100px.item {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;border: 1px solid white;background-color: orange;color: white;
    }
    
  • <body><span>H</span><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div></div><span>H</span>
    </body>
    
  • 在这里插入图片描述

  • repeat(count,any-value): - 有时候,重复写同样的值非常麻烦,尤其网格很多时 → 这时,可以使用repeat()函数,简化重复的值

    • + 通过 repeat 函数来简化上面的写法
      .container {display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);
      }
      
  • auto-fill 关键字: - 有时,单元格的大小是固定的,但是容器的大小不确定 → 如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用 “auto-fill” 关键字表示自动填

    • .container {display: grid;grid-template-columns: repeat(auto-fill, 100px); /* 具体多少列根据容器大小自动划分(每列列宽 100px) */grid-template-rows: repeat(3, 100px);
      }+ 下图列数只是某一容器大小的示例图,并非所有,具体列数根据对应的容器大小与列宽有关
      
    • 在这里插入图片描述

  • auto-fit 关键字: - 该关键字与上面的 auto-fill 的行为基本是相同的,都会尽可能的生成更多的列或行,但是两者也存在一点区别

    • auto-fill 不管单元格是否中是否有元素,都会生产对应单元格的空间

    • auto-fit 则是如果单元格中没有元素时,会将对应的列宽收缩为 0

    • 上面文字描述起来可能比较抽象,如下两图示例(为了更好的展示对应的区别,先将上面单元格的数量缩减成 3 个先)

    • 在这里插入图片描述

    • 在这里插入图片描述

    • 🔺可以理解为 auto-fill 会尽可能的沾满容器空间,所以可能会存在一些空单元格 → 而 auto-fit 不会因为容器还有剩余宽度而进行生成更多的单元格,而是会收缩网格(只生成对应有内容的单元格 - 🔺常用)

  • fr 关键字: - 网格布局提供了fr关键字(fraction 的缩写,意为"片段"),该关键字可以更方便的定义单元格之间的比例关系

    • 如下三列宽分别为 1fr 2fr 3fr 时,就表示第二项是第一项的两倍,第三项就是第一项的三倍

    • 在这里插入图片描述

    • 在这里插入图片描述

  • minmax(min,max): - 该函数可以生成一个长度范围,表示长度在这个范围之中

    • minmax(300px, 1fr) 就表示列宽不小于 300px,不大于 1fr
    • 在这里插入图片描述
  • auto 关键字: - 该关键字表示长度由浏览器进行决定(也可以理解为默认会自动吸收对应容器的剩余长度,当然如果对应单元格元素设置了 min-width/max-width 当达到对应的最值时,对应的效果可能就会有些出入)

    • 在这里插入图片描述
  • auto / fr / minmax: - 该三个对应的功能都比较类似,都会自动吸收容器的剩余空间,但如果同时存在时也会有对应的优先级与对应需要注意的问题

    • 优先级: - minmax 优先级大于 fr,fr 的优先级
    • tip: - 为了保证最小空间,网格可能会超出容器元素的范围(auto 的最小宽度为 fit-content,即内容宽度)
  • 网格线的名称: - grid-template-columns 属性和 grid-template-rows 属性里面,还可以使用方括号,指定每一根网格线的名字,后面网格项目(item)可以使用对应的网格线名称,可以更加方便将项目元素布局到对应想要的位置上(网格项目中具体如何使用,后面网格项目属性讲到时再进行演示)

    • .container {display: grid;grid-template-columns: [col-1] 100px [col-2] auto [col-3] 100px [col-4];grid-template-rows: [row-1] 100px [row-2] 100px [row-3] 100px [row-4];
      }
      
    • 在这里插入图片描述

gap / row-gap / column-gap : 用来设置行与行之间的间隔(行间距),与列与列的间隔(列间距)

  • + 普通写法{row-gap: 设置行与行之间的间隔(行间距); column-gap: 设置列与列之间的间隔(列间距); }+ 我们也可以上面两个属性的简写属性 gap 来快速设置对应的间隔: gap: row-gap column-gap{gap: 行间距 列间距;}+ 当行间距与列间距相同时,我们也可以只需写一个值{gap: 行列间距;}
    
  • .container {...row-gap: 12px; /* 设置行间距 */column-gap: 12px; /* 设置列间距 */
    }
    
  • 在这里插入图片描述

grid-auto-flow: 用于指定网格中项目的放置流向(放置顺序),值通常为 row(先行后列) 或 column(先列后行),默认为 row 即先行后列 基本效果如下示例图

  • 在这里插入图片描述

  • grid-auto-flow 属性除了可以设置成 rowcolumn,还可以设置成 row densecolumn dence,第二个值主要用于某些项目在指定完位置后,剩下的项目怎么放置(如: 先行后列,并且尽可能紧密填满) 文字描述可能会比较抽象,我们可以通过下面几张图来进行理解

    • 在这里插入图片描述

    • 在这里插入图片描述

grid-template-areas: 网格布局中允许通过该属性来指定一些区域(area),每一个区域由一个或多个单元格组成

  • {grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-template-areas:"a b c""d e f""g h i";
    }
    + 例1: 如上述代码就相当于给网格划分出 9 个单元格,人后然后将其定名为 a-i 的九个区域,分别对应这九个单元格
    
  • {grid-template-areas: 'a a a''b b b''c c c';
    }
    + 例2: 上面代码将 9 个单元格分成 a、b、c 三个区域
    
  • {grid-template-areas: 'a . c''d . f''g . i';
    }
    + 例3: 如果某些区域不需要利用,则使用 "点"(.)表示
    
  • grid-template-areas: "header header header""main main sidebar""footer footer footer";
    + 🔺例4: 上面代码中,顶部是页眉区域 header,底部是页脚区域 footer,中间部分则为 main 和 sidebar
    
  • 作用: - 当在网格容器中划分好对应的区域后,我们可以在子元素(网格项目)中通过 grid-area 属性,来对某一个网格项目快速的放置到对应的区域中(具体图例演示,在后面项目属性 grid-area 中进行更加直观的示例)

  • tip: - 需要注意区域的命名会影响到网格线,每个区域的起始网格线会自动命名为 "区域名-start",终止网格线会自动命名为 "区域名-end"

place-items / justify-items / align-items: 这些属性用于设置单元格中元素的摆放位置,justify-items 水平方向,align-items 垂直方向,place-items 前面两个的简写方式

  • + 属性值: 左 中 右 拉伸
    .container {justify-items: start | end | center | stretch;align-items: start | end | center | stretch;place-items: <align-items> <justify-items>; /* 简写: 如果只写一个值时,将会认为这两个值相等 */
    }+ 对应属性值的作用(及对应 justify-items 示例图):- start - 对齐单元格的起始边缘- end - 对齐单元格的结束边缘- center - 单元格内部居中- stretch - 拉伸,占满单元格的整个宽度(默认值) → 当元素没有指定具体的大小时
    
  • 在这里插入图片描述

place-content / justify-content / align-content: 这些属性用于定义整个网格区域在容器元素的摆放位置,justify-content 水平方向,align-content 垂直方向,place-content 前面两个的简写方式

  • + 属性值: 这些属性值跟 flex 布局中的基本一致
    .container {justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly;  place-content: <align-content> <justify-content>; /* 简写: 如果只写一个值时,将会认为这两个值相等 */
    }+ 对应属性值的作用(及对应 justify-content 示例图):- start - 对齐容器的起始边框(默认)- end - 对齐容器的结束边框- center - 容器内部居中- stretch - 项目大小没有指定时,拉伸占据整个网格容器(即没有通过 grid-template-columns / grid-template-rows 指定对应列宽或行高时)- space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍- space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔(两端对齐)- space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔
    
  • 在这里插入图片描述

grid-auto-rows / grid-auto-columns: 用于指定一些自动生成的行和列,对应的行高与列宽(如: 当一个网格是三行三列的,但里面某一个网格项目指定在第 5 行等等,此时网格就会自动生成一些行或列 或在一个三行三列的网格中只有 9 个单元格,但网格中的元素却超出了九个时,此时也会自动生成一行或列) 这些自动生成的行或列,对应的行高或列宽是 fit-content 适应内容的 而该两个属性就是用来指定一些自动生成的行或列对应的行高与列宽的

  • 如下示例: 在一个三行三列的网格容器中,有十个子元素 → 因为网格单元格不够,就会自动生成一行,我们可以通过 grid-auto-row 属性来指定对应自动生成行的行高(列同理)

    • .container {gap: 6px;display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-auto-rows: 100px; /* 指定自动生成的行的行高大小 */
      }
      
    • 在这里插入图片描述

grid-template / grid:

  • grid-template: - 该属性为 grid-template-columnsgrid-template-rowsgrid-template-areas 这三个属性的简写形式
  • grid: - 该属性为 grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow 这六个属性的简写形式
  • tip: - 从易读易写的角度考虑,还是建议不要合并属性,所以这里就不详细介绍这两个属性了

项目属性

grid-row-start / grid-row-end / grid-column-start / grid-column-end :

  • (1)用于定义某个网格项目的的位置,通过指定项目的四个边框,分别定位在哪根网格线上

    • + 如下: 将第一个网格项目的网格项的行和列都在对应行或列的 1 到 3 网格线上
      .item1 {grid-row-start: 1; /* 定义项目行开始线 */grid-row-end: 3; /* 定义项目行结束线 */grid-column-start: 1; /* 定义项目列开始线 */grid-column-end: 3; /* 定义项目列结束线 */
      }
      
    • 在这里插入图片描述

  • (2)这四个属性的值,除了指定为第几个网格线,还可以指定为网格线的名字

    • .container {width: 400px;display: grid;gap: 6px;/* 给网格容器对应的网格线命名 */grid-template-columns: [column-1] 100px [column-2] 100px [column-3] 100px;grid-template-rows: [row-1] 100px [row-2] 100px [row-3] 100px;
      }/* 通过命名网格线来指定 item1 对应的放置位置 */
      .item1 {grid-row-start: row-1;grid-row-end: row-3;grid-column-start: column-1;grid-column-end: column-3;
      }
      
    • 在这里插入图片描述

  • (3)在该四个属性上也可以使用 span 关键字 来表示跨越多少个网格(↓)

    • {grid-row-start: span 所要跨越的网格个数;grid-column-start: span 3; /* 如: 表示该项目在列上跨越 3 个单元格 */
      }
      
    • 在这里插入图片描述

grid-row / grid-column: 该两个属性为上面 grid-row-start / grid-row-end / grid-column-start / grid-column-end 属性的简写形式

  • .item {grid-column: <start-line> / <end-line>;grid-row: <start-line> / <end-line>;
    }+ 该两个属性只是上面的简写形式,所以具体就不做过多的演示了
    

grid-area: 属性用于指定项目放在哪一个区域,来快速放置对应项目到指定的位置上(具体网格区域的定义方式,参照前面)

  • 我们可以通过在网格容器上定义好对应的区域,在在对应的网格项目上通过该属性来指定项目所要放置的位置,从而实现快速的实现想要的布局效果,如下
  • 在这里插入图片描述

place-self / justify-self / align-self: 这些属性用于设置单元格内容的摆放位置,justify-self 水平方向,align-self 垂直方向,place-self 前面两个的简写方式

  • tip: 该三个属性与前面容器属性中 place-items / justify-items / align-items 的作用一样,不同的容器属性设置会作用在所有的单元格上,而该项目属性(slef)只作用于某个项目上(单元格)

  • .item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;
    }
    + 因为前面容器属性 justify-items 上已经解释了每个属性值的含义了,所以这里就不再过多的解释每一个属性值了
    
  • 在这里插入图片描述

其它属性补充

  • z-index: 如果单元格中的元素与其它单元格元素出现层叠是,可以通过该属性来指定对应的层叠顺序(与 position 层叠同理)

    • 例如: 因为元素的大小可以跟单元格的大小无关,即元素可以指定比单元格更大的大小,所以就有可能会超出到其它的单元格上 → 与其它单元格元素产生了层叠
    • 在这里插入图片描述
  • order: 属性规定了弹性容器中的可伸缩项目在布局时的顺序(flexbox),该属性再网格布局中同样适用,值越小越布局顺序越靠前(如下示例图)

    • 在这里插入图片描述

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

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

相关文章

PHP函数$_FILES详解

PHP函数$_FILES详解 在PHP中上传一个文件建一个表单要比ASP中灵活得多。具体的看代码。 <form enctype"multipart/form-data" action"upload.php" method"post"> <input type"hidden" name"MAX_FILE_SIZE" value…

嵌入式入门学习——8基于Protues仿真Arduino+SSD1306液晶显示数字时钟

0 系列文章入口 嵌入式入门学习——0快速入门&#xff0c;Let‘s Do It&#xff01; SSD1306 1 Protues查找SSD1306器件并放置在画布&#xff0c;画好电气连接&#xff08;这里VCC和GND画反了&#xff0c;后面仿真出错我才看见&#xff0c;要是现实硬件估计就烧毁了&#xf…

【时时三省】(C语言基础)函数介绍strncat

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 strncat 打印结果是hello wor 跟strcat不同的是他后面可以加一个参数 这个参数就是它可以根据后面的数字 来追加多少个字符 这个如果后面的参数改成10的话 就是打印hello world 不会跟strn…

Appium环境搭建、Appium连接真机

文章目录 一、安装Android SDK二、安装Appium-desktop三、安装Appium Inspector 一、安装Android SDK 首先需要安装jdk&#xff0c;这里就不演示安装jdk的过程了 SDK下载地址&#xff1a;Android SDK 下载 1、点击 Android SDK 下载 -> SKD Tools 2、选择对应的版本进行下…

诊断知识:NRC78(Response Pending)的回复时刻

文章目录 前言NRC78的使用场景客户需求解读Autosar Dcm中的定义工具链中的配置总结 前言 在项目开发过程中&#xff0c;客户变更需求&#xff0c;是关于NRC78的回复时间点的&#xff0c;该需求在Autosar Dem中也有对应的参数&#xff0c;DcmTimStrP2ServerAdjust&#xff08;针…

Cortex-A7:如何切换ARM和Thumb状态

0 参考资料 ARM Cortex-A(armV7)编程手册V4.0.pdf1 Cortex-A7&#xff1a;如何切换ARM和Thumb状态 1.1 Cortex-A7支持的指令集 Cortex-A7支持的指令集包括ARM指令集和Thumb-2&#xff08;ARM官方一般用Thumb表示&#xff09;指令集。 ARM指令集指令大小都是32位&#xff0c;…

CLion和Qt 联合开发环境配置教程(Windows和Linux版)

需要安装的工具CLion 和Qt CLion下载链接 :https://www.jetbrains.com.cn/clion/ 这个软件属于直接默认安装就行&#xff0c;很简单&#xff0c;不多做介绍了 Qt:https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/online_installers/ window 直接点exe Linux 先c…

【一种比较万能的方法删除磁盘里删除不了的文件】

一种比较万能的方法删除磁盘里删除不了的文件 只需要以下三步&#xff1a; 1、运行命令提示符&#xff08;以管理员身份打开&#xff09; 2、修复磁盘文件&#xff0c;运行命令 chkdsk 文件所在目录 /f 3、del 文件所在目录

手写Spring IOC-简易版

目录 项目结构entitydaoIUserDaoUserDaoImpl serviceIUserServiceUserServiceImpl ApplicationContext 配置文件初始化 IOC 容器RunApplication 注解初始化 IOC 容器BeanAutowired Reference 项目结构 entity User Data NoArgsConstructor AllArgsConstructor Accessors(chai…

计算DOTA文件的IOU

背景 在目标检测任务中&#xff0c;评估不同对象之间的重叠情况是至关重要的&#xff0c;而IOU&#xff08;Intersection Over Union&#xff09;是衡量这种重叠程度的重要指标。本文将介绍如何编写一个Python脚本&#xff0c;通过并行化处理DOTA格式的标注文件&#xff0c;统…

JDK17下,使用SHA1算法报Certificates do not conform to algorithm constraints错误

JDK17从17.0.5开始&#xff0c;默认不再允许使用SHA1算法&#xff0c;如果引用的jar包或代码里使用了SHA1算法&#xff0c;会报以下错误。 Caused by: javax.net.ssl.SSLHandshakeException: Certificates do not conform to algorithm constraintsat java.base/sun.security.…

演示:基于WPF的DrawingVisual开发的高刷新率示波器

一、目的&#xff1a;分享一个基于WPF的DrawingVisual开发的高刷新率示波器 二、效果演示 特此说明&#xff1a;由于Gif录制工具帧率不够&#xff0c;渲染60帧用了4.6秒&#xff0c;平均帧率在12Hz左右&#xff0c;所以展示效果不好&#xff0c;想要看好些的效果可以看文章下面…

python中堆的用法

Python 堆&#xff08;Headp&#xff09; Python中堆是一种基于二叉树存储的数据结构。 主要应用场景&#xff1a; 对一个序列数据的操作基于排序的操作场景&#xff0c;例如序列数据基于最大值最小值进行的操作。 堆的数据结构&#xff1a; Python 中堆是一颗平衡二叉树&am…

每日OJ题_牛客_集合_排序_C++_Java

目录 牛客_集合_排序 题目解析 C代码 Java代码 牛客_集合_排序 集合_牛客题霸_牛客网 (nowcoder.com) 题目解析 笔试题可直接用set排序&#xff0c;面试可询问是否要手写排序函数&#xff0c;如果要手写排序&#xff0c;推荐写快排。 C代码 #include <iostream> …

Redis中String类型数据扩容原理分析

大家好&#xff0c;我是 V 哥。在 Java 中&#xff0c;我们有动态数组ArrayList&#xff0c;当插入新元素空间不足时&#xff0c;会进行扩容&#xff0c;好奇 Redis 中的 String 类型&#xff0c;C 语言又是怎样的实现策略&#xff0c;带着疑问&#xff0c;咱们来了解一下。 最…

SOD-YOLOv8 - 增强YOLOv8以在交通场景中检测小目标

原文链接:中英文对照阅读 摘要 计算机视觉中的目标检测对于交通管理,紧急响应,自动驾驶车辆和智能城市至关重要。 尽管在目标检测上有重大进步,但在远程摄像头获取的图像中检测小目标仍具有挑战性,这主要是由于它们的大小、与摄像头的距离、形状的多样性和杂乱的背景所造…

集合框架07:LinkedList使用

1.视频链接&#xff1a;13.14 LinkedList使用_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1zD4y1Q7Fw?spm_id_from333.788.videopod.episodes&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5&p142.LinkedList集合的增删改查操作 package com.yundait.Demo01;im…

【判断推理】逻辑论证之归因论证

2.1 归因论证概述 归因&#xff1a;指人们对 他人或自己行为的原因的推论过程。具体而言&#xff0c;就是观察者对他人的行为过程或自己的行为过程所进行的因果解释和推论。&#xff08;通俗而言&#xff0c;归因就是对已经发生的事实&#xff0c;在众多可能的原因中找出一个原…

【大模型问答测试】大模型问答测试脚本实现(第二版)——接入pytest与代码解耦

背景 接上一篇&#xff0c;【大模型问答测试】大模型问答测试脚本实现&#xff08;第一版&#xff09;。 在实现自动化的时候&#xff0c;原先把很多方法与request请求写在一块了&#xff0c;趁着目前实现接口数量较少&#xff0c;决定对代码进行解耦&#xff0c;并且清晰目录…

Qt获取磁盘信息+表格显示

效果展示 主要代码 获取磁盘相关数据 获取磁盘数据 Qt 没有提供相关的接口&#xff0c;需要使用 Windows API。接口解释如下&#xff1a; BOOL GetDiskFreeSpaceExW([in, optional] LPCWSTR lpDirectoryName,[out, optional] PULARGE_INTEGER lpFreeBytesAvailable…