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

CSS|07 标准文档流

news 来源：原创 2025/6/15 20:37:53

标准文档流

一、什么是标准文档流

在制作的 HTML 网页和 PS 画图软件画图时有本质上面的区别:
HTML 网页在制作的时候都得遵循一个“流的规则:从左至右、从上至下。
使用 Ps 软件画图时可以在任意地方画图。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标准文档流</title><style type="text/css"></style>
</head>
<body><p>黑马程序员</p><h2>看看我在哪里</h2>
</body>
</html>

在这里插入图片描述

二、标准文档流注意事项

1.空白折叠现象
消除空白：让这些元素放在同一行，使这些元素紧密相连。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空白折叠现象</title><style type="text/css"></style>
</head>
<body><!-- 空白现象 -->文本
<!--     <img src="../img/IMG_0425.JPG"><img src="../img/IMG_0425.JPG"> --> <!-- 没有空白现象 --><img src="../img/IMG_0425.JPG"><img src="../img/IMG_0425.JPG">
</body>
</html>

在这里插入图片描述

2.高矮不齐，底部对齐


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>高矮不齐，底部对齐</title><style type="text/css">span{font-size: 36px;}</style>
</head>
<body>人人人人人人人人人<span>姚明</span>人人人人人人人人人人人人<img src="../img/IMG_0425.JPG">
</body>
</html>

在这里插入图片描述

相关文章：

CSS|07 标准文档流

标准文档流 一、什么是标准文档流 在制作的 HTML 网页和 PS 画图软件画图时有本质上面的区别: HTML 网页在制作的时候都得遵循一个“流的规则:从左至右、从上至下。 使用 Ps 软件画图时可以在任意地方画图。 <!DOCTYPE html> <html lang"en"> <hea…...

编程日记 2025/6/1 19:47:44

1 JVM JDK JRE之间的区别以及使用字节码的好处

JDK jdk是编译java源文件成class文件的&#xff0c;我们使用javac命令把java源文件编译成class文件。 我们在java安装的目录下找到bin文件夹&#xff0c;如下图所示: 遵循着编译原理&#xff0c;把java源文件编译成JVM可识别的机器码。 其中还包括jar打包工具等。主要是针对…...

编程日记 2025/6/2 1:25:54

ubuntu安装8812au驱动却无法加载网卡的问题

驱动GIT地址 https://github.com/aircrack-ng/rtl8812au按照里面提示安装驱动 输入 sudo dkms status查看驱动是否安装成功 接入网卡&#xff0c;看看ifconfig能否输出网卡 如果不行 使用sudo dmesg -w插拔网卡看看输出 如果输出为: load module with unavailable key is …...

编程日记 2025/5/31 2:07:44

Eureka学习笔记-服务端

Eureka学习笔记 服务端 模块设计 Resources &#xff1a;这部分对外暴露了一系列的 Restful 接口。Eureka Client 的注册、心跳、获取服务列表等操作都需要调用这些接口。另外&#xff0c;其他的 Server 在同步 Registry 时也需要调用这些接口。Controller &#xff1a;这里提…...

编程日记 2025/6/4 6:44:04

LangChain

文章目录 一、LangChain 是什么&#xff1f;二、核心概念1. LLM Wrappers2. Prompt Templates3. Indexes4. Chains5. Agents 三、工作流程四、应用场景示例一&#xff1a;简单的语言模型调用示例二&#xff1a;使用Prompt Templates&#xff08;提示模板&#xff09;示例三&…...

编程日记 2025/6/1 5:12:00

搭建分布式Hive集群

title: 搭建分布式Hive集群 date: 2024-11-29 23:39:00 categories: - 服务器 tags: - Hive - 大数据搭建分布式Hive集群 本次实验环境&#xff1a;Centos 7-2009、Hadoop-3.1.4、JDK 8、Zookeeper-3.6.3、Mysql-5.7.38、Hive-3.1.2 功能规划 方案一&#xff08;本地运行模…...

