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

CSS 中常见的布局相关属性及其功能分类

news 来源：原创 2025/9/15 16:20:04

一、块级布局（Block Layout）

1. `display`

作用：定义元素的显示方式。
常用值：
- block：块级元素，默认独占一行。
- inline：行内元素，与其他内容在同一行显示。
- inline-block：兼具块级和行内特性。
- flex：启用弹性布局。
- grid：启用网格布局。
- none：隐藏元素。
示例：
css
深色版本
```
div {display: flex;
}
```

二、弹性布局（Flexbox）

2. `flex-direction`

作用：定义主轴方向（即子项排列的方向）。
常用值：
- row（默认）：水平排列。
- column：垂直排列。
- row-reverse：水平反向排列。
- column-reverse：垂直反向排列。

3. `justify-content`

作用：控制主轴上的对齐方式。
常用值：
- flex-start：靠主轴起点对齐。
- flex-end：靠主轴终点对齐。
- center：居中对齐。
- space-between：两端对齐，剩余空间均匀分布。
- space-around：每个项目两侧的间距相等。
- space-evenly：所有项目的间距相等。

4. `align-items`

作用：控制交叉轴上的对齐方式。
常用值：
- stretch（默认）：子项拉伸以填满容器高度。
- flex-start：靠交叉轴起点对齐。
- flex-end：靠交叉轴终点对齐。
- center：居中对齐。
- baseline：基线对齐。

5. `align-self`

作用：为单个子项覆盖 align-items 的设置。
常用值：与 align-items 相同。

6. `flex-wrap`

作用：控制子项是否换行。
常用值：
- nowrap（默认）：不换行。
- wrap：换行。
- wrap-reverse：反向换行。

三、网格布局（Grid）

7. `grid-template-columns` 和 `grid-template-rows`

作用：定义网格的列和行的大小及数量。

示例：

css

深色版本

.grid-container {grid-template-columns: 1fr 2fr 1fr; /* 定义三列 */grid-template-rows: 100px auto; /* 定义两行 */
}

8. `grid-gap` / `gap`

作用：设置网格行和列之间的间距。

示例：

css

深色版本

.grid-container {gap: 20px; /* 行和列之间的间距均为 20px */
}

9. `justify-items` 和 `align-items`

作用：分别控制单元格在主轴和交叉轴上的对齐方式。
常用值：与 Flexbox 的 justify-content 和 align-items 类似。

10. `grid-auto-flow`

作用：控制自动放置子项的方式。
常用值：
- row（默认）：按行填充。
- column：按列填充。
- dense：尝试填补空白区域。

四、定位布局（Positioning）

11. `position`

作用：定义元素的定位方式。
常用值：
- static（默认）：普通文档流中的静态定位。
- relative：相对定位，相对于元素自身的位置偏移。
- absolute：绝对定位，相对于最近的已定位祖先元素。
- fixed：固定定位，相对于视口。
- sticky：粘性定位，根据滚动位置动态切换行为。

12. `top`, `right`, `bottom`, `left`

作用：设置元素相对于其定位上下文的偏移量。

示例：

css

深色版本

.element {position: absolute;top: 10px;left: 20px;
}

13. `z-index`

作用：控制重叠元素的堆叠顺序。

示例：

css

深色版本

.element {z-index: 10; /* 数值越大越靠上 */
}

五、浮动布局（Floats）

14. `float`

作用：使元素浮动到左侧或右侧。
常用值：
- left：左浮动。
- right：右浮动。
- none（默认）：不浮动。
示例：
css
深色版本
```
img {float: left;
}
```

15. `clear`

作用：清除浮动的影响。
常用值：
- left：清除左浮动。
- right：清除右浮动。
- both：清除左右浮动。
示例：
css
深色版本
```
.clearfix {clear: both;
}
```

六、其他布局属性

16. `width` 和 `height`

作用：设置元素的宽度和高度。
示例：
css
深色版本
```
.box {width: 200px;height: 100px;
}
```

17. `margin` 和 `padding`

作用：
- margin：控制元素外部的间距。
- padding：控制元素内部的间距。
示例：
css
深色版本
```
.box {margin: 10px;padding: 20px;
}
```

18. `box-sizing`

作用：控制元素的盒模型计算方式。
常用值：
- content-box（默认）：宽度和高度仅包括内容区域。
- border-box：宽度和高度包括内容、内边距和边框。
示例：
css
深色版本
```
.box {box-sizing: border-box;
}
```

