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

Web前端：常用的布局属性

news 来源：原创 2025/8/2 5:24:02

常见的布局方式有哪些？

float：浮动布局
position 定位布局
flex 弹性布局（display）
table 表格布局（弃用）

一、HTML5 语义化布局标签

这些标签本身不提供布局能力，但能增强页面结构语义，是构建现代布局的基础：

<header>     <!-- 页眉 -->
<nav>       <!-- 导航栏 -->
<main>      <!-- 主内容区 -->
<section>   <!-- 逻辑内容区块 -->
<article>   <!-- 独立文章内容 -->
<aside>     <!-- 侧边栏/附加内容 -->
<footer>    <!-- 页脚 -->
<div>       <!-- 通用容器 (传统布局仍常用) -->

二、核心 CSS 布局方案

1. Flexbox 弹性布局

适用场景：一维布局、元素动态分布、垂直居中。

父容器属性display: flex：启用Flex布局。flex-direction：主轴方向（row/column等）。flex-wrap：子项换行（nowrap/wrap）。justify-content：主轴对齐方式（flex-start/center/space-between等）。align-items：交叉轴对齐（stretch/center等）。align-content：多行子项的对齐方式。子项属性flex-grow：放大比例。flex-shrink：缩小比例。flex-basis：初始尺寸。order：排列顺序。align-self：单个子项的交叉轴对齐方式。

.container {display: flex;justify-content: space-between; /* 主轴对齐 */align-items: center;            /* 交叉轴对齐 */flex-wrap: wrap;                /* 换行控制 */
}.item {flex: 1;                       /* 弹性比例分配 */min-width: 200px;              /* 响应式断点 */
}

2. CSS Grid 网格布局

适用场景：二维复杂布局、行列精确控制

父容器属性display: grid：启用Grid布局。grid-template-columns / grid-template-rows：定义列和行的尺寸。grid-template-areas：通过命名区域布局。gap（或grid-gap）：网格间距（row-gap和column-gap）。justify-items / align-items：单元格内容对齐方式。justify-content / align-content：整个网格的对齐方式。子项属性grid-column / grid-row：子项占据的网格范围。grid-area：指定子项所在的命名区域。justify-self / align-self：单个子项的对齐方式。

.container {display: grid;grid-template-columns: 1fr 2fr;  /* 列比例 */grid-template-rows: auto 200px;  /* 行定义 */gap: 20px;                       /* 间距 */
}.item {grid-column: 1 / 3;             /* 跨列布局 */grid-row: 2;                    /* 行定位 */
}

3. 传统布局技术

浮动布局 (逐渐被替代，但需了解)：

.float-left { float: left; width: 30%; }.clearfix::after { content: ''; display: block; clear: both; }

定位布局：

.absolute {position: absolute;top: 0;left: 50%;transform: translateX(-50%);
}

三、响应式布局关键技术

1. 视口单位

.container {width: 100vw;       /* 视口宽度百分比 */height: 50vh;       /* 视口高度百分比 */font-size: calc(1rem + 0.5vw); /* 动态字体 */
}

2. 媒体查询 (Media Queries)

@media：媒体查询，根据屏幕尺寸调整样式。
vw/vh：视口单位（基于视口宽高百分比）。
min-width/max-width：限制元素尺寸范围。

@media (max-width: 768px) {.grid-container {grid-template-columns: 1fr;}.sidebar {display: none;}
}

四、现代、布局实用技巧

1.盒模型控制：

box-sizing: border-box; /* 解决尺寸计算问题 */margin-inline: auto;    /* 现代居中写法 */

2.多列布局：

.multi-column {column-count: 3;column-gap: 2em;
}

3.粘性定位：

.sticky-header {position: sticky;top: 0;z-index: 100;
}

五、布局选择建议

布局需求	推荐方案
移动端自适应	Flexbox + 媒体查询
复杂仪表盘	CSS Grid + 子网格(subgrid)
等高列布局	Flexbox 或 Grid
传统浏览器支持	Float + Clearfix

