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

前端——布局方式

article 2025/9/23 9:14:15

普通流（标准流）

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

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/9/15 16:51:43

Multimodal models —— CLIP，LLava，QWen

目录 CLIP CLIP训练 CLIP图像分类 CLIP框架 Text Enocder Image Encoder LLava系列 LLava LLava贡献 LLava模型结构总结 LLava两阶段训练 LLava 1.5 LLava 1.6 QWen CLIP CLIP是OpenAI 在 2021 年发布的，最初用于匹配图像和文本的预训练神经网络模型…...

编程日记 2025/9/16 1:07:36

Python模块化编程进阶指南：从基础到工程化实践

一、模块化编程核心原理与最佳实践 1.1 模块化设计原则根据企业级项目实践，模块化开发应遵循以下核心原则： 单一职责原则：每个模块只承担一个功能域的任务（如用户认证模块独立于日志模块）接口隔离原则…...

编程日记 2025/9/22 20:00:26

json-server的用法-基于 RESTful API 的本地 mock 服务

json-server 是一个非常方便的工具，用于快速搭建基于 RESTful API 的本地 mock 服务，特别适合前端开发阶段模拟后端数据接口。 🧩 一、安装 npm install -g json-server🚀 二、快速启动创建一个 db.json 文件（模拟数…...

编程日记 2025/9/20 22:14:11

LabVIEW与PLC通讯程序S7.Net.dll

下图中展示的是 LabVIEW 环境下通过调用S7.Net.dll 组件与西门子 PLC 进行通讯的程序。LabVIEW 作为一种图形化编程语言，结合S7.Net.dll 的.NET 组件优势，在工业自动化领域中可高效实现与 PLC 的数据交互，快速构建工业监控与控制应用。相较于…...

编程日记 2025/9/16 6:03:41

STM32 __main汇编分析

在STM32的启动流程中，__main是一个由编译器自动生成的C标准库函数，其汇编级调用逻辑可通过启动文件（如startup_stm32fxxx.s）观察到，但具体实现细节被封装在编译器的运行时库中。以下是其核心逻辑解析： 一、…...

编程日记 2025/8/4 1:02:47

使用GpuGeek高效完成LLaMA大模型微调：实践与心得分享

使用GpuGeek高效完成LLaMA大模型微调：实践与心得分享 🌟嗨，我是LucianaiB！ 🌍 总有人间一两风，填我十万八千梦。 🚀 路漫漫其修远兮，吾将上下而求索。随着大模型的发展&#xff0…...

编程日记 2025/9/15 20:59:10

华为IP（6）

VLAN聚合 VLAN聚合产生的技术背景在一般是三层交换机中，通常采用一个VLAN接口的方式实现广播域之间的互通，这在某些情况下导致了IP地址的浪费因为一个VLAN对应的子网中，子网号、子网广播地址、子网网关地址不能用作VLAN内的主机IP地址&a…...

编程日记 2025/9/19 20:15:37

1：OpenCV—图像基础

OpenCV教程头文件您只需要在程序中包含 opencv2/opencv.hpp 头文件。该头文件将包含应用程序的所有其他必需头文件。因此，您不再需要费心考虑程序应包含哪些头文件。例如 - #include <opencv2/opencv.hpp>命名空间所有 OpenCV 类和函数都在 cv 命名空…...

编程日记 2025/9/15 22:38:01

第三部分：内容安全（第十六章：网络型攻击防范技术、第十七章：反病毒、第十八章：入侵检测/防御系统（IDS/IPS））

文章目录第三部分：内容安全第十六章：网络型攻击防范技术网络攻击介绍流量型攻击 --- Flood攻击单包攻击及防御原理扫描窥探攻击畸形报文攻击Smurf攻击Land攻击Fraggle攻击IP欺骗攻击流量型攻击防御原理DDoS通用攻击防范技术 ---- 首包丢弃TCP类攻击SYN…...

编程日记 2025/9/15 13:13:32

Void: Cursor 的开源平替

GitHub：https://github.com/voideditor/void 更多AI开源软件：发现分享好用的AI工具、AI开源软件、AI模型、AI变现 - 小众AI Void，这款编辑器号称是开源的 Cursor 和 GitHub Copilot 替代品，而且完全免费！ 在你的代码库…...

编程日记 2025/9/16 17:41:49