19. `overflow`

作用：控制内容溢出容器时的行为。
常用值：
- visible（默认）：内容溢出可见。
- hidden：隐藏溢出内容。
- scroll：添加滚动条。
- auto：根据需要添加滚动条。
示例：
css
深色版本
```
.container {overflow: auto;
}
```

总结

CSS 布局属性提供了多种强大的工具，用于控制网页中元素的排列和定位。以下是一些常用的布局模型及其适用场景：

块级布局：适用于简单的页面结构。
弹性布局（Flexbox）：适合一维布局（行或列），如导航栏、卡片布局。
网格布局（Grid）：适合二维布局（行和列），如复杂网页布局。
定位布局：适合需要精确控制位置的元素。
浮动布局：传统布局方法，现在逐渐被 Flexbox 和 Grid 取代。

CSS 中常见的布局相关属性及其功能分类

一、块级布局（Block Layout） 1. display 作用：定义元素的显示方式。常用值： block：块级元素，默认独占一行。inline：行内元素，与其他内容在同一行显示。inline-block：兼…...

编程日记 2025/9/15 16:20:04

用css画一条弧线

ui里有一条弧线，现在用css实现关键代码 border-bottom-left-radius: 100% 7px 两个参数分别代表横向和纵向的深度border-bottom-right-radius: 100% 7px...

编程日记 2025/8/17 19:41:13

CesiumForUnreal 本地矢量文件的加载，支持 shp/geojson 等常用格式