六、专业建议

优先使用现代布局方案：Flexbox 和 Grid 已获主流浏览器全面支持
语义化结构：结合 HTML5 标签构建 SEO 友好的页面框架
响应式设计原则：优先移动端设计 (Mobile First)
性能优化：避免过度嵌套布局容器，使用 will-change 优化渲染

总结

传统布局：依赖display、float、position等。
Flexbox：适合一维布局（单行或单列）。
Grid：适合复杂二维布局（多行多列）。
响应式：结合媒体查询和视口单位实现适配。

根据需求选择合适的布局方式，现代项目推荐优先使用Flexbox和Grid。

通过组合这些技术，可以构建从简单页面到复杂 Web 应用的各类布局需求。建议通过实际项目实践掌握不同布局方案的适用场景，并持续关注 CSS 新特性如 container queries 等前沿布局技术。

Web前端：常用的布局属性

常见的布局方式有哪些？ float：浮动布局 position 定位布局 flex 弹性布局（display） table 表格布局（弃用） 一、HTML5 语义化布局标签这些标签本身不提供布局能力，但能增强页面结构…...

编程日记 2025/8/2 5:24:02

XSS学习2

一、客户端的Cookie 1. 无状态的影响无状态问题: HTTP协议的无状态特性导致每次请求都是独立的，无法保持会话。例如，在银行办理业务时，柜员不需要重复询问客户信息，但在计算机网络中，每次HTTP请求都需要重新认证用户…...

编程日记 2025/8/3 2:03:50

软件设计师/系统架构师---计算机网络

概要什么是计算机网络？ 计算机网络是指将多台计算机和其他设备通过通信线路互联，以便共享资源和信息的系统。计算机网络可以有不同的规模，从家庭网络到全球互联网。它们可以通过有线（如以太网）或无线（如W…...

编程日记 2025/8/3 1:46:42

Kubernetes(k8s)学习笔记(二)--k8s 集群安装

1、kubeadm kubeadm 是官方社区推出的一个用于快速部署 kubernetes 集群的工具。这个工具能通过两条指令完成一个 kubernetes 集群的部署： 1.1 创建一个 Master 节点$ kubeadm init 1.2 将一个 Node 节点加入到当前集群中$ kubeadm join <Master 节点的 IP 和…...

编程日记 2025/8/3 1:51:23

线性DP：最长上升子序列（子序列可不连续，子数组必须连续）

目录 Q1：简单遍历 Q2：变式（加大数据量） Q1：简单遍历 Dp问题状态表示 f(i,j) 集合所有以第i个数结尾的上升子序列集合-f(i,j)的值存的是什么序列长度最大值max- 状态计算 （其实质是集合的划分）…...

编程日记 2025/8/2 13:29:23

SpringBoot 基本原理

SpringBoot 为我们做的自动配置，确实方便快捷，但一直搞不明白它的内部启动原理，这次就来一步步解开 SpringBoot 的神秘面纱，让它不再神秘。目录 SpringBootApplication 背后的秘密 Configuration ComponentScan EnableAutoC…...

编程日记 2025/8/3 1:45:02

LeetCode第158题_用Read4读取N个字符 II

LeetCode 第158题：用Read4读取N个字符 II 题目描述给你一个文件，并且该文件只能通过给定的 read4 方法来读取，请实现一个方法来读取 n 个字符。 read4 方法： API read4 可以从文件中读取 4 个连续的字符，并且将它…...

编程日记 2025/8/3 1:49:27

webgl入门实例-矩阵在图形学中的作用

矩阵在图形学中扮演着核心角色，几乎所有图形变换、投影和空间转换都依赖矩阵运算来实现高效计算。以下是矩阵在图形学中的主要作用及具体应用： 1. 几何变换矩阵乘法可以高效表示物体的平移、旋转、缩放等基本变换，并通过矩阵连乘实现复合变…...

编程日记 2025/8/3 1:51:21

基于Matlab求解矩阵电容等效容值

