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

前端——布局方式

news 来源：原创 2025/7/14 21:09:03

普通流（标准流）

所谓的标准流: 就是标签按照规定好默认方式排列.

1. 块级元素会独占一行，从上向下顺序排列。

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

常用元素：span、a、i、em等

浮动（float）

可以让多个块级元素水平排列成一行，浮动的盒子中间是没有缝隙的，是紧挨着一起的

虽然将块级元素转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。

float 属性用于创建浮动元素，使得元素能够向左或向右浮动，而文本和内联元素则会环绕在浮动元素的周围。

float： 属性值；

属性值	说明
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动特性

1.浮动元素会脱离标准流(脱标)

1.脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）

2.浮动的盒子不再保留原先的位置

2.浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

3. 浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

浮动的盒子中间是没有缝隙的，是紧挨着一起的

行内元素同理

	  <style>.a1 {width: 100px;height: 100px;background-color: chartreuse;float: left;}.a2 {width: 50px;height: 50px;background-color: orangered;float: left;}.a3 {width: 100px;height: 50px;background-color: fuchsia;float: right;}.a4 {width: 200px;height: 200px;background-color: aqua;}.a5 {width: 200px;height: 200px;background-color: aqua;}</style><body><div class="a1">111</div><div class="a2">222</div><div class="a3">333</div><div class="a4">444</div><div class="a2">555</div></body>

清除浮动

为什么需要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

清除浮动的本质是清除浮动元素造成的影响

如果父盒子本身有高度，则不需要清除浮动

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

clear：属性值；

属性值	说明
left	清除所有左侧的浮动
right	清除所有右侧的浮动
both	同时清除左侧和右侧的所有浮动

将该未浮动元素将移到浮动元素（无论左浮动还是右浮动）的下面

清除浮动的策略是: 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子

清除浮动的方法

1.额外标签法也称为隔墙法，是W3C推荐的做法。

额外标签法也称为隔墙法，是W3C推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=”clear:both”></div>，或者其他标签（如<br/>等）。

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

2.父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

优点：代码简洁

缺点：无法显示溢出的部分

3.父级添加after伪元素

:after 方式是额外标签法的升级版。也是给父元素添加

*zoom 是一种针对 IE6/IE7 的 CSS Hack

			.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6,7专有*/*zoom: 1;}

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

4.父级添加双伪元素

*zoom 是一种针对 IE6/IE7 的 CSS Hack

			.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}

优点：代码更简洁

缺点：照顾低版本浏览器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a{background-color: orange;/* 父级添加overfl属性 *//* overflow: hidden; */}/* 父级添加after伪元素 *//* .clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {*zoom: 1;} */父级添加双伪元素.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}.a0{width: 100px;height: 100px;background-color: deeppink;float:left;}.a2{height: 50px;background-color: red;}.a4{height: 150px;background-color: greenyellow;}.b{height: 100px;background-color: yellow;}</style></head><body><div class="a clearfix"><div class="a0 a1">1</div><div class="a0 a2">2</div><div class="a0 a3">3</div><div class="a0 a4">4</div><!-- 额外标签法 --><!-- <div style="clear:both"></div> --></div><div class="b">xxxxxxx</div></body>
</html>

定位

定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位= 定位模式+ 边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

边偏移

属性	说明
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式

1. 静态定位 static

静态定位是元素的默认定位方式，无定位的意思。

position：static；

静态定位按照标准流特性摆放位置，它没有边偏移

静态定位在布局时很少用到

4. 固定定位 fixed

元素始终固定在视口中的某个位置，在浏览器页面滚动时元素的位置不会改变。

position：fixed；

1.以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系

不随滚动条滚动。

2.固定定位不在占有原先的位置。固定定位也是脱标的

2. 相对定位 relative

相对定位是元素在移动位置的时候，是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置），原位置仍然保留，相对定位并没有脱标。

position：relative；

3. 绝对定位 absolute

该元素相对于最近的祖先定位元素进行偏移。

position：absolute；

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3.绝对定位不再占有原先的位置（脱标），所以绝对定位是脱离标准流的。

4. 加了绝对定位的盒子不能通过margin:0 auto 水平居中

子绝父相

子级是绝对定位的话，父级要用相对定位。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

5. 粘性定位

结合偏移属性，粘性定位会在一定滚动范围内表现为相对定位，超过指定范围后表现为固定定位

position：sticky；
偏移量；

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加top 、left、right、bottom 其中一个才有效跟页面滚动搭配使用。

兼容性较差，IE 不支持。、

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

z-index：数值；

数值可以是正整数、负整数或0, 默认是auto，数值越大，盒子越靠上

如果属性值相同，则按照书写顺序，后来居上

数字后面不能加单位

只有定位的盒子才有z-index 属性

定位的拓展

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3. 脱标的盒子不会触发外边距塌陷

浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

但是绝对定位（固定定位）会压住下面标准流所有的内容。

前端——布局方式

普通流（标准流） 所谓的标准流: 就是标签按照规定好默认方式排列. 1. 块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 2. 行内元素会按照顺序，从左到右顺序排列&am…...