编程日记 2025/5/30 17:09:32

Scala的惰性求值：深入理解与实践

在编程中&#xff0c;我们经常需要处理那些计算成本高昂或者可能永远不会用到的值。在这种情况下&#xff0c;惰性求值&#xff08;Lazy Evaluation&#xff09;是一种非常有用的策略。它允许我们推迟计算&#xff0c;直到这些值真正需要被使用。Scala&#xff0c;作为一种多功…...

编程日记 2025/6/2 3:03:53

游戏引擎学习第54天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 我们现在正专注于在游戏世界中放置小实体来代表所有的墙。这些实体围绕着世界的每个边缘。我们有活跃的实体&#xff0c;这些实体位于玩家的视野中&#xff0c;频繁更新&#xff0c;而那些离玩家较远的实体则以较低的频率运…...

编程日记 2025/5/29 11:40:34

QT绘制同心扇形

void ChartForm::paintEvent(QPaintEvent *) {QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);// 设置抗锯齿painter.save();// 设置无边框&#xff08;不需要设置QPen&#xff0c;因为默认是不绘制边框的&#xff09;QPen pen(Qt::NoPen);// QPen pen…...

编程日记 2025/6/1 21:24:17

梳理你的思路(从OOP到架构设计)_浅尝架构师的滋味02

目录 1、 App开发者的职责&#xff1a;买主提供需求知识&#xff0c;App开发者帮他写代码 撰写的代码 撰写代码&#xff0c;将装配(扩充)到 2、 从生活中体会 基於軟硬整合觀點“两种知识” ​编辑 1、 App开发者的职责&#xff1a;买主提供需求知识&#xff0c;App开发者帮…...

编程日记 2025/6/1 21:12:32

使用VLC 搭建 RTSP 服务器

第一步&#xff1a;打开 VLC &#xff0c;媒体--->流 第二步&#xff1a;添加一个选择本地的文件&#xff0c;然后点击选择"串流" 第三步&#xff1a;确认你选择的文件&#xff0c;然后点击下一个 第四步&#xff1a; 配置 选择的视频文件使用哪种 流输出&#xf…...

编程日记 2025/6/3 7:16:25

什么是大型语言模型

大型语言模型简介 大型语言模型 (LLM) 是一种深度学习算法&#xff0c;可以使用非常大的数据集识别、总结、翻译、预测和生成内容。 NVIDIA 开发者计划 想要了解有关 NIM 的更多信息&#xff1f;加入 NVIDIA 开发者计划&#xff0c;即可免费访问任何基础设施云、数据中心或个…...

编程日记 2025/6/2 3:32:31

游卡，科锐国际，蓝禾，汤臣倍健，顺丰，途游游戏25秋招内推

游卡&#xff0c;科锐国际&#xff0c;蓝禾&#xff0c;汤臣倍健&#xff0c;顺丰&#xff0c;途游游戏25秋招内推 ①科锐国际25届秋招补录 人力资源类岗位&#xff0c;补录城市&#xff1a;上海&#xff0c;苏州&#xff0c;锦州&#xff1b;全日制公办本科及以上 25届应届毕业…...

编程日记 2025/6/1 20:20:18

Linux -- 线程控制相关的函数

目录 pthread_create -- 创建线程 参数 返回值 代码 -- 不传 args&#xff1a; 编译时带 -lpthread 运行结果 为什么输出混杂&#xff1f; 如何证明两个线程属于同一个进程&#xff1f; 如何证明是两个执行流&#xff1f; 什么是LWP&#xff1f; 代码 -- 传 args&a…...

编程日记 2025/6/2 5:33:25

【Linux】Linux内核启动流程分析

Linux 内核的启动流程要比 uboot 复杂的多&#xff0c;涉及到的内容也更多&#xff0c;因此我们大致的了解一下Linux 内核的启动流程即可。 Linux启动流程 启动过程可以分为以下几个主要步骤&#xff1a; 1.引导加载程序&#xff08;Bootloader&#xff09;阶段 Linux 内核的…...