1需求仿真测试8*10阶举证电容等效容值。 2模型搭建 2.1打开simscape 在打开simulink之后打开simscape库，Simscape库位置如下 2.2搭建模型在库中寻找需要的元件搭建电路。 2.2.1基本元件电阻电容电感等基础器件，搭建电路之后需要对其进行幅值&…...

编程日记 2025/8/3 1:32:08

铅酸电池充电器方案EG1253+EG4321

参考： 基于EG1253EG4321铅酸电池(48V20AH)三段式充电器屹晶微高性价比的电瓶车充电器方案——EG1253 电瓶电压 48V电瓶锂电池，其充满约为55V~56V，因此充电器输出电压为55V~56V； 若是48V铅酸电池，标称电压为48V&…...

编程日记 2025/7/30 16:51:36

每天学一个 Linux 命令（26）：less

可访问网站查看，视觉品味拉满： http://www.616vip.cn/26/index.html less 是 Linux 中一个强大的文件内容查看工具，用于分页显示文件内容，支持快速搜索、滚动浏览、跳转等操作。相比 more，less 功能更丰富且支持向前和向后翻页，适合查看大文件或日志。命令格式 les…...

编程日记 2025/7/28 18:17:29

【网络】数据链路层知识梳理

全是通俗易懂的讲解，如果你本节之前的知识都掌握清楚，那就速速来看我的笔记吧~ 自己写自己的八股！让未来的自己看懂！ （全文手敲，受益良多） 数据链路层我们来重新理解一下这个图：…...

编程日记 2025/8/1 16:02:48

2.2 BackgroundWorker的使用介绍

BackgroundWorker 是 .NET Framework 中一个简化异步操作的组件，它位于 System.ComponentModel 命名空间下。它为开发人员提供了一种简单的方式在后台执行耗时操作，同时保持与 UI 线程的交互主要属性以及任务如下： DoWork 事件：…...

编程日记 2025/7/27 14:04:30

Java从入门到“放弃”（精通）之旅——类和对象全面解析⑦

Java从入门到“放弃”（精通）之旅🚀——类和对象全面解析⑦ 一、面向对象初探 1.1 什么是面向对象？ Java是一门纯面向对象的语言(OOP)，在面向对象的世界里，一切皆为对象。面向对象是解决问题的一种思想&a…...

编程日记 2025/7/30 6:08:29

无回显RCE

在CTF和实战渗透中，不是每一个命令执行点都有回显，有时我们审了半天代码，却发现好不容易找到的命令执行没有回显，但是这并不代表这段代码不能被我们利用，在无回显的情况下也是可以利用的首先我们来写一个最简单的php…...

编程日记 2025/7/31 1:42:50

DQN在Gym的MountainCar环境的实现

DQN on MountainCar 引言在本次实验里，我构建了DQN和Dueling DQN，并在Gymnasium库的MountainCar环境中对它们展开测试。我通过调整训练任务的超参数，同时设计不同的奖励函数及其对应参数，致力于获取更优的训练效果。最后&#…...

编程日记 2025/7/31 1:17:24

typescript判断是否为空