编程日记 2025/7/14 21:09:03

山东大学软件学院计算机图形学2025期末考题回忆版

任课教师：周元峰老师考试时间：2025年5月13日这次考试比之前的往年题多了写和读OpenGL代码的题目，其它和能找到的往年题（19、21、24）的差别不大。写完回忆题又发现自已错了好几个原题。。。。。。。。。。。。。。。…...

编程日记 2025/6/29 8:26:40

数控滑台：革新传统加工方式的利器

数控技术作为当今制造业中的重要发展方向，已深入到了各个领域，其中数控滑台作为数控加工领域的一个重要组成部分，对于提高加工效率、精度和质量具有重要意义。本文将重点探讨数控滑台的原理、优势以及在工业制造领域的应用。一、数控滑台的…...

编程日记 2025/6/29 1:34:12

【WIN】笔记本电脑忘记密码解决办法/笔记本电脑重装系统笔记/bitlocker忘记密码的解决办法

通过安全模式下的CMD命令找回具体的步骤就是： 首先通过笔记本的对应的一个进入安全模式的一个方式进入安全模式之后，一直点着这个诊断，然后高级选项进去就可以看到了。但是这种方法应该是属于安全漏洞，所以只适合老版本。如果是…...

编程日记 2025/6/29 8:49:21

手机相册的 “智能分类” 功能

我们以手机相册的 “智能分类” 功能（识别图片中的物体类型）为例，演示如何使用 TensorFlow Lite 框架将端侧模型部署到 Android 设备上。该场景通用且覆盖端侧部署的核心步骤：模型准备→环境配置→代码集成→硬件加速→业务调用。…...

编程日记 2025/6/29 8:37:51

配置Hadoop集群-上传文件

（一）上传小文件上传文件的时候，我们传一个大一点的（>128M），再传一个小一点的。对于大一点的文件，我们要去看看它是否会按128M为单位去拆分这个大文件，而拆分成大文件之后&#x…...

编程日记 2025/6/29 8:44:52

SpringBoot整合MQTT实战：基于EMQX实现双向设备通信（附源码）

简言： 在万物互联的时代，MQTT协议凭借其轻量级、高效率的特性，已成为物联网通信的事实标准。本教程将带领您在Ubuntu系统上搭建EMQX 5.9.0消息服务器，并使用Spring Boot快速实现两个客户端的高效通信。通过本指南，您将…...

编程日记 2025/7/1 13:50:19

windows c++ (9) 程序内注册服务并修改登录账户