编程日记 2025/6/1 20:27:57

【uniapp蓝牙】基于native.js链接ble和非ble蓝牙

【uniapp蓝牙】基于native.js链接ble和非ble蓝牙 uniapp不是仅支持低功耗蓝牙&#xff08;基础蓝牙通讯不支持&#xff09;&#xff0c;有些可能需要基础蓝牙。我现在同步我的手机蓝牙列表低功耗&#xff0c;基础蓝牙都支持 /*** author wzj* 通用蓝牙模块封装* 搜索 ble 和非…...

编程日记 2025/6/3 15:37:31

OpenGL ES 03 加载3张图片并做混合处理

OpenGL ES 02 加载3张图片并做混合处理 什么是纹理单元纹理单元的作用使用纹理单元的步骤详细解释加载图片并绑定到到GPU纹理单元采样器的设置1.设置采样器变量的纹理单元编号&#xff0c;目的是为了告诉纹理采样器&#xff0c;从哪个纹理单元采集数据2.如果你没有显式地设置采…...

编程日记 2025/6/4 10:53:08

c++数据结构算法复习基础--13--基数算法

基数排序 - 桶排序 时间复杂度 O(n*d) – d为数据的长度 每次比较一位&#xff08;个位、十位。。。&#xff09;&#xff0c;所以取值范围就为0-9。 根据该特点&#xff0c;设计桶的概念 – 0号桶、1号桶… 1、思想 1&#xff09;找出最长的数字&#xff0c;确定要处理的…...

编程日记 2025/6/2 17:17:29

基于YOLOv5的行人与帽子检测与识别说明文档

基于YOLOv5的行人与帽子检测与识别说明文档 1. 任务的内容和目标 1.1 任务目标 在计算机视觉领域&#xff0c;头盔检测至关重要&#xff0c;主要用于判定图像或视频里的人是否佩戴头盔。于工业生产、建筑工地、交通出行&#xff08;如摩托车与自行车骑行&#xff09;等高危场…...

编程日记 2025/6/1 20:54:01

Mybatis——（2）

2.2 Mybatis 工具类&#xff08;了解&#xff09; 为了简化MyBatis的开发&#xff0c;可将MyBatis进一步封装。 import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.apa…...

编程日记 2025/6/3 20:20:12

QT笔记- QSystemTrayIcon系统托盘功能完整示例

1. 创建托盘对象 // 创建托盘图标QSystemTrayIcon * trayIcon new QSystemTrayIcon(this);QIcon icon("://icon/test.png");trayIcon->setIcon(icon);trayIcon->show();trayIcon->connect(trayIcon, &QSystemTrayIcon::activated,this, &MainWindo…...

编程日记 2025/6/3 15:01:18

ElasticSearch08-分析器详解

零、文章目录 ElasticSearch08-分析器详解 1、分析器原理 Elasticsearch的分词器&#xff08;Analyzer&#xff09;是全文搜索的核心组件&#xff0c;它负责将文本转换为一系列单词&#xff08;term/token&#xff09;的过程&#xff0c;也叫分词。 &#xff08;1&#xff…...

编程日记 2025/6/2 11:02:16

指针的深入讲解

本章重点&#xff1a; 字符指针数组指针指针数组数组传参和指针传参函数指针函数指针数组指向函数指针数组的指针回调函数 我们在指针的初阶的时候主要讲了&#xff1a; 1.指针就是变量&#xff0c;用来存放地址&#xff0c;地址唯一标识一块内存空间 2.指针的大小是固定4个…...

编程日记 2025/6/1 22:40:43

王佩丰24节Excel学习笔记——第十二讲：match + index

【以 Excel2010 系列学习&#xff0c;用 Office LTSC 专业增强版 2021 实践】 【本章小技巧】 vlookup与match&#xff0c;index 相结合使用match,index 结合&#xff0c;快速取得引用的值扩展功能&#xff0c;使用match/index函数&#xff0c;结合照相机工具获取照片 一、回顾…...