实现效果 Cesium for Unreal 集成 GDAL、LibPng 实现加载本地矢量文件实现步骤添加依赖在 cesium-unreal 中 extern -> cesium-native -> CMakeLists.txt 中的 57 行添加依赖库，代码如下： set(PACKAGES_PRIVATEabseil draco ktx modp-base64 meshoptimizer openssl …...

编程日记 2025/8/17 19:40:17

面向基于发布-订阅的物联网网络的匿名 MQTT 分析

中文标题： 面向基于发布-订阅的物联网网络的匿名 MQTT 分析英文标题： An Analysis of Anonymous MQTT for Publish-Subscribe-Based IoT Networks 作者信息 Yudai Fukushima：东京都立大学电气工程与计算机科学系硕士生，研究方向…...

编程日记 2025/9/11 13:06:25

＜C#＞详细介绍.NET 依赖注入

在 .NET 开发中，依赖注入（Dependency Injection，简称 DI）是一种设计模式，它可以增强代码的可测试性、可维护性和可扩展性。以下是对 .NET 依赖注入的详细介绍： 1. 什么是依赖注入在软件开发里&#xff0…...

编程日记 2025/9/15 4:45:45

批量给文件编排序号，支持数字序号及时间日期序号编排文件

当我们需要对文件进行编号的时候，我们可以通过这个工具来帮我们完成，它可以支持从 001 到 100 甚至更多的数字序号编号。也可以支持按照日期、时间等方式对文件进行编号操作。这是一种操作简单，处理起来也非常的高效文件编排序号的方法。工作…...

编程日记 2025/9/4 9:06:23

乳腺癌识别：双模型融合

本文为为🔗365天深度学习训练营内部文章原作者：K同学啊 import matplotlib.pyplot as plt import tensorflow as tf import warnings as w w.filterwarnings(ignore) # 支持中文 plt.rcParams[font.sans-serif] [SimHei] # 用来正常显示中文标签 …...

编程日记 2025/9/10 8:19:15

ubuntu 22.04配置cuda和cudnn

cuda：12.1 wget https://developer.download.nvidia.com/compute/cuda/12.1.1/local_installers/cuda_12.1.1_530.30.02_linux.run sudo sh cuda_12.1.1_530.30.02_linux.runAbort/Continue选择Continue，不要勾选自带的driver 配置环境变量。~/.bashrc e…...

编程日记 2025/9/9 6:06:58

为什么Java不支持多继承？如何实现多继承？

一、前言 Java不支持多继承（一个类继承多个父类）主要出于文中设计考虑；核心目的是简化语言复杂性并避免潜在的歧义性问题。二、直接原因：菱形继承/钻石继承问题（Diamond Problem） 假设存在如下继承关系&…...

编程日记 2025/9/11 17:35:04

ESP32S3 链接到 WiFi

以下是关于如何让 ESP32S3 连接到 WiFi 的完整流程和代码示例： ESP32S3 链接到 WiFi 1. 设置工作模式 ESP32 可以工作在两种模式下： Station (STA) 模式：作为无线终端连接到无线接入点（AP），类似于手机或…...

编程日记 2025/9/10 1:27:19

AndroidTV D贝桌面-v3.2.5-[支持文件传输]

AndroidTV D贝桌面链接：https://pan.xunlei.com/s/VONXSBtgn8S_BsZxzjH_mHlAA1?pwdzet2# AndroidTV D贝桌面-v3.2.5[支持文件传输] 第一次使用的话，壁纸默认去掉的，不需要按遥控器上键，自己更换壁纸即可...

编程日记 2025/8/17 20:34:38

在spark中，窄依赖算子map和filter会组合为一个stage，这种情况下，map和filter是在一个task内进行的吗？

在 Spark 中，当 map 和 filter 这类窄依赖（Narrow Dependency）的算子连续应用时，它们会被合并到同一个 Stage 中，并且在同一个 Task 内按顺序执行。这种优化称为流水线（Pipeline）执行&#xff…...

编程日记 2025/9/5 22:51:24

展讯android15源码编译之apk单编

首先找到你要单编的apk生成的路径： sys\out_system\target\product\ussi_arm64\system_ext\app\HelloDemo\HelloDemo.apk接着打开下面这个文件： sys\out_system\ussi_arm64_full-userdebug-gms.system.build.log在里面找关键字"Running command&q…...

编程日记 2025/9/11 4:51:34

EtherCAT 转 ModbusTCP 网关

一、功能概述 1.1 设备简介本产品是 EtherCAT 和 Modbus TCP 网关，使用数据映射方式工作。本产品在 EtherCAT 侧作为 EtherCAT 从站，接 TwinCAT 、 CodeSYS 、 PLC 等；在 ModbusTCP 侧做为 ModbusTCP 主站（ C…...

编程日记 2025/9/15 3:18:47

SpringBoot集成阿里云文档格式转换实现pdf转换word,excel

一、前置条件 1.1 创建accessKey 如何申请：https://help.aliyun.com/zh/ram/user-guide/create-an-accesskey-pair 1.2 开通服务官方地址：https://docmind.console.aliyun.com/doc-overview 未开通服务时需要点击开通按钮，然后才能调用…...

编程日记 2025/9/12 5:23:45

大数据-271 Spark MLib - 基础介绍机器学习算法线性回归场景定义损失优化

点一下关注吧！！！非常感谢！！持续更新！！！ Java篇开始了！ MyBatis 更新完毕目前开始更新 Spring，一起深入浅出！ 目前已经更新到了： H…...

编程日记 2025/9/12 9:48:29

ubuntu不生成core文件的处理

1、设置unlimited ulimit -a 查看是否设置，没有设置的使用下面命令设置 ulimit -c unlimited这个设置只在当前会话有效，添加到 ~/.bashrc 中，重开终端生效 2、sysctl配置修改 /etc/sysctl.conf 文件 ，增加以下两个配置&#…...

编程日记 2025/9/11 14:06:27

游戏服务器DDoS攻防实战指南——从攻击溯源到智能防护体系构建

本文深度解析游戏行业DDoS攻防技术演进路线，基于等保2.0与NIST框架，从攻击流量识别、弹性防护架构、智能调度算法三大维度，揭示游戏服务器防护体系的23个关键控制点。通过近期《永劫无间》服务器瘫痪事件复盘，结合Gartner最新混合…...

编程日记 2025/9/7 16:32:26

JAVA 导出 word

1、模板方式导出 1.1、引入 maven 依赖 <dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.12.2</version> </dependency>1.2、导出文档代码 public static void main(String[] args…...

编程日记 2025/9/12 21:56:44

OpenHarmony 5.0版本视频硬件编解码适配

一、简介 Codec HDI（Hardware Device Interface）对上层媒体服务提供视频编解码的驱动能力接口，主要功能有获取组件编解码能力，创建、销毁编解码器对象，启停编解码器操作，编解码处理等。 Codec HDI 2.0接口…...

编程日记 2025/9/15 16:03:32

《Python星球日记》第23天：Pandas基础

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 订阅专栏：《Python星球日记》目录一、Pandas 简介1. 什么是 Pandas&…...

编程日记 2025/8/31 22:52:35

ubuntu22.04下安装mysql以及mysql-workbench

一、mysql安装以及配置安装之前先查看是否已将安装mysql: rpm -qa | grep mysql （一）、在线安装保证网络正常的情况下： 1、更新软件包： sudo apt update 2、安装mysql安装包查看可以安装的安装包： sudo apt search mysql-server 安装指定安装包： sudo apt i…...

编程日记 2025/9/11 7:40:22

让 Python 脚本在后台持续运行：架构级解决方案与工业级实践指南

让 Python 脚本在后台持续运行：架构级解决方案与工业级实践指南一、生产环境需求全景分析 1.1 后台进程的工业级要求矩阵维度开发环境要求生产环境要求容灾要求可靠性单点运行集群部署跨机房容灾可观测性控制台输出集中式日志分布式追踪资源管理无限制CPU/Memo…...

编程日记 2025/9/7 7:22:01

设计模式四、行为设计模式（2)

五、状态模式 1、概述状态设计模式是一种行为型设计模式，它允许对象在其内部状态发生时改变其行为，这种模式可以消除大量的条件语句，并将每个状态的行为封装到单独的类中。状态模式的主要组成部分如下： 1）上…...

编程日记 2025/9/11 19:53:04

C++中作用域（public，private，protected

在C中，public、private 和 protected 是用于控制类成员（变量和函数）访问权限的关键字。它们决定了类成员在代码中的可见性和可访问性。在学习时候，对于public是最容易理解的，对于private也好理解，但是对于p…...

编程日记 2025/9/11 6:26:54

Spring配置方式演进：从XML到注解，构建灵活高效的开发体系

Spring配置方式演进：从XML到注解，构建灵活高效的开发体系在Spring框架的演进长河中，配置方式始终是开发者需要掌握的核心技能。从早期XML一统天下的严谨规范，到注解驱动的敏捷开发，再到如今Java Config的优雅实践&am…...

编程日记 2025/9/10 8:07:13

网络4 OSI7层

OSI七层模型：数据如何传送，向下传送变成了什么样子应用层和用户打交道，向用户提供服务。例如：web服务、http协议、FTP协议 1.用户接口 2.提供各种服务通过浏览器（接口）提供Web服务表示层翻译我的“…...

编程日记 2025/9/15 13:30:12

前端请求设置credentials: ‘include‘导致的cors问题

1.背景前端请求设置credentials: ‘include‘其实主要是为了发送凭证，传cookie给后端 2.前端请求 fetch(http://frontend.com, { method: GET, // 或其他HTTP方法 credentials: include, // 不携带凭证 headers: { Content-Type: application/json, }, })…...

编程日记 2025/9/13 12:39:45

LabVIEW中VI Scripting 特定对象解析

该 LabVIEW 程序通过三条并行代码路径，借助 VI Scripting 功能，以特定方式解析程序框图对象，展示了不同方法在处理对象嵌套及特定范围对象时的差异。上方文字：三条并行代码路径展示了解析程序框图的不同方式。第一条路径使用 …...

编程日记 2025/9/11 8:22:35

CISCO组建RIP V2路由网络

1.实验准备： 2.具体配置： 2.1根据分配好的IP地址配置静态IP： 2.1.1PC配置： PC0： PC1： PC2： 2.1.2路由器配置： R0： Router>en Router#conf t Enter configuration…...

编程日记 2025/9/4 9:16:27

性能飙升50%，react-virtualized-list如何优化大数据集滚动渲染

在处理大规模数据集渲染时，前端性能常常面临巨大的挑战。本文将探讨 react-virtualized-list 库如何通过虚拟化技术和 Intersection Observer API，实现前端渲染性能飙升 50% 的突破！除此之外，我们一同探究下该库还支持哪些新的特性…...

编程日记 2025/9/10 13:15:09

超低功耗MCU软件开发设计中的要点与选型推荐

前沿-超低功耗MCU应用： 超低功耗MCU（微控制器）凭借其极低的功耗和高效的能量管理能力，正在快速渗透到多个新兴领域，尤其在物联网（IoT）、可穿戴设备、智能家居和医疗电子等领域展现出巨大的应用…...

编程日记 2025/9/15 1:37:15

Gson、Fastjson 和 Jackson 对比解析

目录 1. Gson (Google) 基本介绍： 核心功能： 特点： 使用场景： 2. Fastjson (Alibaba) 基本介绍： 核心功能： 特点： 使用场景： 3. Jackson 基本介绍： 核心功能…...

编程日记 2025/9/11 16:46:15

冒泡排序与回调函数——qsort

文章核心内容总结本文围绕数组排序展开，先介绍了冒泡排序，后引入qsort库函数进行排序，并对二者进行了对比。 1. 冒泡排序实现在探讨冒泡排序（Bubble Sort）这一经典的排序算法时，我们首先需要了解其基本…...

编程日记 2025/9/14 3:19:45

（四）机器学习---逻辑回归及其Python实现

之前我们提到了常见的任务和算法，本篇我们使用逻辑回归来进行分类分类问题回归问题聚类问题各种复杂问题决策树√线性回归√K-means√神经网络√逻辑回归√岭回归密度聚类深度学习√集成学习√Lasso回归谱聚类条件随机场贝叶斯层次聚类隐马尔可夫模型支持向量机高…...

编程日记 2025/9/14 19:30:11

微信小程序开发：微信小程序上线发布与后续维护

微信小程序上线发布与后续维护研究摘要微信小程序作为移动互联网的重要组成部分，其上线发布与后续维护是确保其稳定运行和持续优化的关键环节。本文从研究学者的角度出发，详细探讨了微信小程序的上线发布流程、后续维护策略以及数据分析与用户反馈处理的方法。通过结合实…...

编程日记 2025/9/10 3:30:29

vue拓扑图组件

vue拓扑图组件介绍技术栈功能特性快速开始安装依赖开发调试构建部署使用示例演示截图组件源码介绍一个基于 Vue3 的拓扑图组件，具有以下特点： 1.基于 vue-flow 实现，提供流畅的拓扑图展示体验 2.支持传入 JSON 对象自动生成拓扑结构 3.自…...

编程日记 2025/9/13 9:50:02

Python数据分析-NumPy模块-查看数组属性

查看数组的行数和列数 from numpy import array aarray([[1,1],[2,2],[3,3]]) print(a.shape)结果： 提取数组的行数或列数 from numpy import array aarray([[1,1],[2,2],[3,3]]) print(a.shape) print(a.shape[0]) print(a.shape[1])结果： 查看数组…...

编程日记 2025/9/15 1:09:34

ch07课堂参考代码

DFS 的优化 1) 标记搜索过的状态用数组标记一个状态是否被搜索过，搜索过则直接 return，不用再执行函数，用于保证每个状态只被搜索一次。在递归调用函数之前，通过 if (vis[x]) 判断 x 是否被搜索过，搜索过则直接ret…...

编程日记 2025/9/10 19:43:11

去重新闻数据中重复的正文内容（body 字段），并把唯一的新闻内容保存到一个新的 JSON 文件中

示例代码： import os import json import nltk from tqdm import tqdmdef wr_dict(filename,dic):if not os.path.isfile(filename):data []data.append(dic)with open(filename, w) as f:json.dump(data, f)else: with open(filename, r) as f:data json.l…...

编程日记 2025/9/10 1:27:17

centos crontab 设置定时任务访问链接

在 CentOS 系统中，使用 crontab 设置定时任务访问 URL，可以通过命令行工具（如 curl 或 wget）发送 HTTP 请求。以下是详细步骤： 1、安装必要工具（若未安装） 安装 curl 或 wget # 安装 curl su…...

编程日记 2025/9/10 9:12:43

oracle大师认证证书有用吗

专业能力的高度认可：OCM 是 Oracle认证的最高级别，是对数据库从业人员技术、知识和操作技能的最高级认可，也是 IT 界顶级认证之一。它表明持证者具备处理关键业务数据库系统和应用的能力，能够解决最困难的技术难题和最复杂的系统故…...

编程日记 2025/9/8 21:06:15

说说对 Node 中的 process 的理解？有哪些常用方法？

1. 简介 process对象是Node.js中的全局变量，它提供了有关当前Node.js进程的信息并允许对其进行控制。通过process对象，我们可以获取进程的环境变量、命令行参数，控制进程的行为以及与其他进程进行通信。 2. 常用属性 process.env process…...

编程日记 2025/9/12 7:39:28

maven 和 idea intej步骤记录

1 maven 安装配置 1.1 参考链接安装 maven参考链接 1.2 maven 关联本机jdk版本配置 priofiles jdk 版本时，查看本本机jdk 版本：环境变量查看jdk 路径版本： java_home 变量路径是C:\Program Files\Java\jdk-21 # setting.xml <profile&…...

编程日记 2025/9/15 6:47:46