实现方式全以批处理文件实现，直接在进程内调用即可 1、注册服务注册服务manage.bat内容如下 echo off setlocalset ServiceExeYouProcess.exe set ServiceNameYouProcess set BASE%~dp0:: 检查命令行参数 if "%~1""" (echo Usage: manage_p…...

编程日记 2025/7/14 21:07:13

按键精灵ios脚本新增元素功能助力辅助工具开发（三）

元素节点功能（iOSElement） 在按键精灵 iOS 新版 APP v2.2.0 中，新增了元素节点功能 iOSElement，该功能包含共 15 个函数。这一功能的出现，为开发者在处理 iOS 应用界面元素时提供了更为精准和高效的方式。通过这些函…...

编程日记 2025/7/14 21:02:57

OpenHarmony平台驱动开发（十五），SDIO

OpenHarmony平台驱动开发（十五） SDIO 概述功能简介 SDIO（Secure Digital Input and Output）由SD卡发展而来，与SD卡统称为MMC（MultiMediaCard），二者使用相同的通信协议。SDIO接口…...

编程日记 2025/6/29 8:52:10

ICMP协议详解及不同VLAN/VXLAN主机通信中的ICMP示例

一、ICMP协议概述 ICMP（Internet Control Message Protocol，互联网控制消息协议）是TCP/IP协议栈中的一项核心协议，用于在IP网络中传输控制消息和错误报告。ICMP定义在RFC 792中，主要用于诊断网络问题和传递控制信息。…...

编程日记 2025/7/10 20:39:33

SQL server数据库实现远程跨服务器定时同步传输数据

项目背景数据需要定期迁移，数据存在于客户政务外网下，从旧数据库迁移到新数据库中，且要求能够定时增量同步。注意： 源数据库所在服务器为windows服务器，目标数据库所在服务器为linux服务器。源数据库所在windows服…...

编程日记 2025/6/29 8:49:43

贝叶斯优化Transformer融合支持向量机多变量时间序列预测，Matlab实现

贝叶斯优化Transformer融合支持向量机多变量时间序列预测，Matlab实现目录贝叶斯优化Transformer融合支持向量机多变量时间序列预测，Matlab实现效果一览基本介绍程序设计参考资料效果一览基本介绍 1.BO-TransformerSVM多变量时间序列预测&#xff0c…...

编程日记 2025/6/29 5:07:37

服务器租用与托管注意事项有哪些

在当今数字化的时代，服务器对于企业和个人的重要性不言而喻。无论是搭建网站、运行应用程序，还是存储数据，服务器都是关键的基础设施。而服务器租用与托管作为常见的选择方式，其中的注意事项你可不能马虎。企业在进行租用或者是…...

编程日记 2025/6/29 8:44:35

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】金融风控分析案例-10.3 风险指标可视化监控

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL金融风控分析之风险指标可视化监控实战一、引言二、案例背景三、数据准备（一）数据来源与字段说明（二）数据清洗四、…...

编程日记 2025/6/29 8:25:06

【AI提示词】贝叶斯分析专家

提示说明一名专业的贝叶斯推断专家，具备统计建模、数据分析和不确定性决策方面的专长。提示词 # Role: 贝叶斯分析专家## Profile - language: 中文 - description: 一名专业的贝叶斯推断专家，具备统计建模、数据分析和不确定性决策方面的专长 - ba…...

编程日记 2025/6/29 8:34:04

星云智控自定义物联网实时监控模板-为何成为痛点？物联网设备的多样化-优雅草卓伊凡

星云智控自定义物联网实时监控模板-为何成为痛点？物联网设备的多样化-优雅草卓伊凡引言：物联网监控的模板革命在万物互联的时代，设备监控已成为保障物联网系统稳定运行的核心环节。传统的标准化监控方案正面临着设备类型爆炸式增长带来的…...

编程日记 2025/7/7 19:28:02

#跟着若城学鸿蒙#HarmonyOS NEXT学习之Blank组件详解

一、组件介绍 Blank（空白）组件是HarmonyOS NEXT中一个简单但非常实用的UI组件，它主要用于在布局中创建空白区域，帮助开发者更灵活地控制界面元素之间的间距和布局结构。虽然Blank组件本身不显示任何内容，但它在界面设…...

编程日记 2025/6/29 8:40:00

《Docker 入门与进阶：架构剖析、隔离原理及安装实操》

1 docker 简介 1.1 Docker 的优点 Docker 是一款开放平台，用于应用程序的开发、交付与运行，能将应用和基础架构分离，实现软件快速交付 ，还能以统一方式管理应用和基础架构，缩短代码从编写到上线的时间。其核心优势如…...

编程日记 2025/6/29 8:41:05

OpenHarmony 开源鸿蒙南向开发——linux下使用make交叉编译第三方库——mqtt库

准备工作请依照这篇文章搭建环境 OpenHarmony 开源鸿蒙南向开发——linux下使用make交叉编译第三方库——环境配置_openharmony交叉编译-CSDN博客下载 wget ftp://ftp.gnutls.org/gcrypt/gnutls/v3.5/gnutls-3.5.9.tar.xz 解压 tar -xf mkdir ./out cd ./out Cmake命…...

编程日记 2025/6/29 8:31:09

【LeetCode 热题 100】二叉树的最大深度 / 翻转二叉树 / 二叉树的直径 / 验证二叉搜索树

⭐️个人主页：小羊 ⭐️所属专栏：LeetCode 热题 100 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录二叉树的中序遍历二叉树的最大深度翻转二叉树对称二叉树二叉树的直径二叉树的层序遍历将有序数组转换为二叉搜索树验…...

编程日记 2025/6/29 8:31:04

中国版 Cursor---腾讯云 CodeBuddy | 从安装VSCode到数独小游戏问世

中国版 Cursor---腾讯云 CodeBuddy | 从安装VSCode到数独小游戏问世引言CodeBuddy环境准备VSCodeCodeBuddyNode.js下载安装游戏开发Craft模型一句话生成数独游戏游戏体验 EdgeOne PagesMCPPages MCP Server配置 MCP Server 游戏源码总结引言在正文开始之前，先引…...

编程日记 2025/7/14 10:17:35

【蓝桥杯嵌入式】【复盘】第13届国赛真题

1. 前言最近在准备16届的蓝桥杯嵌入式赛道的国赛，打算出一个系列的博客，记录STM32G431RBT6这块比赛用板上所有模块可能涉及到的所有考点，如果有错误或者遗漏欢迎各位大佬斧正。本系列博客会分为以下两大类： 1.1. 单独模块的讲…...

编程日记 2025/7/13 22:41:05

Docker疑难杂症解决指南

Docker疑难杂症解决指南 Docker作为容器化技术的代表，广泛应用于开发、测试和部署环境中。然而，在使用过程中，用户可能会遇到各种问题。以下是一些常见的Docker疑难杂症及其解决方法。容器无法启动容器无法启动是常见问题之一&#xff0…...

编程日记 2025/6/29 1:34:19

嵌入式开发学习日志（数据结构--顺序结构单链表）Day19

一、顺序结构安装软件命令： sudo apt-get install (软件名) 安装格式化对齐：sudo apt-get install clang-format 内存泄漏检测工具： sudo apt-get install valgrind 编译后，使用命令 valgrind ./a.out 即可看内…...

编程日记 2025/6/29 3:06:53

题目005 Choose two. Which two actions can obtain information about deadlocks? □ A) Run the SHOW ENGINE INNODB MUTEX command from the mysql client. □ B) Enable the innodb_status_output_locks global parameter. □ C) Enable the innodb_print_all_deadlock…...

编程日记 2025/7/5 3:40:55