编程日记 2025/6/3 5:38:50

概率论得学习和整理28：用EXCEL画折线图，X轴数据也被当成曲线的解决办法

目录 1 折线图和散点图&#xff0c;对数据的处理差别 1.1 EXCEL画图的一些默认设置 1.2 多于2列的数据&#xff0c;也是如此 2 如果我们非要以第1列数据为X轴&#xff0c;做一个折线图呢&#xff1f;也能 2.1 首先&#xff0c;把第1列&#xff0c;想当成X轴的数据&#xf…...

编程日记 2025/6/3 1:05:21

387. 字符串中的第一个唯一字符

1&#xff0c;题目 给定一个字符串 s &#xff0c;找到 它的第一个不重复的字符&#xff0c;并返回它的索引 。如果不存在&#xff0c;则返回 -1 。 2&#xff0c;代码 class Solution { public:int firstUniqChar(string s) {//记数排序int coutArr[26] {0};//统计字符出现…...

编程日记 2025/6/1 22:52:25

Oracle RAC最佳实践-优化私网连接

在 Oracle RAC 环境中&#xff0c;私网&#xff08;Interconnect&#xff09; 是节点之间通信和数据传输的关键部分。一直有个误解&#xff0c;认为私网&#xff08;心跳网&#xff09;只要能通随便什么交换机都可以,甚至有直连的&#xff0c;实际上私网的性能至关重要&#xf…...

编程日记 2025/6/4 7:37:31

[bug] StarRocks borker load意向之外的bug

意向之外&#xff0c;又清理之中 背景&#xff1a; StarRocks各方面碾压相同类型的数据库&#xff0c;最近我们要从生成HIVE导历史数据&#xff08;ORC格式&#xff09;到StarRocks&#xff0c;前期小测一下&#xff0c;在测试是没问题&#xff0c;上生产先导2个月的数据&…...

编程日记 2025/6/1 23:12:25

游戏AI实现-寻路算法（Dijkstra）

戴克斯特拉算法&#xff08;英语&#xff1a;Dijkstras algorithm&#xff09;&#xff0c;又称迪杰斯特拉算法、Dijkstra算法&#xff0c;是由荷兰计算机科学家艾兹赫尔戴克斯特拉在1956年发现的算法。 算法过程&#xff1a; 1.首先设置开始节点的成本值为0&#xff0c;并将…...

编程日记 2025/6/1 18:23:54

9 OOM和JVM退出。OOM后JVM一定会退出吗？

首先我们把两个概念讲清楚 OOM是线程在申请堆内存&#xff0c;发现堆内存空间不足时候抛出的异常。 JVM退出的条件如下&#xff1a; java虚拟机在没有守护线程的时候会退出。守护线程是启动JVM的线程&#xff0c;服务于用户线程。 我们简单说下守护线程的功能: 1.日志的记录…...

编程日记 2025/6/4 14:42:31

Linux 端口操作

安装netstat yum -y install net-tools 检测端口占用 netstat -npl | grep "端口" 安装lsof lsof yum -y install lsof 检测端口占用 lsof -i :端口号 安装nc yum -y install nc 查看对方端口是否开放 nc -vz 对方ip 对方端口 安装telnet telnet yum -y in…...

编程日记 2025/6/2 10:30:13

【USB-HID】“自动化键盘“ - 模拟键盘输入

目录 【USB-HID】"自动化键盘" - 模拟键盘输入1. 前言2. 模拟键盘2.1 STM32CubeMX 配置2.2 修改代码配置2.3 发送按键信息 3. 接收主机Setup数据3.1 获取PC下发的数据 4. 总结 【USB-HID】“自动化键盘” - 模拟键盘输入 1. 前言 对于模拟键盘的实现&#xff0c;网…...

编程日记 2025/6/4 12:19:35

基于Spring Boot+Vue 的高校运动会管理系统

