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

CSS —— 界面布局

news 文章来源：https://blog.csdn.net/m0_73557953/article/details/142109786 2025/5/16 1:25:27

flexbox - 弹性盒子布局（弹性布局）

一维方向，横纵向排列。

采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"

flex-direction

用于设置主轴方向；子元素默认是按照主轴线排列的，所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式

row（默认）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿

主轴 &交叉轴：交叉轴垂直于主轴

flex-wrap

用于设置自动换行；如果flexbox 容器（container）的宽度不足以存放所有 flex元素，就会出现滚动条，确保所有的 flex元素都在一行；若想实现超出container的宽度就自动换行，可设置flex-wrap: wrap

nowrap（默认）：不换行
wrap：换行，换到下面
wrap：换行，换到上面

flex-flow

flex-direction和flex-wrap的简写形式，默认为row nowrap

flex-basis

定义元素的基础宽度（是在默认主轴方向为row的时候；当修改flex-direction为column时，主轴方向就为列，那此时flex-basis这个属性控制的就是元素的高度；还需要注意的是，当你设置了width又设置了flex-basis那width的值就会被flex-basis覆盖掉。）

<!DOCTYPE html>
<html lang="en">
<head><style>.wrapper {/* 内部显示规则为flexbox布局；外部显示规则时block (div class="wrapper") */display: flex; /* 指定flex元素的间距 */gap: .5em; /* 设置水平为主轴，左侧为起点，换行 */flex-flow: row wrap;}.wrapper > div {/* 边框  属性值：边框线粗细像素 线条种类 线条颜色 */border:1px solid black;}</style>
</head>
<body><div class="wrapper">  <div>1</div><div>2</div><div> 3<br>3<br>3<br>3</div><div>444</div><div style="flex-basis: 300px">5</div><div style="flex-basis: 200px">6</div><div style="flex-basis: 100px">777777777777777</div><div>8888888888888</div></div>
</body>
</html>

flex-grow

如果有剩余空间，这个元素可以分配到多少的比例

<!DOCTYPE html>
<html lang="en">
<head><style>.wrapper {display: flex;gap: .5em; flex-flow: row wrap;border:1px solid red;}.wrapper > div {border:1px solid black;}</style>
</head>
<body><div class="wrapper">  <div>1</div><div>2</div><div> 3<br>3<br>3<br>3</div><div style="flex-grow: 3">5</div><div style="flex-grow: 2">6</div><div style="flex-grow: 1">7</div><div>8888888888888</div>  </div>
</body>
</html>

flex-shrink

注意：不要设置wrap自动换行，才能看出来

如果 flex容器空间比所有 flex元素空间总和小，这个元素空间缩减的比例

参考：

flex 的三个参数：flex-grow、flex-shrink、flex-basis_flex属性的三个值-CSDN博客

深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 实战讲解-CSDN博客

主轴对齐——justify-content

flex-start：flex元素和容器主轴方向开始位置对齐（左对齐；flex-direction默认值为row）
flex-end：flex元素和容器主轴方向结束位置对齐（右对齐）
center：flex元素和容器主轴方向中间位置对齐
space-between：flex元素均匀分布在主轴上，间距相同；第一个 flex元素和 container的主轴方向开始位置平齐，最后一个 flex元素和 container的主轴方向结束位置平齐
space-around：flex元素均匀分布在主轴上，间距相同；第一个 flex元素和 container的主轴方向开始位置的间距以及最后一个 flex元素和 container的主轴方向结束位置的间距都是flex元素间距的一半
space-evenly：flex元素均匀分布在主轴上，间距相同；第一个 flex元素和 container 的主轴方向开始位置的间距以及最后一个 flex元素和 container的主轴方向结束位置的间距都于flex元素间距相同

从轴对齐——align-items

该属性缺省的条件下，所有的 flex元素和最高的flex元素保持一致

flex-start：flex元素和容器从轴方向的开始位置对齐（上边对齐）
flex-end：flex元素和容器从轴方向的结束位置对齐（下边对齐）
center：flex元素和容器从轴方向的中间位置对齐

grid - 网格布局

可以定义由行和列组成的二维布局。

列布局

grid-template-columns

指定列的数量和宽度；

指定网格的固定宽度

grid-template-columns: 100px 200px 300px; => 指定了网格有3列，从左到右，每列的宽度分别是 100px、 200px、 300px

指定每列的宽度占container宽的比例

