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

CSS3布局方式介绍

article 2025/10/12 14:05:30

CSS3布局方式介绍

CSS3布局（Layout）系统是现代网页设计中用于构建页面结构和控制元素排列的一组强大工具。CSS3提供了多种布局方式，每种方式都有其适用场景，其中最常用的是Flexbox和CSS Grid。

先看传统上几种布局方式，再较详细的介绍现代布局方式Flexbox和CSS Grid。

传统上几种布局方式

☆Multi-column Layout（多列布局）：

这种布局方式可以让内容自动流进多个垂直排列的列中，适用于文本内容较多的情况。

基本使用：通过设置column-count或者column-width来确定列数或列宽，并通过column-gap和column-rule控制列之间的间隔和分隔线。例如：

<div class="multicol-container"><p>这是一段很长的文本，用于演示多列布局的效果。多列布局非常适合长文本的排版，类似于报纸的排版方式。</p>
</div><style>.multicol-container {column-count: 3;       /* 定义三列 */column-gap: 20px;      /* 列间距 */column-rule: 1px solid #ccc; /* 列分隔线 */}
</style>

☆Positioning（定位布局）：

虽然这不是CSS3新引入的布局方式，但仍然是非常重要的布局手段之一。通过position属性（如static、 relative、absolute、fixed、sticky）结合top、right、bottom、left等属性来进行元素的精确定位。

<div class="container"><div class="box" style="position: relative; top: 20px; left: 20px;">Relative</div><div class="box" style="position: absolute; top: 50px; right: 0;">Absolute</div><div class="box" style="position: fixed; bottom: 0; left: 0;">Fixed</div>
</div><style>.container {position: relative;width: 300px;height: 300px;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: #f5f5f5;border: 1px solid #ccc;}
</style>

☆Floats and Clears（浮动与清除）：

浮动也是一种传统的布局方法，主要用于让文本环绕图片或者其他元素。虽然CSS3带来了更多先进的布局技术，但在某些情况下，浮动仍然有用。

使用float属性可以将元素向左或向右移动，然后用clear属性来防止其他元素围绕浮动元素。

<div class="container"><div class="box" style="float: left;">Box 1</div><div class="box" style="float: right;">Box 2</div><div class="clear"></div><div class="box">Box 3</div>
</div><style>.container {width: 300px;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: #f5f5f5;border: 1px solid #ccc;margin: 10px;}.clear {clear: both;}
</style>

现代布局方式Flexbox和CSS Grid

现代布局方式Flexbox和CSS Grid通常更强大、更灵活，下面介绍。

1. Flexbox（弹性盒子布局）

Flexbox是一种一维布局系统，主要用于在行或列中排列元素。它通过display: flex应用于父容器，使子元素能够根据容器的大小自动调整宽度或高度。

基本使用：首先需要定义一个容器元素，并设置其display属性为flex或inline-flex。例如：

.container {
display: flex;
}

核心特点：

方向自由：支持水平（row）或垂直（column）排列，通过 flex-direction 控制。
动态伸缩：元素可自动填充剩余空间（flex-grow）或收缩避免溢出（flex-shrink）。
精准对齐：通过 justify-content（主轴对齐）和 align-items（交叉轴对齐）实现复杂对齐逻辑。
简化响应式：无需浮动或定位即可实现自适应布局。

典型应用场景：

导航栏、按钮组、卡片列表等线性排列的组件。
元素垂直居中（告别 margin: auto 的 Hack）。
动态分配空间，如侧边栏与主内容区的比例布局。

Flexbox布局示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox Layout Example</title><!-- <link rel="stylesheet" href="styles.css">  --><style>/* 基础样式重置 */* { margin: 0; padding: 0; box-sizing: border-box; }/* 示例1：经典导航栏（主轴方向 + 空间分配） */.nav-container {display: flex;justify-content: space-between; /* 主轴两端对齐 */align-items: center;            /* 交叉轴居中对齐 */padding: 1rem;background: #333;}.logo { color: white; font-size: 1.5rem; }.nav-links {display: flex;gap: 2rem;       /* 元素间距 */list-style: none;}.nav-links a {color: white;text-decoration: none;transition: color 0.3s;}.nav-links a:hover { color: #00ff88; }/* 示例2：等高卡片布局（交叉轴拉伸 + 动态换行） */.card-container {display: flex;flex-wrap: wrap;    /* 允许换行 */gap: 1rem;padding: 2rem;}.card {flex: 1;            /* 动态填充剩余空间 */min-width: 250px;   /* 最小宽度约束 */background: #f5f5f5;padding: 1.5rem;border-radius: 8px;}/* 示例3：垂直居中圣杯布局（嵌套 Flex + 自动边距） */.centered-section {display: flex;min-height: 300px;  /* 需要高度才能垂直居中 */background: #e0e0e0;margin: 2rem;}.centered-content {margin: auto;       /* 水平和垂直居中 */text-align: center;}/* 示例4：响应式布局调整（媒体查询 + 方向切换） */@media (max-width: 768px) {.nav-container {flex-direction: column; /* 小屏切换为垂直排列 */gap: 1rem;}.card {flex: 1 0 100%; /* 移动端卡片占满宽度 */}}</style>
</head>
<body><!-- 示例1：导航栏 --><nav class="nav-container"><div class="logo">FlexBox Demo</div><ul class="nav-links"><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">关于</a></li><li><a href="#">联系</a></li></ul></nav><!-- 示例2：卡片布局 --><div class="card-container"><div class="card"><h3>卡片1</h3><p>动态宽度卡片，内容高度不同但容器等高</p></div><div class="card"><h3>卡片2</h3><p>通过 flex:1 实现等宽效果，自动换行响应屏幕尺寸</p><p>额外的段落用于展示高度差异</p></div><div class="card"><h3>卡片3</h3><p>最小宽度约束保证可读性</p></div></div><!-- 示例3：垂直居中 --><section class="centered-section"><div class="centered-content"><h2>完美居中</h2><p>无需计算 margin，一行代码实现居中</p></div></section>
</body>
</html>

运行效果：

2. CSS Grid（网格布局）

CSS Grid是一种二维布局系统，允许开发者同时控制行和列，创建复杂的网格结构。

基本使用：同样先定义一个容器，并设置其display属性为grid或inline-grid。例如：

.container {
display: grid;
grid-template-columns: 100px 100px 100px; /* 定义三列，每列宽度100px */
grid-template-rows: auto; /* 自动调整行高 */
}

核心特点：

网格定义：通过 grid-template-columns 和 grid-template-rows 显式定义行与列。
精确占位：元素可跨行/列（grid-column、grid-row），实现复杂布局结构。
自适应网格：结合 auto-fit、minmax() 实现响应式网格，无需媒体查询。
间距控制：gap 属性统一管理行列间距（替代 margin 的繁琐计算）。
对齐属性：有更复杂的对齐属性，如justify-items和align-content

典型应用场景：

整体页面布局（页眉、侧边栏、主内容区、页脚）。
杂志式多列布局或图库网格。
不规则布局（如重叠元素、自由定位区域）。

CSS Grid布局示例

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Grid Layou </title><!-- <link rel="stylesheet" href="styles.css">  --><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f5f5f5;}.dashboard {display: grid;grid-template-columns: repeat(3, 1fr); /* 定义三列，每列宽度相等 */grid-template-rows: repeat(2, 100px) 200px; /* 定义三行，前两行高度为100px，最后一行高度为200px */gap: 10px; /* 网格间隔 */width: 80%;max-width: 900px;background-color: #fff;padding: 10px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.item {background-color: #e0e0e0;display: flex;justify-content: center;align-items: center;font-size: 1.2em;color: #333;border-radius: 4px;}/* 调整特定模块的大小和位置 */.item-1 {grid-column: 1 / 3; /* 跨越第1列到第2列 */grid-row: 1 / 2; /* 占据第1行 */background-color: #ffcccb;}.item-2 {grid-column: 3 / 4;grid-row: 1 / 3; /* 跨越第1行到第2行 */background-color: #d4edda;}.item-3 {grid-column: 1 / 2;grid-row: 2 / 3;background-color: #d1ecf1;}.item-4 {grid-column: 2 / 3;grid-row: 2 / 3;background-color: #fff3cd;}.item-5 {grid-column: 3 / 4;grid-row: 3 / 4;background-color: #d4edda;}.item-6 {grid-column: 1 / 4; /* 跨越所有列 */grid-row: 3 / 4;background-color: #f8d7da;}</style>
</head>
<body><div class="dashboard"><div class="item item-1">Item 1</div><div class="item item-2">Item 2</div><div class="item item-3">Item 3</div><div class="item item-4">Item 4</div><div class="item item-5">Item 5</div><div class="item item-6">Item 6</div></div>
</body>
</html>

运行效果：

在 Grid 单元格内嵌套 Flexbox

可以在 CSS Grid 的单元格内嵌套 Flexbox 布局，这种组合是构建复杂布局的最佳实践之一。

Grid：擅长宏观布局（整体页面结构、二维行列控制）

Flexbox：擅长微观布局（组件内部元素排列、动态对齐）

组合优势：通过 Grid 定义整体框架，再用 Flexbox 精细控制单元格内容。

以下是一个简单的示例

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid with Nested Flexbox</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 20px;}.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;}.grid-item {background-color: #f0f0f0;padding: 20px;border-radius: 5px;}.flex-container {display: flex;flex-direction: column;height: 200px;}.flex-item {flex: 1;display: flex;justify-content: center;align-items: center;background-color: #ddd;margin: 5px;border-radius: 3px;}</style>
</head>
<body><div class="grid-container"><div class="grid-item"><h2>Grid Item 1</h2><div class="flex-container"><div class="flex-item">Flex 1</div><div class="flex-item">Flex 2</div><div class="flex-item">Flex 3</div></div></div><div class="grid-item"><h2>Grid Item 2</h2><div class="flex-container"><div class="flex-item">Flex 1</div><div class="flex-item">Flex 2</div></div></div><div class="grid-item"><h2>Grid Item 3</h2><div class="flex-container"><div class="flex-item">Flex 1</div><div class="flex-item">Flex 2</div><div class="flex-item">Flex 3</div><div class="flex-item">Flex 4</div></div></div></div>
</body>
</html>

运行效果：

这个例子中:

使用Grid创建了一个3列的主布局结构。
每个Grid单元格内部使用Flexbox来排列内容。
Flexbox容器设置为列方向(flex-direction: column)，使子元素垂直排列。

每个Flex项目都设置了居中对齐。

Flexbox vs. CSS Grid：如何选择？

	Flexbox	Grid
维度	一维（单行或单列）	二维（行与列同时控制）
适用场景	组件内部布局	页面整体结构或复杂组件
驱动	布局由内容动态调整	布局由容器显式定义
组合使用	可在 Grid 单元格内嵌套 Flexbox	可作为 Flex 容器的子项

关于Flexbox和CSS Grid更多情况，可见

中文 https://www.w3ccoo.com/css/css3_flexbox.html

英文 https://www.w3schools.com/css/css3_flexbox.asp

中文 https://www.w3ccoo.com/css/css_grid.html

英文 https://www.w3schools.com/css/css_grid.asp

CSS3布局方式介绍

CSS3布局方式介绍 CSS3布局（Layout）系统是现代网页设计中用于构建页面结构和控制元素排列的一组强大工具。CSS3提供了多种布局方式，每种方式都有其适用场景，其中最常用的是Flexbox和CSS Grid。先看传统上几种布局方式&#xff…...

编程日记 2025/10/2 8:45:05

FPGA设计时空变换

1、时空变换基本概念 1.1、时空概念简介时钟速度决定完成任务需要的时间，规模的大小决定完成任务所需要的空间（资源），因此速度和规模就是FPGA中时间和空间的体现。如果要提高FPGA的时钟，每个clk内组合逻辑所能做的事…...

编程日记 2025/10/11 8:30:40

AI心理健康服务平台项目面试实战

AI心理健康服务平台项目面试实战第一轮提问： 面试官： 请简要介绍一下AI心理健康服务平台的核心技术架构。在AI领域，心理健康服务的机遇主要体现在哪些方面？如何利用NLP技术提升用户与AI的心理健康对话体验？ 马架构…...

编程日记 2025/10/6 23:15:15

Eigen稀疏矩阵类 (SparseMatrix)

1. SparseMatrix 核心属性与初始化模板参数 cpp SparseMatrix<Scalar, Options, StorageIndex> Scalar：数据类型（如 double, float）。 Options：存储格式（默认 ColMajor，可选 RowMajor&#xff0…...

编程日记 2025/8/9 2:52:44

《AI大模型趣味实战》智能Agent和MCP协议的应用实例：搭建一个能阅读DOC文件并实时显示润色改写过程的Python Flask应用

智能Agent和MCP协议的应用实例：搭建一个能阅读DOC文件并实时显示润色改写过程的Python Flask应用引言随着人工智能技术的飞速发展，智能Agent与模型上下文协议(MCP)的应用场景越来越广泛。本报告将详细介绍如何基于Python Flask框架构建一个智能应用&…...

编程日记 2025/10/3 3:52:39

uniapp开发03-轮播图组件swiper的简单使用案例

uniapp开发03-轮播图组件swiper的简单使用案例！这个仅仅是官方提供的一个轮播图组件啊。实际上我们项目开发的时候，会应用到其他第三方公司的轮播图组件资源！效果更强大。兼容性更强。废话不多说，我们直接上代码。分析代码。 &l…...

编程日记 2025/10/9 20:52:02

DAM-3B，英伟达推出的多模态大语言模型

DAM-3B是什么 DAM-3B（Describe Anything 3B）是英伟达推出的一款多模态大语言模型，专门用于为图像和视频中的特定区域生成详细描述。用户可以通过点、边界框、涂鸦或掩码等方式来标识目标区域，从而得到精准且符合上下文的文本描述…...

编程日记 2025/10/10 9:16:30

目录碰撞检测参数详情示例用法碰撞检测显示名称中文名称CSphere Trace By Channel按通道进行球体追踪UKismetSystemLibrary::SphereTraceSingleSphere Trace By Profile按描述文件进行球体追踪UKismetSystemLibrary::SphereTraceSingleByProfileSphere Trace For Objects针…...

编程日记 2025/6/14 1:01:21

C++学习：六个月从基础到就业——STL：分配器与设计原理

C学习：六个月从基础到就业——STL：分配器与设计原理本文是我C学习之旅系列的第三十篇技术文章，也是第二阶段"C进阶特性"的第九篇，主要介绍C STL中的分配器设计原理与实现。查看完整系列目录了解更多内容。引言在之前…...

编程日记 2025/5/27 10:51:45

【Android】四大组件之Service

目录一、什么是Service 二、启停 Service 三、绑定 Service 四、前台服务五、远程服务扩展六、服务保活七、服务启动方法混用你可以把Service想象成一个“后台默默打工的工人”。它没有UI界面，默默地在后台干活，比如播放音乐、下载文件、处理…...

编程日记 2025/9/24 5:00:52

TRO再添新案 TME再拿下一热门IP，涉及Paddington多个商标

4月2日和4月8日，TME律所代理Paddington & Company Ltd.对热门IP Paddington Bear帕丁顿熊的多类商标发起维权，覆盖文具、家居用品、毛绒玩具、纺织用品、游戏、电影、咖啡、填充玩具等领域。跨境卖家需立即排查店铺内的相关产品！ 案件基…...

编程日记 2025/10/10 8:34:25

spring-session-data-redis使用

spring-session-data-redis是spring session项目中的一个子模块，，他允许你使用Redis来存储http session，，从而支持多个应用实例之间共享session，，，即分布式session 原理： EnableRed…...

编程日记 2025/8/7 17:53:22

图论---LCA（倍增法）

预处理 O( n logn )，查询O( log n ) #include<bits/stdc.h> using namespace std; typedef pair<int,int> pii; const int N40010,M2*N;//是无向边，边需要见两边int n,m; vector<int> g[N]; //2的幂次范围 0~15 int depth[N],fa[N][1…...

编程日记 2025/9/17 18:03:54

WPF实现类似Microsoft Visual Studio2022界面效果及动态生成界面技术

WPF实现类似VS2022界面效果及动态生成界面技术一、实现类似VS2022界面效果 1. 主窗口布局与主题  <Window x:Class"VsStyleApp.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x…...

编程日记 2025/10/10 12:13:58

【安全扫描器原理】网络扫描算法

【安全扫描器原理】网络扫描算法 1.非顺序扫描2.高速扫描 & 分布式扫描3.服务扫描 & 指纹扫描 1.非顺序扫描参考已有的扫描器，会发现几乎所有的扫描器都无一例外地使用增序扫描，即对所扫描的端口自小到大依次扫描，殊不知&#xff0…...

编程日记 2025/5/22 5:00:45

WPF之项目创建

文章目录引言先决条件创建 WPF 项目步骤理解项目结构XAML 与 C# 代码隐藏第一个 "Hello, WPF!" 示例构建和运行应用程序总结相关学习资源引言 Windows Presentation Foundation (WPF) 是 Microsoft 用于构建具有丰富用户界面的 Windows 桌面应用程序的现代框架。它…...

编程日记 2025/9/17 6:58:36

Unity中数据储存

在Unity项目开发中，会有很多数据，有需要保存到本地的数据，也有直接保存在缓存中的临时数据，一般为了方便整个项目框架中各个地方能调用需要的数据，因此都会实现一个数据工具或者叫数据管理类，用来管理项目中所有的数据。首先保存在缓存中的数据，比如用户信息，我们只需…...

编程日记 2025/8/19 19:08:25

第十一天主菜单/设置界面过场动画（Timeline）成就系统（Steam/本地）多语言支持

前言对于刚接触Unity的新手开发者来说，构建完整的游戏系统往往充满挑战。本文将手把手教你实现游戏开发中最常见的四大核心系统：主菜单界面、过场动画、成就系统和多语言支持。每个模块都将结合完整代码示例，使用Unity 2022 LTS版本进行演示…...

编程日记 2025/7/15 12:44:57

AI数字人：未来职业的重塑（9/10）

摘要：AI 数字人凭借计算机视觉、自然语言处理与深度学习技术，从虚拟形象进化为智能交互个体，广泛渗透金融、教育、电商等多领域，重构职业生态。其通过降本提效、场景拓展与体验升级机制，替代重复岗位工作，催…...

编程日记 2025/10/10 8:35:25

Android插拔U盘导致黑屏问题排查

问题现象： 车机大屏偶先插拔带音乐的U盘，导致车机系统短暂黑屏的情况。日志中可以看到vold进程unmount了两次分区，一次是U盘分区，一次是/storage/emulated/0分区： I vold : Start killProcesses: /mnt/media_rw/…...

编程日记 2025/5/31 2:55:33

深入解析Mlivus Cloud中的etcd配置：最佳实践与高级调优指南

作为大禹智库的向量数据库高级研究员，我在《向量数据库指南》一书中详细阐述了向量数据库的核心组件及其优化策略。今天，我将基于30余年的实战经验，深入剖析Mlivus Cloud中etcd这一关键依赖的配置细节与优化方法。对于希望深入掌握Mlivus Cloud的读者，我强烈建议参考《向量…...

编程日记 2025/9/18 1:06:48

分享一个可以批量巡检GET和POST接口的Shell脚本

一、场景痛点与需求分析在分布式系统架构中，服务接口的可用性和稳定性直接影响业务连续性。当面临以下场景时，需批量巡检GET和POST接口： 上线验证：新版本发布后批量验证核心接口故障恢复：异常数据修复后的批量重试…...

编程日记 2025/8/3 10:21:45

前端面试宝典---vue原理

vue的Observer简化版 class Observer {constructor(value) {if (!value || typeof value ! object) returnthis.walk(value) // 对对象的所有属性进行遍历并定义响应式}walk (obj) {Object.keys(obj).forEach(key > defineReactive(obj, key, obj[key]))} } // 定义核心方法…...

编程日记 2025/9/17 7:07:47

PyTorch卷积层填充（Padding）与步幅（Stride）详解及代码示例

本文通过具体代码示例讲解PyTorch中卷积操作的填充（Padding）和步幅（Stride）对输出形状的影响，帮助读者掌握卷积层的参数配置技巧。一、填充与步幅基础填充（Padding）：在输入数据边缘…...

编程日记 2025/10/9 19:09:23

2025年Redis分片存储性能优化指南

一、分片规则与负载均衡动态哈希分片‌ 采用CRC16算法计算键哈希值，通过hash_slot CRC16(key) % 16384确定槽位分布，结合Redis Cluster自动管理槽位迁移。总分片数按需动态调整，例如从16节点扩容至32节点时，触发槽位重分配以…...

编程日记 2025/8/3 10:21:38

【概念】什么是 JWT Token？

—什么是 JWT Token？ JWT Token（JSON Web Token） 就是一张后端发给前端的小票，里面包含用户身份信息，用于做无状态认证（Stateless Authentication）。每次前端访问后端接口，都拿着…...

编程日记 2025/9/25 18:15:16

部署大模型需要多少GPU显存？以DeepSeek R1部署为例

引言部署大型语言模型（LLM）时究竟需要多少GPU显存？本文将进行一次简单测算。如何计算算法1 可以用一个简单的公式来计算显存占用（单位GB）： 参数说明如下： 符号含义 M 所需的 GPU 显存…...

编程日记 2025/10/3 22:16:09

用go从零构建写一个RPC（仿gRPC，tRPC）--- 版本1

希望借助手写这个go的中间件项目，能够理解go语言的特性以及用go写中间件的优势之处，同时也是为了更好的使用和优化公司用到的trpc，并且作者之前也使用过grpc并有一定的兴趣，所以打算从0构建一个rpc系统，对于生产环境已…...

编程日记 2025/10/10 2:05:42

Fedora 43 计划移除所有 GNOME X11 相关软件包

Fedora 43 计划移除所有 GNOME X11 相关软件包，这是 Fedora 项目团队为全面拥抱 Wayland 所做的重要决策。以下是关于此计划的详细介绍： 提案内容：4 月 23 日，Neal Gompa 提交提案，建议从 Fedora 软件仓库中移除所有 G…...

编程日记 2025/7/8 1:35:12

django之账号管理功能

账号管理功能目录 1.账号管理页面 2.新增账号 3.修改账号 4.账号重置密码 5.删除账号功能 6.所有代码展示集合 7.运行结果这一片文章, 我们需要新增账号管理功能, 今天我们写到的代码, 基本上都是用到以前所过的知识, 不过也有需要注意的细节。一、账号管理界面 …...

编程日记 2025/10/10 2:52:18

CSS3布局方式介绍

传统上几种布局方式

☆Multi-column Layout（多列布局）：

☆Positioning（定位布局）：

☆Floats and Clears（浮动与清除）：

现代布局方式Flexbox和CSS Grid

1. Flexbox（弹性盒子布局）

2. CSS Grid（网格布局）

在 Grid 单元格内嵌套 Flexbox

相关文章：