目录 1 绪论1.1研究背景1.2 研究意义1.3 相关开发技术简介1.3.1 Vue.js1.3.2 Spring Boot1.3.3 MySQL 2 系统分析2.1 需求分析2.1.1 功能需求2.1.2 非功能需求 2.2 系统可行性分析2.2.1 经济可行性2.2.2 技术可行性2.2.3 操作可行性 3 系统概要设计系统功能描述业务流程分析 4 …...

编程日记 2025/6/4 1:52:58

Linux应用程序中终止进程的几种方法

目录 1、正常退出进程的方法 1.1、exit(int status) 函数 1.2、_exit(int status) 函数 1.3、_Exit(int status) 函数 2、异常退出进程的方法 3、何时使用这些方法&#xff1f; 在 Linux 应用程序中&#xff0c;终止进程的方式有多种&#xff0c;通常取决于进程是否需要进…...

编程日记 2025/6/1 10:33:14

电脑文档损坏：原因剖析和修复方法

在使用电脑的过程中&#xff0c;许多用户可能会遇到文档突然提示损坏、无法打开的情况。这种情况的发生往往让人感到困惑&#xff0c;特别是当并未进行任何明显错误操作时。以下是一些常见的原因以及应对方法。 一、文档损坏的常见原因 1、非人为的异常操作&#xff1a; 在编…...

编程日记 2025/6/4 1:52:37

了解ARM的千兆以太网——RK3588

1. 简介 本文并不重点讲解调试内容&#xff0c;重点了解以太网在ARM设计中的框架以及在设备树以及驱动的一个整体框架。了解作为一个驱动开发人员当拿到一款未开发过的ARM板卡应该怎么去把网卡配置使用起来。 2. 基础知识介绍 在嵌入式ARM中实现以太网的解决方案通常有以下两种…...

编程日记 2025/6/3 17:03:31

【Nginx-4】Nginx负载均衡策略详解

在现代Web应用中&#xff0c;随着用户访问量的增加&#xff0c;单台服务器往往难以承受巨大的流量压力。为了解决这一问题&#xff0c;负载均衡技术应运而生。Nginx作为一款高性能的Web服务器和反向代理服务器&#xff0c;提供了多种负载均衡策略&#xff0c;能够有效地将请求分…...

编程日记 2025/6/2 11:01:53

低级计算机网络知识总结

1 应用层 1.1 HTTP(TCP) 浏览器访问WWW服务器过程&#xff1a;首先进行域名解析&#xff0c;然后通过TCP向服务器发送连接请求 HTTP本身是无连接&#xff0c;无状态的。无状态特性使服务器能够支持大量的并发HTTP请求。实际应用中&#xff0c;通常使用Cookie加数据库跟踪用户…...

编程日记 2025/6/2 11:01:49

linux sysrq的使用举例

在menuconfig中选择m和 *的区别&#xff1a; *: 模块驱动编译到内核中&#xff0c;启动时自动加载 M:标识作为内核模块编译 空格:表示该功能不编译到内核中&#xff0c;即新的内核将不支持该功能。 m&#xff1a;模块会被编译&#xff0c;但是不会被编译到内核中&#xff0c;只…...

编程日记 2025/6/1 5:02:47

数字IC后端设计实现篇之TSMC 12nm TCD cell（Dummy TCD Cell）应该怎么加？

TSMC 12nm A72项目我们需要按照foundary的要求提前在floorplan阶段加好TCD Cell。这个cell是用来做工艺校准的。这个dummy TCD Cell也可以等后续Calibre 插dummy自动插。但咱们项目要求提前在floorplan阶段就先预先规划好位置。 TSCM12nm 1P9M的metal stack结构图如下图所示。…...

编程日记 2025/5/31 15:52:30

Oracle 适配 OpenGauss 数据库差异语法汇总