grid-template-columns: 1fr 2fr 3fr; => 指定了网格有3列，从左到右，每列的宽度分别是container宽的 1/6、 1/3 (2/6)、 1/2 (3/6)

好处：网格的列宽可以随着 container 宽度的变化而动态的变化，始终占满 container宽度

grid-template-columns: 20% 30% 40%; => 表示这列占 container 的宽的百分比

固定宽度和比例混合使用

grid-template-columns: 200px 1fr 2fr; => 指定了网格有3列，从左到右，第1列的宽度固定为 200px，剩余2列的宽度分别是container除了第1列剩余宽度的 1/3、 2/3

连续相同宽度

repeat()标记

{

        /* 等价于 200px 200px 200px */

        grid-template-columns: repeat(3, 200px);

        /* 等价于 1fr 1fr 1fr 1fr */

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

        /* 等价于 20px 1fr 1fr 1fr 1fr */

        grid-template-columns: 20px repeat(4, 1fr);

        /* 等价于 1fr 2fr 1fr 2fr 1fr 2fr */

        grid-template-columns: repeat(3, 1fr 2fr);

}

auto

列宽由内容决定

注意：

对于非固定宽度eg.1fr 1fr 1fr，如果cell里面的内容超过了当前cell的设定宽度，cell会自动变宽以适应内容的宽度。

而对于指定固定宽度eg.200px 200px 200px，如果cell里面的内容超过了当前cell的设定宽度，cell边界不会变化，cell里面的内容会跨越边界。

行布局

显式指定 —— grid-template-rows

指定行的数量和高度；但不能限定总行数

<!DOCTYPE html>
<html lang="en"><head><style>body{height: 100vh;/* 自己注释掉试一下；border边框区，margin外边距区域 ；去掉大盒子的外边距*/margin: 0; display: grid;/* 行间距为5px */gap: 5px;/* 指定了3行内容，其中导航栏和页脚高度由其内容决定，正文值为 1fr ，且没有其它fr（有2个fr就占1/2），表示该行的高度占满除了导航栏和页脚以外的全部高度 */grid-template-rows:  auto 1fr auto;}    div {border: 1px solid teal;}</style></head><body> <div>导航栏</div><div>正文<pre>2222222        </pre></div><div>页脚</div></body>
</html>

grid-template-columns没有指定，缺省值为none，只有一列

▲：grid-template-rows: 100px 100px; 只能指定前2行的高度是 100px，当元素超过2个时，后续元素产生在新行中，总数不受 grid-template-rows 指定行数限制。

gap属性：gap: 1.8em 1.3em; => 指明了行间距为1.8em ; 列间距为1.3em

gap: 1.8em 1.3em 是 row-gap 和 column-gap 的缩写
{row-gap: 1.8em;column-gap: 1.3em;
}
如果 row-gap 和 column-gap 一样，比如都是 1em，可以更简单的写为
{gap: 1em;
}

隐式指定（全局指定） —— grid-auto-rows

grid-auto-rows: 100px; => 不管产生的有多少行，都是 grid-auto-rows 指定的高度100px

几种特殊情况：

{       /* row 的高度由其内容决定 */

        grid-auto-rows: auto;

/* row 的高度是container的10% */

grid-auto-rows: 10%;

/*一组值的循环*/

        grid-auto-rows: 50px 100px 150px;

        grid-auto-rows: 0.5fr 3fr 1fr;

/*row 的高度由其内容决定，但至少是 100px；minmax 第1参数指定最小值，第2个参数指定最大值。规则是保证 min 一定满足的情况下，尽量取max值*/

        grid-auto-rows: minmax(100px, auto);

}

元素跨行跨列

网格线：grid布局，网格是由 网格线 划分而成的；从左到右，列网格线编号依次从1开始，从上到下，行网格线编号依次从1开始。

通常是一个子项占一个网格，当然也可以让一个子项占多个网格；怎么实现呢？

——通过grid-column-start , grid-column-end , grid-row-start , grid-row-end这四个属性；分别指定子项元素占据网格的起始线、终止线，从而指定占据多少个网格。

