前端布局的方式有哪些
前端布局的方式有哪些
在前端开发里，布局就像是装修房子，把不同的东西合理地摆放在合适的位置，让整个空间既美观又实用。下面给你介绍几种常见的前端布局方式：
1. 普通流布局（标准文档流布局）
这就像是按顺序往书架上摆书，一本挨着一本，从左到右，从上到下依次排列。在网页里，元素默认就是按照这种方式排列的。比如段落、标题这些元素，一个接一个地显示在页面上。块级元素（像<div>、<p>等）会独占一行，就像大本书会占一整层书架；行内元素（像<span>、<a>等）会在一行内依次排列，就像小卡片可以在同一层挨着放。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><div>这是一个块级元素，会独占一行</div><p>这也是一个块级元素</p><span>这是行内元素</span><a href="#">这也是行内元素</a>
</body>
</html>
2. 浮动布局
浮动布局就像把一些东西从书架上拿出来，让它们“飘”在半空中，并且可以左右移动。在网页中，通过设置元素的float属性（值可以是left或right），让元素脱离普通流，向左或向右浮动。其他元素会围绕着浮动元素排列。比如做一个新闻列表，图片可以设置为向左浮动，文字就会围绕在图片旁边。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>img {float: left;margin-right: 10px;}</style>
</head>
<body><img src="example.jpg" alt="示例图片"><p>这里是围绕图片排列的文字内容，会在图片旁边显示。</p>
</body>
</html>
3. 定位布局
定位布局就像是给每个东西装上了定位器，可以把它们精确地放到你想要的位置。它有几种不同的定位方式：
- 相对定位：就像在书架上把某本书稍微挪动一下位置，但它原本占的地方还留着。设置
position: relative后，可以通过top、right、bottom、left属性来调整元素相对于它原来位置的偏移量。 - 绝对定位：好比把东西从书架上拿出来，放到房间的任意位置，完全脱离了原来的摆放顺序。设置
position: absolute后，元素会相对于最近的已定位祖先元素（即设置了position属性值不为static的祖先元素）进行定位。 - 固定定位：如同把东西固定在房间的某个位置，不管你怎么移动书架（滚动页面），它都在那里不动。设置
position: fixed后，元素会相对于浏览器窗口进行定位。 - 粘性定位：有点像先把东西放在书架上正常排列，当滚动页面到一定位置时，它就会像被胶水粘住一样固定在某个地方。设置
position: sticky。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.relative {position: relative;top: 20px;left: 20px;background-color: lightblue;}.absolute {position: absolute;top: 50px;left: 50px;background-color: lightgreen;}.fixed {position: fixed;bottom: 20px;right: 20px;background-color: lightcoral;}.sticky {position: sticky;top: 0;background-color: lightyellow;}</style>
</head>
<body><div class="relative">这是相对定位的元素</div><div class="absolute">这是绝对定位的元素</div><div class="fixed">这是固定定位的元素</div><div class="sticky">这是粘性定位的元素</div>
</body>
</html>
4. 弹性布局（Flexbox）
弹性布局就像是一个有弹性的容器，里面的东西可以根据容器的大小自动调整自己的位置和大小。你可以轻松地控制元素的排列方向（水平或垂直）、对齐方式（居中、两端对齐等）。比如做一个导航栏，用弹性布局可以让导航项均匀分布。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.flex-container {display: flex;justify-content: space-around; /* 元素均匀分布 */background-color: lightgray;}.flex-item {background-color: lightblue;padding: 10px;margin: 5px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">导航项1</div><div class="flex-item">导航项2</div><div class="flex-item">导航项3</div></div>
</body>
</html>
5. 网格布局（Grid）
网格布局就像是把房间划分成一个个小格子，你可以把东西放到任意的格子里。它比弹性布局更强大，可以创建二维的网格结构，精确控制元素在行和列上的位置。比如设计一个图片展示页面，用网格布局可以让图片整齐地排列成多行多列。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.grid-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 3列，每列宽度相等 */gap: 10px; /* 格子之间的间距 */background-color: lightgray;}.grid-item {background-color: lightblue;padding: 20px;}</style>
</head>
<body><div class="grid-container"><div class="grid-item">网格项1</div><div class="grid-item">网格项2</div><div class="grid-item">网格项3</div><div class="grid-item">网格项4</div><div class="grid-item">网格项5</div><div class="grid-item">网格项6</div></div>
</body>
</html>
这些布局方式各有特点，在实际开发中，我们常常会根据具体的需求把它们组合起来使用，打造出各种各样美观、实用的网页布局。
相关文章：
前端布局的方式有哪些
前端布局的方式有哪些 在前端开发里，布局就像是装修房子，把不同的东西合理地摆放在合适的位置，让整个空间既美观又实用。下面给你介绍几种常见的前端布局方式： 1. 普通流布局（标准文档流布局） 这就像是按…...
seata集成nacos
#nacos集成nacos并配置mysql数据源 1. 所需依赖 <!--seata 分布式事务--><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-seata</artifactId></dependency> 2. 打开seata目录ÿ…...
第29篇 基于ARM A9处理器用C语言实现中断＜五＞
Q：怎样设计基于ARM A9处理器的C语言程序使用定时器中断实现实时时钟？ A：在上一期的程序中添加A9 Private Timer作为第三个中断源，配置该定时器使其每隔0.01秒产生一次中断。使用该定时器使全局变量time的值递增，并将…...
deepseek多列数据对比，联想到excel的高级筛选功能
目录 1 业务背景 2 deepseek提示词输入 3 联想分析 4 EXCEL高级搜索 1 业务背景 系统上线的时候经常会遇到一个问题，系统导入的数据和线下的EXCEL数据是否一致，如果不一致，如何快速找到差异值，原来脑海第一反应就是使用公…...
C 程序多线程拆分文件
C 程序多线程拆分文件 在C语言中，实现多线程来拆分文件通常需要借助多线程库，比如 POSIX 线程库（pthread）或者 Windows 的线程库（CreateThread 或类似的函数）。下面我将分别展示在 Linux 和 Windows 环境下…...
mysql 使用 CONCAT、GROUP_CONCAT 嵌套查询出 json 格式数据
tb_factory表由 factory_code 和 factory_name 字段，查询出如下所示效果： {"factory_0001": "工厂1","factory_0002": "工厂2",... } select sql： SELECT CONCAT( "{",GROUP_CONCAT( C…...
Leetcode 2466. Count Ways To Build Good Strings
Problem Given the integers zero, one, low, and high, we can construct a string by starting with an empty string, and then at each step perform either of the following: Append the character ‘0’ zero times.Append the character ‘1’ one times. This can …...
分布式 IO 模块：食品罐装产线自动化与高效运行的推手
在当今竞争激烈的罐装视频生产行业，如何实现产线的自动化与连续性高效运行，成为了众多企业追求的核心目标。明达技术推出的MR30分布式 IO 模块作为一种先进的工业控制技术，正逐渐崭露头角，为食品罐装产线带来了前所未有的变革。 痛…...
rustdesk编译修改名字
最近，我用Rust重写了一个2W行C代码的linux内核模块。在此记录一点经验。我此前没写过内核模块，认识比较疏浅，有错误欢迎指正。 为什么要重写？ 这个模块2W行代码量看起来不多，却在线上时常故障，永远改不完。…...
MySQL 窗口函数：功能、使用场景与性能优化
MySQL 8.0 引入了一个强大的新特性——**窗口函数（Window Functions）**。它为数据分析和复杂查询提供了极大的便利，但同时也可能带来性能问题。本文将带你快速了解窗口函数的功能、使用场景以及如何优化性能。 --- ## **什么是窗口函数&#…...
数据权限校验实践
数据权限控制实践 最近在实习中为公司项目完成一个文件数据权限校验代码的转换重构，写这篇博客来记录前后两种权限校验的实现方案与相关概念 原实现方案：RBAC-基于角色的访问控制 RBAC（Role-Based Access Control） RBAC 是一种常…...
spring boot对接clerk 实现用户信息获取
在现代Web应用中，用户身份验证和管理是一个关键的功能。Clerk是一个提供身份验证和用户管理的服务，可以帮助开发者快速集成这些功能。在本文中，我们将介绍如何使用Spring Boot对接Clerk，以实现用户信息的获取。 1.介绍 Clerk提供…...
公网远程家里局域网电脑过程详细记录，包含设置路由器。
由于从校内迁居小区，校内需要远程控制访问小区内个人电脑，于是早些时间刚好自己是电信宽带，可以申请公网ipv4不需要花钱，所以就打电话直接申请即可，申请成功后访问光猫设备管理界面192.168.1.1，输入用户名密码登录超管（密码是网上查下就有了）设置了光猫为桥接模式，然后…...
自制简单的图片查看器（）
图片格式：支持常见的图片格式（JPG、PNG、BMP、GIF）。 import os import tkinter as tk from tkinter import filedialog, messagebox from PIL import Image, ImageTkclass ImageViewer:def __init__(self, root):self.root rootself.root.…...
25/2/17 ＜嵌入式笔记＞ 桌宠代码解析
这个寒假跟着做了一个开源的桌宠，我们来解析下代码，加深理解。 代码中有开源作者的名字。可以去B站搜着跟着做。 首先看下main代码 #include "stm32f10x.h" // Device header #include "Delay.h" #include &quo…...
Kafka偏移量管理全攻略：从基础概念到高级操作实战
#作者：猎人 文章目录 前言：概念剖析kafka的两种位移消费位移消息的位移位移的提交自动提交手动提交 1、使用--to-earliest重置消费组消费指定topic进度2、使用--to-offset重置消费offset3、使用--to-datetime策略指定时间重置offset4、使用--to-current…...
python中使用日期和时间差：datetime模块
datetime模块的表示时间的有 datetime.datetime #时间包含年月日时分秒毫秒 datetime.date #时间只包含年月日 datetime.time #只包含时分秒 获取当前时间 import datetime now datetime.datetime.now() print(now)得到 atetime中的年月日时分秒可以分别取出来 import da…...
申论对策建议类【2022江苏B卷第一题“如何开展网络直播”】
材料： 近年来，公安交管部门通过网络直播，将执法过程和执法细节以视频形式呈现在公众面前，吸引“围观”、组织点评，让执法过程变成一堂生动的法治公开课。 “各位网友，大家好！这里是‘全国交通…...
Blazor-父子组件传递任意参数
在我们从父组件传参数给子组件时，可以通过子组件定义的[Parameter]特性的公开属性进行传值，但是当我们需要传递多个值的时候，就需要通过[Parameter]特性定义多个属性，有没有更简便的方式？ 我们可以使用定义 IDictionar…...
Python的那些事第二十三篇：Express（Node.js）与 Python：一场跨语言的浪漫邂逅
摘要 在当今的编程世界里，Node.js 和 Python 像是两个性格迥异的超级英雄，一个以速度和灵活性著称，另一个则以强大和优雅闻名。本文将探讨如何通过 Express 框架将 Node.js 和 Python 结合起来，打造出一个高效、有趣的 Web 应用。我们将通过一系列幽默风趣的实例和表格，展…...
win11安装wsl报错：无法解析服务器的名称或地址（启用wsl2）
1. 启用wsl报错如下 # 查看可安装的 wsl --install wsl --list --online此原因是因为没有开启DNS的原因，所以需要我们手动开启DNS。 2. 按照如下配置即可 Google的DNS（8.8.8.8和8.8.4.4) 全国通用DNS地址 (114.114.114.114) 3. 运行以下命令来重启 WSL…...
【设计模式】【结构型模式】桥接模式（Bridge）
👋hi，我不是一名外包公司的员工，也不会偷吃茶水间的零食，我的梦想是能写高端CRUD 🔥 2025本人正在沉淀中… 博客更新速度 👍 欢迎点赞、收藏、关注，跟上我的更新节奏 🎵 当你的天空突…...
1997-2019年各省进出口总额数据
1997-2019年各省进出口总额数据 1、时间：1997-2020年 2、来源：国家统计局、各省年鉴 3、指标：进出口总额 4、范围：31省 5、指标解释：进出口总额是指以货币表示的一定时期内一国实际进出口商品的总金额ÿ…...
AI前端开发效率革命：拥抱AI，开启前端开发新纪元
前端开发行业竞争日益激烈，项目交付周期不断缩短，对开发效率的要求也越来越高。在这种高压环境下，开发者们常常面临着巨大的压力。而近年来，人工智能技术的飞速发展，特别是AI写代码工具的出现，为前端开发带…...
Rust编程语言入门教程（一）安装Rust
目录 引言一、为什么要用 Rust？二、与其他语言比较三、Rust 特别擅长的领域四、Rust 与 Firefox五、Rust 的用户和案例六、Rust 的优缺点七、安装 Rust1、访问官网下载 Rust2、下载完成，执行exe文件 八、Rust 安装验证九、开发工具结束语 引言 在当今快…...
Kubernetes控制平面组件：Kubernetes如何使用etcd
云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...
2025年-G4-Lc78--121. 买卖股票的最佳时机--（java版）
1.题目描述 2.思路 思路1: 做两轮排序，第一轮排序找到最小的那个数，然后再判断最小的那个数之后还有其他数吗，如果有在进行排序，选出最大的那个数，然后值相减。 问题要点： （1）你需要…...
LabVIEW 中的 3dgraph.llb 库
3dgraph.llb 库位于 C:\Program Files (x86)\National Instruments\LabVIEW 2019\vi.lib\Platform 目录下，是 LabVIEW 系统中用于 3D 图形相关操作的重要库。它为 LabVIEW 用户提供了丰富的功能，能在应用程序中创建、显示和交互各种 3D 图形，…...
通过VSCode直接连接使用 GPT的编程助手
GPT的编程助手在VSC上可以直接使用 选择相应的版本都可以正常使用。每个月可以使用40条，超过限制要付费。 如下图对应的4o和claude3.5等模型都可以使用。VSC直接连接即可。 配置步骤如下： 安装VSCODE 直接，官网下载就行 https://code.vis…...
[LeetCode力扣hot100]-C++常用数据结构
0.Vector 1.Set-常用滑动窗口 set<char> ans;//根据类型定义，像vector ans.count()//检查某个元素是否在set里，1在0不在 ans.insert();//插入元素 ans.erase()//删除某个指定元素 2.栈 3.树 树是一种特殊的数据结构，力扣二叉树相…...
2-安装YIUI
YIUI框架：GitHub - LiShengYang-yiyi/YIUI: Unity3D UGUI Framework, 基于UI数据事件绑定为核心 数据驱动的UGUI框架, ETUI框架, ET框架官方推荐UI框架 ET框架：egametang/ET: Unity3D Client And C# Server Framework (github.com) 1 - 安装YIUI框架&a…...
16-使用QtChart创建动态图表：入门指南
QtChart是Qt框架中的一个强大模块，用于创建各种类型的图表，如折线图、柱状图、饼图等。它提供了丰富的API和灵活的配置选项，使得开发者能够轻松地将数据可视化集成到应用程序中。本文将介绍如何使用QtChart创建一个简单的动态折线图ÿ…...
蓝耘智算携手DeepSeek，共创AI未来
🌟 各位看官号，我是egoist2023！ 🌍 种一棵树最好是十年前，其次是现在！ 🚀 今天来学习如何通过蓝耘智算使用DeepSeek R1模型 👍 如果觉得这篇文章有帮助，欢迎您一键三连&a…...
具身智能在智能巡检机器人中的应用——以开关柜带电操作机器人为例
随着机器人技术和人工智能的迅速发展，具身智能在各行业的应用日益广泛，尤其是在电力行业中的智能巡检领域。传统的电力巡检和维护工作通常需要人工操作，存在着高温、高压、强电磁场等危险环境，且效率较低。开关柜带电操作机器人作…...
【第4章：循环神经网络（RNN）与长短时记忆网络（LSTM）— 4.6 RNN与LSTM的变体与发展趋势】
引言：时间序列的魔法钥匙 在时间的长河中，信息如同涓涓细流，绵延不绝。而如何在这无尽的数据流中捕捉、理解和预测，正是循环神经网络（RNN）及其变体长短时记忆网络（LSTM）所擅长的。今天，我们就来一场深度探索，揭开RNN与LSTM的神秘面纱，看看它们如何在时间序列的海洋…...
【R语言】回归分析与判别分析
一、线性回归分析 1、lm()函数 lm()函数是用于拟合线性模型（Linear Models）的主要函数。线性模型是一种统计方法，用于描述一个或多个自变量（预测变量、解释变量）与因变量（响应变量）之间的关系…...
git开发流程以及github社区企业版
常规开发流程 1、将仓库 clone 到本地，已经 clone 的要 fetch & pull，保证本地 master 分支已经更新到最新状态 2、在 master 最新分支的基础上 checkout 一个开发分支，分支命名要求规范，如带用户名、日期、bug id 等关键信…...
DeepSeek + Vue实战开发
利用DeepSeek V3模型、siliconflow大模型一站式云服务平台以及vue3.0实现一个在线人工智能客服对话系统。 因为deepseek官网的api密钥使用起来比较缓慢，所以可以使用第三方的，具体操作请自行查阅资料。 siliconflow官网 SiliconFlow, Accelerate AGI …...
从安装软件到flask框架搭建可视化大屏（二）——创建一个flask页面，搭建可视化大屏，零基础也可以学会
附录：所有文件的完整代码 models.py # models/models.py from flask_sqlalchemy import SQLAlchemydb SQLAlchemy()class User(db.Model):__tablename__ user # 显式指定表名为 userid db.Column(db.Integer, primary_keyTrue)username db.Column(db.String(…...
Python编程中，async/await/asyncio分别是干啥的？
在Python异步编程中，async、await和asyncio是三个核心概念。它们共同构成了Python处理高并发I/O密集型任务的解决方案。本文将通过代码实例解析它们的作用和用法。 一、异步编程基础 1.1 同步 vs 异步 同步编程：代码按顺序执行，遇到I/O操作（如网络请求、文件读写）时会阻塞…...
vue非组件的初学笔记
1.创建Vue实例，初始化渲染的核心 准备容器引包创建Vue实例new Vue() el用来指定控制的盒子data提供数据 2.插值表达式 作用利用表达式插值，将数据渲染到页面中 格式{{表达式}} 注意点 表达式的数据要在data中存在表达式是可计算结果的语句插值表达式…...
4.3 学习UVM中的“run_phase“，将其应用到具体案例分为几步？
文章目录 前言1. run_phase 的作用与执行特点2. 关键组件的 run_phase 实现2.1 Driver 的 run_phase：驱动事务2.2 Monitor 的 run_phase：捕获事务2.3 Scoreboard 的 run_phase：数据比对 3. 同步与 Objection 管理3.1 控制仿真结束3.2 多组件协…...
快速搭建神经网络及模型保存)
[Python人工智能] 五十.PyTorch入门 (5)快速搭建神经网络及模型保存
从本专栏开始，作者正式研究Python深度学习、神经网络及人工智能相关知识。前文讲解PyTorch构建分类神经网络。这篇文章将介绍如何利用PyTorch快速构建神经网络，之前的代码比较复杂，通过自定义Net类实现，本文通过Torch函数定义神经网络。前面我们的Python人工智能主要以Tens…...
【C语言】有序数组的平方
文章目录 给你一个按非递减顺序排序的整数数组 nums，返回每个数字的平方组成的新数组，要求也按非递减顺序排序。 #include<stdio.h>/*** brief 计算一个整数数组的平方，并按非递减顺序存放结果* * 该函数接受一个整数数组arr和其长度le…...
osgearth视点坐标及鼠标交点坐标的信息显示（七）
核心函数如下： void COSGObject::addViewPointLabel() {//mRoot->addChild(osgEarth::Util::Controls::ControlCanvas::get(mViewer));//放开这句，球就卡住了。 为什么，shitosgEarth::Util::Controls::ControlCanvas* canvas = osgEarth::Util::Controls::ControlCanvas…...
【096】基于51单片机红外线人数统计系统【Proteus仿真+Keil程序+报告+原理图】
☆、设计硬件组成：51单片机最小系统LCD1602液晶显示两路E18-D80NK红外线传感器DS1302时钟芯片AT24C02存储芯片蜂鸣器LED灯按键设置。 1、设计采用STC89C52、AT89C52、AT89S52作为主控芯片； 2、采用DS1302时钟芯片实现对日期和时间的计时，并…...
【ENSP】链路聚合的两种模式
【ENSP】链路聚合的两种模式 1、背景介绍2、链路聚合的使用场景3、配置过程1、手工模式Eth-Trunk配置2、静态LACP模式Eth-Trunk 4、总结 1、背景介绍 随着网络规模的不断扩大，人们对骨干链路的带宽吞吐量和可靠性提出了越来越高的要求。在传统方案中，为…...
机器学习_17 K近邻算法知识点总结
K近邻算法（K-Nearest Neighbors，KNN）是一种简单而直观的机器学习算法，广泛应用于分类和回归任务。它通过寻找训练集中与新样本最接近的K个样本（近邻）来进行预测。今天，我们就来深入探讨K近邻算法…...
Web 后端 请求与响应
一 请求响应 1. 请求（Request） 客户端向服务器发送的HTTP请求，通常包含以下内容： 请求行：HTTP方法（GET/POST等）、请求的URL、协议版本。 请求头（Headers）：…...
网络工程师 （44）ARP协议
前言 ARP协议，即地址解析协议（Address Resolution Protocol），是一种网络协议，主要用于将网络层的IPv4地址（逻辑地址）解析为链路层的物理地址（通常是MAC地址）。 一、基本概…...