100G QSFP28 BIDI光模块一览：100G单纤高速传输方案｜易天光通信

目录前言一、易天光通信100G QSFP28 BIDI光模块是什么？ 二、易天光通信100G QSFP28 BIDI光模块采用的关键技术三、100G QSFP28 BIDI光模块的优势四、以“易天光通信100G BIDI 40km ER1光模块”为例五、总结：高效组网，从“减”开始关于…...

编程日记 2025/9/17 5:19:25

基于大模型的脑出血智能诊疗与康复技术方案

目录一、术前阶段1.1 数据采集与预处理系统伪代码实现流程图1.2 特征提取与选择模块伪代码实现流程图1.3 大模型风险评估系统伪代码实现流程图二、术中阶段2.1 智能手术规划系统伪代码实现流程图2.2 麻醉智能监控系统伪代码实现流程图三、术后阶段3.1 并发症预测系统伪代码片段…...

编程日记 2025/7/26 1:58:52

卓力达电铸镍网：精密制造与跨领域应用的创新典范

目录引言一、电铸镍网的技术原理与核心特性二、电铸镍网的跨领域应用三、南通卓力达电铸镍网的核心优势四、未来技术展望引言电铸镍网作为一种兼具高精度与高性能的金属网状材料，通过电化学沉积工艺实现复杂结构的精密成型，已成为航空航天、电…...

编程日记 2025/9/17 2:53:09

今日积累：若依框架配置QQ邮箱，来发邮件，注册账号使用

QQ邮箱SMTP服务器设置首先，我们需要了解QQ邮箱的SMTP服务器地址。对于QQ邮箱，SMTP服务器地址通常是smtp.qq.com。这个地址适用于所有使用QQ邮箱发送邮件的客户端。 QQ邮箱SMTP端口设置 QQ邮箱提供了两种加密方式：SSL和STARTTLS。根据您选…...

编程日记 2025/9/20 0:55:59

快速入门机器学习的专有名词

机器学习（Machine Learning） 机器学习是计算机科学的一个领域，目的在于让计算机能够通过学习数据来做出预测或决策，而无需被明确编程来完成任务。机器学习的工作模式： 数据：机器学习需要数据来“学习”…...

编程日记 2025/9/17 5:01:48

C#学习教程（附电子书资料）

概述 C#（读作"C Sharp"）是一种由微软开发的现代编程语言，结合了C的高效性和Java的简洁性，专为.NET框架设计。以下是其核心特性和应用领域的详细介绍电子书资料：https://pan.quark.cn/s/6fe772420f95 一、语…...

编程日记 2025/7/7 3:20:03

Python之三大基本库——Matplotlib

好久没来总结了，今天刚好有时间，我们来继续总结一下python中的matplotlib 一、什么是Matplotlib ‌Matplotlib‌是一个Python的2D绘图库，主要用于将数据绘制成各种图表，如折线图、柱状图、散点图、直方图、饼图等。它以各种硬拷贝…...

编程日记 2025/9/16 18:39:32

Tensorflow 2.X Debug中的Tensor.numpy问题 @tf.function

我在调试YOLOv3模型过程中想查看get_pred函数下面的get_anchors_and_decode函数里grid_shape的数值 #---------------------------------------------------# # 将预测值的每个特征层调成真实值 #---------------------------------------------------# def get_anchors_a…...

编程日记 2025/9/18 9:16:40

element基于表头返回 merge: true 配置列合并

<template><div class"wrap" v-loading"listLoading"><div class"content_wrap mt-10"><div style"text-align: center;"><h3>酿造交酒酒罐统计表（{{month}}月{{day}}日）</h3…...

编程日记 2025/9/17 0:09:41

sql sql复习

虽然之前学习过sql，但由于重在赶学习进度，没有学扎实，导致自己刷题的时候有的地方还是模模糊糊，现在主要是复习，补一补知识点。今日靶场： NSSCTF 云曦历年考核题在做题之前先回顾一下sql注入的原理&…...

编程日记 2025/9/16 18:46:41

MySQL 8.0 OCP 1Z0-908 题目解析(1)

题目001 Choose two. User fwuserlocalhost is registered with the SQL Enterprise Firewall and has been granted privileges for the sakila database. Examine these commands that you executed and the results: mysql> SELECT MODE FROM INFORMATION_SCHEMA.SQL…...

编程日记 2025/8/9 14:50:20