<!DOCTYPE html>
<html lang="en"><head><style>.wrapper {display: grid;gap: .8em .3em;grid-template-columns: repeat(3, 1fr);grid-auto-rows: 100px;}/* 指定列网格线从1->4 ; 行网格线从1->3 ; 也就是说box1占据了3列2行的空间 */.box1 {grid-column-start: 1;grid-column-end: 4;grid-row-start: 1;grid-row-end: 3;}/* 指定列网格线从1->2 ; 行网格线从3->5 ; 也就是说box1占据了1列2行的空间 */.box2 {grid-column-start: 1;grid-row-start: 3;grid-row-end: 5;}.wrapper > div {border: 1px solid teal;}</style></head><body>  <div class="wrapper"><div class="box1">One</div><div class="box2">Two</div><div class="box3">Three</div><div class="box4">Four</div><div class="box5">Five</div></div></body>
</html>

▲：结束边界线如果不指定，缺省为起始位置+1 ；

剩余的没有指定的 grid 条目元素，在不重叠的前提下，尽量按照从上到下，从左到右的次序摆放

简写：

1.
  .box1 {grid-column: 1 / 4;grid-row: 1 / 3;}.box2 {grid-column: 1;grid-row: 3 / 5;}
2.使用 span 指定跨几个格子。
  .box1 {grid-column: 1 / span 3;grid-row: 1 / 3;}.box2 {grid-column: 1;grid-row: 3 / span 2;}
3.使用负数指定网格线，表示反方向计数的网格线
  .box1 {grid-column: 1 / -1;grid-row: 1 / 3;}

本文参考自：

22 flex布局容器六大属性_flex容器属性-CSDN博客

界面布局 - Flexbox | 白月黑羽