1 判断数据类型 1.1 基础数据类型比如number，string，boolean，使用typeof，返回值是string类型： 例如： if("number" typeof(item)) {egret.log("item的类型是number"); } else if(&…...

编程日记 2025/7/28 18:17:14

JavaScript forEach介绍（JS forEach、JS for循环）

文章目录 JavaScript forEach 方法全面解析基本概念语法详解参数说明工作原理与其他循环方法的比较forEach vs for循环forEach vs map 实际应用场景DOM元素批量操作数据处理性能考量常见陷阱与解决方案无法中断循环异步操作问题高级技巧链式调用（不使用 forEach …...

编程日记 2025/8/1 19:44:09

C语言之图像文件的属性

🌟 嗨，我是LucianaiB！ 🌍 总有人间一两风，填我十万八千梦。 🚀 路漫漫其修远兮，吾将上下而求索。图像文件属性提取系统设计与实现目录设计题目设计内容系统分析总体设计详细设计程序实现…...

编程日记 2025/7/28 21:34:12

Java链表反转方法详解

一、理解链表结构假设链表节点定义为： class ListNode {int val;ListNode next;ListNode(int x) { val x; } } 二、迭代法反转链表核心思路逐步反转每个节点的指针方向，最终使整个链表反向。步骤拆解初始化三个指针： prev&#xf…...

编程日记 2025/7/31 7:53:53

lmm-r1开源程序是扩展 OpenRLHF 以支持 LMM RL 训练，用于在多模态任务上重现 DeepSeek-R1

一、软件介绍文末提供程序和源码下载学习 lmm-r1开源程序是扩展 OpenRLHF 以支持 LMM RL 训练，用于在多模态任务上重现 DeepSeek-R1。二、简介小型 3B 大型多模态模型（LMMs）由于参数容量有限以及将视觉感知与逻辑推理相结合的固有复杂性…...

编程日记 2025/7/29 20:35:44

Java学习笔记（数组，方法）

一，数组 1.数组初始化 1.1动态初始化格式：数据类型[] 数组名 new 数据类型[数组长度]; int[] arr new int[3]; // 定义长度为3的int数组，元素默认值为0 double[] scores new double[5]; // 长度5，元素默认0.0 String[…...

编程日记 2025/8/2 17:31:06

嵌入式---零点漂移（Zero Drift）

一、零点漂移的定义与本质零点漂移（简称“零漂”）指传感器在输入信号为零（或理论上应输出固定零值）时，输出信号随时间、温度、环境等因素变化而偏离初始零点的现象。核心特征：无输入时输出非零且缓慢变…...

编程日记 2025/7/28 21:34:04

健身房管理系统设计与实现(springboot+ssm+vue+mysql)含万字详细文档

健身房管理系统设计与实现(springbootssmvuemysql)含万字详细文档健身房管理系统是一个全面的解决方案，旨在帮助健身房高效管理日常运营。系统主要功能模块包括个人中心、会员管理、员工管理、会员卡管理、会员卡类型管理、教练信息管理、解聘管理、健身项目管理、…...

编程日记 2025/8/2 23:44:47

C语言if

一、题目引入如果从键盘输入58,则以下程序输出的结果是多少? 二、运行结果三、题目分析因为这道题中的多个if是并列结构所以只要条件满足都会执行这一题58满足所有的条件所以可以运行出来也就是说每个if里面的条件都满足所以都会打印出来而下面的这种情况就是 if e…...

编程日记 2025/7/31 7:11:48

XSS学习1之http回顾

1. HTTP的基本结构与工作流程 HTTP是一个请求-响应协议，基于客户端与服务器之间的交互。每次用户通过浏览器请求某个资源时，HTTP协议都会完成一系列的步骤。 HTTP请求： HTTP请求由以下几个部分构成： 请求行： 请求方…...

编程日记 2025/7/28 14:06:42

小迪抓包技术算法加密（6-9天）

抓包技术 https://blog.csdn.net/2301_81015455/article/details/147014382 算法加密入门（了解） 在实际测试中安全性高一些得采用得都是AES等高安全加密，遇到这种，放弃你啥都不知道测个毛啊,所以直接run!!! 大部分解密时碰撞式…...

编程日记 2025/8/1 17:35:08

Tkinter与ttk模块对比：构建现代 Python GUI 的进化之路

在 Python GUI 开发中，标准库 tkinter 及其子模块 ttk（Themed Tkinter）常被同时使用。本文通过功能对比和实际案例，简单介绍这两个模块的核心差异。 1. 区别 Tkinter：Python 标准 GUI 工具包（1994年集成&…...

编程日记 2025/7/28 21:33:55

【数据结构入门训练DAY-18】信息学奥赛一本通T1331-后缀表达式的值

文章目录前言一、题目二、解题思路总结前言本次训练内容： 栈的复习。栈模拟四则运算计算问题的练习。训练解题思维。一、题目从键盘读入一个后缀表达式（字符串），只含有0-9组成的运算数及加（）、减…...

编程日记 2025/7/28 21:33:53

时序预测 | Transformer-LSTM-SVM时间序列预测（Matlab完整源码和数据，适合基础小白研究）

时序预测 | Transformer-LSTM-SVM时间序列预测（Matlab完整源码和数据，适合基础小白研究） 目录时序预测 | Transformer-LSTM-SVM时间序列预测（Matlab完整源码和数据，适合基础小白研究）效果一览基本介绍代码…...

编程日记 2025/7/28 21:33:51

【HarmonyOS 5】makeObserved接口详解

【HarmonyOS 5】makeObserved接口详解一、makeObserved接口是什么？ makeObserved 接口（API version 12 起可用）用于将非观察数据转为可观察数据，适用于三方包类、Sendable 装饰的类、JSON.parse 返回的对象、collections.Array…...

编程日记 2025/7/31 20:04:35

色谱图QCPColorMap

一、QCPColorMap 概述 QCPColorMap 是 QCustomPlot 中用于绘制二维颜色图的类，可以将矩阵数据可视化为颜色图（热力图），支持自定义色标和插值方式。二、主要属性属性类型描述dataQCPColorMapData存储颜色图数据的对象interpol…...

编程日记 2025/8/2 16:20:10

【数据结构_12】二叉树（4）

一、二叉树的层序遍历思路：可以按照先序的方式来遍历这个树，递归的时候，给递归方法，加上辅助的参数，level表示当前层数，递归过程中，根据level的值，决定当前整个节点要放到哪个list中…...

编程日记 2025/8/2 16:47:06

HCIA-Datacom高阶：vlan、vlanif、单臂路由、静态路由、ospf综合实验

本实验拓扑图如下：实验包含 AR1、AR2、AR3 路由器，LSW1（三层交换机）、LSW2、LSW3 交换机，以及 PC1-4 和 Server1。AR1 与 LSW2 通过单臂路由连接，AR2 与 AR3、LSW1 构成 OSPF 网络，AR1 与 AR2 间…...

编程日记 2025/7/31 12:01:56

HTTP 1.0 和 2.0 的区别

HTTP 1.0 和 2.0 的核心区别体现在性能优化、协议设计和功能扩展上，以下是具体对比： 一、核心区别对比特性HTTP 1.0HTTP 2.0连接方式非持久连接（默认每次请求新建 TCP 连接）持久连接（默认保持连接，可复用…...

编程日记 2025/7/28 21:33:42

如何一键批量删除多个 Word 文档中的页眉和页脚

在工作中，许多 Word 文档的页眉页脚中包含公司名称、Logo、电话等信息，用于对外宣传。但有时我们需要批量删除这些页眉页脚信息，尤其当信息有误时，手动逐个删除会增加工作量，导致效率低下。本文将介绍一种便捷的方法&a…...

编程日记 2025/8/1 6:14:38

关于编译树莓派内核系统的总结

1.首先获取官方的内核系统源码： 然后在源码根目录执行命令： 🌟ARCHarm64 CROSS_COMPILEaarch64-linux-gnu- KERNELkernel8 make bcm2712_defconfig （注意这里的是树莓派5的64位的） 🌟ARCHarm CROSS_COM…...

编程日记 2025/7/28 1:17:24

AIGC赋能插画创作：技术解析与代码实战详解

文章目录一、技术架构深度解析二、代码实战：构建AIGC插画生成器1. 环境配置与依赖安装2. 模型加载与文本提示词构建3. 图像生成与参数调优4. 风格迁移与多模型融合三、进阶技巧：参数调优与效果增强四、应用场景代码示例1. 游戏角色设计2. 广告海报生成…...

编程日记 2025/7/31 14:58:41

平衡二叉树（leetcode刷题）

题目描述： 给定一个二叉树，判断它是否是平衡二叉树 （平衡二叉树是指该树所有节点的左右子树的高度相差不超过 1。） 示例 1： 输入：root [3,9,20,null,null,15,7] 输出：true示例 2&#xff1…...

编程日记 2025/8/2 23:39:57

【数据结构 · 初阶】- 带环链表

目录一.基本结构二.判断一个单链表带不带环三.2个问题 1.为什么 slow 走 1 步，fast 走 2 步，他们会相遇，会不会错过？请证明。 2.为什么 slow 走 1 步，fast 走 X 步 ( X > 3 )，他们会相遇&#x…...

编程日记 2025/8/1 5:01:56

ClickHouse简介

OLAP与ClickHouse的定位 OLAP的核心概念 OLTP：服务于高并发、低延迟的短事务操作（如银行转账、订单支付），强调数据的增删改查（CRUD）和事务一致性（ACID）。 OLAP：专注于大…...

编程日记 2025/8/2 18:39:22

强制重装及验证onnxruntime-gpu是否正确工作

#工作记录我们经常会遇到明明安装了onnxruntime-gpu或onnxruntime后，无法正常使用的情况。一、强制重新安装 onnxruntime-gpu 及其依赖 # 强制重新安装 onnxruntime-gpu 及其依赖 pip install --force-reinstall --no-cache-dir onnxruntime-gpu1.18.0 --extra…...

编程日记 2025/7/30 17:07:41

分布自定义shell脚本（详写）附带全代码

涉及知识全排列常见指令小知识点操作系统什么是进程进程控制步骤 1：项目准备在开始编写代码之前，你需要创建一个新的项目文件夹，并在其中创建一个 .cpp 文件，例如 my_shell.cpp。同时，确保你已经安装了 C…...

编程日记 2025/7/28 16:14:46

windows拷贝文件脚本

1、新建脚本文件xxx.bat，名字任意，后缀未.bat即可，将以下内容拷贝进去，修改src和des为自己文件的目录即可。 echo off :: 设置字符集为UTF-8，命令窗口能正确显示中文字符。 chcp 65001 rem 读取当前目录并进入当前目…...

编程日记 2025/8/2 20:31:22

Arduino编译和烧录STM32——基于J-link SWD模式

一、安装Stm32 Arduino支持在arduino中添加stm32的开发板地址：https://github.com/stm32duino/BoardManagerFiles/raw/main/package_stmicroelectronics_index.json 安装stm32开发板支持二、安装STM32CubeProgrammer 从stm32网站中安装：https://ww…...

编程日记 2025/7/28 21:33:24

Java表达式2.0

1 .数据类型转换自动类型转换的规则自动类型转换遵循一定的规则，这些规则确保了转换的合理性和安全性。以下是自动类型转换的主要规则： 容量小的类型自动转换为容量大的类型 Java中，数据类型的容量从小到大依次为：byte → shor…...

编程日记 2025/7/31 1:42:48

【概率论，算法】排列的峰值期望

Surtr1 的珂学难题题目链接:https://ac.nowcoder.com/acm/contest/107965/E 给定一个长度为 n n n 的排列 p p p，排列中任一位置如果满足以下条件，则称该位置为峰值： 位置 1：若存在元素，满足 p [ 1 ] > p […...

编程日记 2025/8/1 16:17:08

清理C盘组合拳：最高释放空间80GB+

分享一套系统化的C盘清理方案，涵盖从基础清理到深度优化的8个关键步骤，结合安全性与效率，可快速释放5-50GB空间： 一、精准定位空间占用源（必备工具） 空间可视化分析使用 TreeSize Free 或 WizTree 扫描C…...

编程日记 2025/7/30 18:11:45

容器中的对象切片问题

C 容器（如 std::vector、std::list 等） 通常存储对象的副本，而非指向对象的指针。因此，当与继承结合使用时，可能导致切片（Object Slicing） 问题，即仅存储基类部分，丢失派…...

编程日记 2025/7/28 21:33:16

SpringBoot编写单元测试

pom.xml引入单元测试的坐标 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency>编写单元测试类测试类…...

编程日记 2025/7/28 21:33:14