背景 国产化进程中&#xff0c;需要将某项目的数据库从 Oracle 转为 OpenGauss &#xff0c;项目初期也是规划了适配不同数据库的&#xff0c;MyBatis 配置加载路径设计的是根据数据库类型加载指定文件夹的 xml 文件。 后面由于固定了数据库类型为 Oracle 后&#xff0c;只写…...

编程日记 2025/6/4 14:12:33

【记录】Django解决与VUE跨域问题

1 梗概 这里记录Django与VUE的跨域问题解决方法&#xff0c;主要修改内容是在 Django 中。当然其他的前端项目 Django 也可以这样处理。 2 安装辅助包 pip install django-cors-headers3 配置 settings.py INSTALLED_APPS [ # ... corsheaders, # ... ] 为了响应…...

编程日记 2025/6/2 3:18:35

Yolov10本地部署,torch找不到GPU问题解决

在本地部署跑Yolov10的模型.具体分为以下几步,也是踩了一些坑: 1.YoloV10 代码拉取 2.安装CUDA 1.查看CUDA支持版本 2.下载安装CUDA 3.下载CUDNN 3.创建python虚拟环境 Anaconda下载安装 虚拟环境安装配置 4.运行 1.yoloV10代码拉取 源码地址: GitHub - THU-MIG/yolov10: YOLO…...

编程日记 2025/6/3 6:37:48

el-upload 上传文件 入参格式为form-data格式，入参字段为code、name、type、file(文件)的形式，如何实现？

el-upload 是 Element UI 中用于文件上传的组件。如果你需要上传文件并将其封装为 form-data 格式&#xff0c;并且包含字段如 code、name、type 和 file&#xff0c;你可以通过自定义 before-upload 或 action 进行处理。 1. el-upload 的基本用法 Element UI 的 el-upload …...

编程日记 2025/6/2 3:27:04

VUE组件插槽使用示例，弹窗样式

在Vue.js中&#xff0c;插槽&#xff08;slots&#xff09;是一种非常强大的功能&#xff0c;它允许你在父组件中向子组件传递内容。插槽主要有三种类型&#xff1a;默认插槽、具名插槽和作用域插槽。下面是一些示例来展示如何使用这些插槽。 默认插槽 默认插槽是最简单的插槽…...

编程日记 2025/5/31 16:21:15

ARM嵌入式学习--第八天（PWM）

PWM -PWM介绍 PWM&#xff08;pulse Width Modulation&#xff09;简称脉宽调制&#xff0c;是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术&#xff0c;广泛应用在测量&#xff0c;通信&#xff0c;工控等方面 PWM的频率 是指在1秒钟内&#xff0c;信号从…...

编程日记 2025/6/4 8:19:36

新能源汽车大屏可视化第三次数据存储

任务&#xff1a; 将数据存放到temp.csv 链接&#xff1a; 1.排行页面 https://www.dongchedi.com/sales 2.参数页面 https://www.dongchedi.com/auto/params-carIds-x-9824 完善打印&#xff1a; 1. [{‘series_id’: 5952, ‘series_name’: ‘海鸥’, ‘image’: ‘https://…...

编程日记 2025/6/3 7:27:20

linux 替换yum源镜像

1. 备份源镜像 sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2. 下载国内镜像阿里云 如果没有wget可以用curl 代替 sudo wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 清华大学 sudo wget -…...

编程日记 2025/6/1 1:31:18

SAP:如何修改已释放的请求

SAP:如何修改已释放的请求 QQ出了一个新功能&#xff0c;把10年前的旧日志推给自己。这个10年前的日志&#xff0c;是用户反映在SE10中把请求释放后发现漏了内容&#xff0c;想修改已释放的请求。经调查写了一个小程序&#xff0c;实现用户的需求。 *&-------------------…...

编程日记 2025/6/2 10:08:01

js的?. 和??和||有什么区别

let a 0; let b null; let c Hello;console.log(a ?? default); // 0 console.log(b ?? default); // "default" console.log(c ?? default); // "Hello"console.log(a || default); // "default" (因为 0 是假值) console.log(b |…...

编程日记 2025/6/2 3:29:49