CSS布局----flex弹性布局(移动端完美解决方案）_flex-basis: auto;-CSDN博客

CSS —— 界面布局

flexbox - 弹性盒子布局（弹性布局） 一维方向，横纵向排列。采用flex布局的元素，称为 Flex 容器（flex container），简称"容器" flex-direction 用于设置主轴方向；子元素默…...

编程日记 2024/9/15 16:43:23

SpringBoot万级并发-jemeter-Address already in use: connect

一、场景用Jmeter压力单测接口的时候，发现报 Response code:Non HTTP response code: java.net.BindException Response message:Non HTTP response message: Address already in use: connect 然后我这边是wondows的电脑操作压测的，操作系统win10&…...

编程日记 2024/9/15 16:42:22

![](地毯填补问题 - 洛谷) #include<bits/stdc.h> using namespace std; #define qw dfs(zxl-1,zyl-1,zx,zy,l); #define we dfs(zxl-1,zyl,zx,zyl,l); #define er dfs(zxl,zyl-1,zxl,zy,l); #define rt dfs(zxl,zyl,zxl,zyl,l);void dfs(int x,int y,int zx,int zy,int…...

编程日记 2024/9/15 16:41:20

【计算机网络】UDP TCP介绍

UDP & TCP介绍 UDP报文格式报文内容介绍端口号报文长度校验和载荷 TCP报文格式初步了解TCP机制确认应答超时重传连接管理滑动窗口流量控制拥塞控制紧急传输数据推送延时应答捎带应答面向字节流异常处理心跳机制 UDP 和 TCP 的区别 UDP 报文格式对于网络协议, 本质上就是…...

编程日记 2024/9/15 16:40:19

JDBC初相识

文章目录 JDBC的由来JDBC的好处 JDBC核心API的介绍JDBC会用到的包JDBC四个核心对象JDBC访问数据库的步骤客户端操作MySQL数据库的方式使用第三方客户端来访问MySQL：SQLyog、Navicat 使用MySQL自带的命令行方式通过Java来访问MySQL数据库，今天要学习…...

编程日记 2024/9/15 16:39:18

Go语言现代web开发07 map字典

Maps are complex data types used to store key-value pairs. Each key can appear only once on the map and can be used to find the value paired with that key. The default value for the map is nil. A nil map has no keys and keys cannot be added. 映射是用于存储…...

编程日记 2024/9/15 16:37:16

AI工具一键制作爆火的“汉语新解“卡片！

最近出现了一种很火的新玩法“汉语新解”。 AI把一个词汇，以一种特殊的视角，用幽默、讽刺等方式重新定义，然后生成一张精美的卡片。这个玩法和之前我发的的吐槽工具玩法类似，主打的就是一个新颖、情绪释放。今天教大家怎么快速…...

编程日记 2024/9/15 16:33:07

windows检查端口占用并关闭应用

要在Windows CMD中找到占用8888端口的应用并关闭该应用，你可以按照以下步骤操作： 打开命令提示符（CMD）。你可以通过在搜索栏输入 cmd 或使用 Win R 快捷键，然后输入 cmd 并回车来打开。查找占用8888端口的进程。在C…...

编程日记 2024/9/15 16:30:04

机器学习-聚类算法

机器学习-聚类算法 1.AHC2. K-means3. SC4.MCL 仅个人笔记，感谢点赞关注！ 1.AHC 2. K-means 3. SC 传统谱聚类：个人对谱聚类算法的理解以及改进 4.MCL 目前仅专注于NLP的技术学习和分享感谢大家的关注与支持！...

编程日记 2024/9/15 16:27:57

keil 中 printf重定向

int fputc(int ch, FILE *f) {HAL_UART_Transmit(&huart1, (void*)&ch, 1, 1000);return ch;} 同时勾选，使用微库...

编程日记 2024/9/15 16:25:55

yum下载软件失败：‘Could not resolve host: mirrorlist .centos .org； Unknowm error

Loaded plugins: fastestmirror, ovl Determining fastest mirrors Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86_64&repoos&infracontainer error was 14: curl#6 - “Could not resolve host: mirrorlist.centos.org; Unknow…...

编程日记 2024/9/15 16:23:50

云轴科技ZStack 获鲲鹏应用创新大赛2024上海赛区决赛一等奖

9月13日，鲲鹏应用创新大赛2024上海赛区决赛成功举办。经评委专家从方案创新性、技术领先性、商业前景以及社会价值四个维度严格评审，云轴科技ZStack参赛作品《ZStack鲲鹏原生开发方案》荣获上海赛区企业赛——原生开发赛道（互联网&#xff09…...

编程日记 2024/9/15 16:21:58

沉浸式体验Stability AI最新超强AI图片生成模型Ultra

2024年9月4日，亚马逊云科技在Amazon Bedrock上新了Stability AI最新的的三款文本图像生成模型：他们分别是Stable Image Ultra、Stable Diffusion 3 Large 和 Stable Image Core。全新的模型在处理多主题提示词、图像质量和图片排版上较上一代模型有显著提…...

编程日记 2024/9/15 16:20:57

网络安全宣传周的时间，举办活动的方式和意义

网络安全宣传周是中国国家层面为提升公众网络安全意识、普及网络安全知识、推广网络安全技能而设立的一项重要活动。以下是对网络安全宣传周的时间，举办活动的方式和意义的介绍： 时间：国家网络安全宣传周自2014年首次举办以来，每…...

编程日记 2024/9/15 16:19:56

Jacoco的XML报告详解

使用jacococli完成jacoco测试报告生成后，会看到有一个.xml结尾的文件，这个就是xml格式的覆盖率报告。除了xml还有csv、html格式的报告，本文进介绍xml报告。 DTD文件在介绍jacoco的xml报告之前，我们应该先看一下对应的DTD文件的内容。(DTD的全称为Document Type Definitio…...

编程日记 2024/9/15 16:18:54

【数据结构与算法 | 灵神题单 | 合并链表篇】力扣2, 21, 445, 2816

1. 力扣2：两数相加 1.1 题目： 给你两个非空的链表，表示两个非负的整数。它们每位数字都是按照逆序的方式存储的，并且每个节点只能存储一位数字。请你将两个数相加，并以相同形式返回一个表示和的链表。你可…...

编程日记 2024/9/15 16:17:53

【秒达开源】多功能中文工具箱源码：自部署全开源轻量级跨平台 GPT级支持+高效UI+Docker

【秒达开源】多功能中文工具箱源码发布：自部署、全开源、轻量级跨平台，GPT级支持高效UI，Docker/便携版任选，桌面友好丰富插件生态这是一款集大成之作，专为追求高效与便捷的用户量身打造。它不仅支持完全自部署&#…...

编程日记 2024/9/15 16:14:46

【云原生安全篇】一文掌握Harbor集成Trivy应用实践

【云原生安全篇】一文掌握Harbor集成Trivy应用实践目录 1 概念 1.1 什么是 Harbor 和 Trivy？ 1.1.1 Harbor 1.1.2 Trivy 1.2 Harbor 与 Trivy 的关系 Trivy 在 Harbor 中的作用： 1.3 镜像扫描工作流程 2 实战案例：在Harbor 配置 Trivy …...

编程日记 2024/9/15 16:12:23

计算机网络30——Linux-gdb调试命令makefile

1、开始调试编译时带-g为调试，带调试信息编译后的可执行文件更大 2、进入调试使用gdb 可执行文件名——进入调试失败版： 成功版： 3、l命令 l什么都不加——列出10行代码 l 行号——行号的行在中间，向上向下展示10行 4、st…...

编程日记 2024/9/15 16:10:18

【物联网】一篇文章带你认识RFID(射频识别技术)

基本原理 RFID是Radio Frequency Identification的缩写，即射频识别技术，其工作原理基于电磁感应理论（射频一般指微波，频段在1-100GHz，适用于短距离通信），是一种非接触式的自动识别技术&#xf…...

编程日记 2024/9/15 16:05:04

STM32G474RE之RTC

STM32G474RE之RTC使用HAL库实现RTC时间配置，以及报警配置，支持双路报警。 1、STM32G474RE的RTC晶振引脚： OSC32_IN为PC14，OSC32_OUT为PC15； 2、Vbat引脚 Vbat引脚是用来给外部晶振LSE和备份寄存器提供电源。当没有“…...

编程日记 2024/9/15 16:04:04

TwinCAT3 实时核中ADS实现C++ server、clinet数据传输

一、基本概念 ADS ：Automation Device Specification，ADS设备间进行通信的协议规范。协议定义了ADS device之间如何寻址对方、ADS device之间可以执行哪些操作、执行这些操作需要哪些参数，以及操作完成后如何返回结果等。从编程角度看&#…...

编程日记 2024/9/15 16:00:00

apt：Debian 高级包管理器

apt 是 Advanced Package Tool 的缩写。 apt 是一个在 Debian 及其衍生版本（如 Ubuntu）上管理软件包的工具。以下是一些常见的 apt 命令和用法： 1. 更新软件包列表 sudo apt update2. 安装软件包 sudo apt install package_nam…...

编程日记 2024/9/15 15:55:57

基于React+JsonServer+Antddesign的读书笔记关联系统

文章目录涉及技术系统功能JsonServer介绍JsonServer安装JsonServer使用创建React项目我的书架显示效果关键代码笔记显示效果关键代码人物关系显示效果关键代码个人中心显示效果关键代码完整代码和数据下载地址项目启动步骤启动json-server启动react项目涉及技术 React Antddes…...

编程日记 2024/9/15 15:51:54

【win工具】win安装flameshot并设置截图快捷键

1.下载flameshot软件2.windows端配置flameshot快捷键3.取消win自带截图快捷键 1.下载flameshot软件 https://flameshot.org/#download installer版本为安装包 portable版本为免安装版 2.windows端配置flameshot快捷键 https://cloud.tencent.com/developer/article/2114952 W…...

编程日记 2024/9/15 15:50:52

react 安装使用 antd+国际化+定制化主题+样式兼容

安装antd 现在从 yarn 或 npm 或 pnpm 安装并引入 antd。 yarn add antd修改 src/App.js，引入 antd 的按钮组件。 import React from react; import { Button } from antd;const App: React.FC () > (<div className"App"><Button type&q…...

编程日记 2024/9/15 15:48:51

【Kubernetes】常见面试题汇总（十六）

目录 48.简述 Kubernetes PodsecurityPolicy 机制能实现哪些安全策略？ 49.简述 Kubernetes 网络模型？ 50.简述 Kubernetes CNl 模型？ 48.简述 Kubernetes PodsecurityPolicy 机制能实现哪些安全策略？ 在 PodSecurityPolicy 对象…...

编程日记 2024/9/15 15:46:49

【mysql】mysql之优化

本站以分享各种运维经验和运维所需要的技能为主《python零基础入门》：python零基础入门学习《python运维脚本》： python运维脚本实践《shell》：shell学习《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战《k8…...

编程日记 2024/9/15 15:45:48

Django REST framework 实现缓存机制以优化性能

Django REST framework 实现缓存机制以优化性能页面首页中，导航菜单或轮播广告在项目中每一个页面都会被用户频繁访问到，所以我们可以实现缓存，减少MySQL数据库的查询压力，使用内存缓存可以加快数据查询速度。 cache_page 装饰…...

编程日记 2024/9/15 15:44:48

快速了解高并发解决方案

对《高并发的哲学原理》的个人总结，原书地址如下 https://pphc.lvwenhan.com/ 本书的核心思想就是拆分，服务细化拆分多资源并行。通用设计方法例子：每秒100万次http请求通过架构解决性能问题，在面对并发需求时&#xff…...

编程日记 2024/9/15 15:41:44