标准文档流解析及 CSS 中的相关特性
目录
非 VIP 用户可前往公众号回复“css”进行免费阅读
标准文档流特点
空白折叠现象
高矮不齐、底边对齐
自动换行，一行写不满，换行写
标准文档流中的元素等级
HTML 与 CSS 中的标签分类总结
块级元素和行内元素的相互转换
块级转行内
行内转块级
display
非 VIP 用户可前往公众号回复“css”进行免费阅读
标准文档流特点
空白折叠现象
在网页的标准文档流中，当我们在 HTML 代码里放置多个<img>标签时，常常会发现这些图像之间存在着空隙。
示例代码如下：
<body>
<img src="img/html.jpg"/>
<img src="img/css.jpg"/>
<img src="img/xcx.jpg"/>
</body> 运行结果：
分析：运行这段代码后，我们可以看到，尽管没有在图像标签之间特意添加任何空白字符，但图像之间仍然会出现一定的空隙。这是由于标准文档流的特性以及浏览器的默认渲染方式所导致的。这种空隙可能会影响到网页的布局和设计，尤其是当我们期望图像紧密排列时。为了消除这些空隙，可以采用一些特定的方法，比如将图像标签紧密连接，示例代码如下：
<body>
<img src="img/html.jpg"/><img src="img/css.jpg"/><img src="img/xcx.jpg"/>
</body> 运行结果：
或者通过 CSS 样式进行调整。
高矮不齐、底边对齐
在标准文档流中，图片往往会呈现高矮不齐且底边对齐的状态。这是由于不同图片的尺寸和比例各不相同，导致在页面布局中出现这种视觉效果。
示例代码如下：
<body>
<p>
<span>----------高矮不齐，底边对齐。----------</span>
<img src="img/html.jpg"/>
<img src="img/css.jpg"/>
</p>
</body> 运行结果：
自动换行，一行写不满，换行写
在标准文档流中，如果一行的空间不足以容纳所有元素，会自动进行换行。例如，当页面上有多个元素且一行无法完全显示时，会自动换到下一行继续排列，以适应页面的布局需求。这种自动
相关文章：
标准文档流解析及 CSS 中的相关特性
目录 非 VIP 用户可前往公众号回复“css”进行免费阅读 标准文档流特点 空白折叠现象 高矮不齐、底边对齐 自动换行，一行写不满，换行写 标准文档流中的元素等级 HTML 与 CSS 中的标签分类总结 块级元素和行内元素的相互转换 块级转行内 行内转块级 display 非 VIP…...
水下攻防面试题
水下攻防面试题通常涉及对水下环境的理解、水下安全操作、水下技术应用以及攻防策略等多个方面。由于具体的面试题可能因组织、职位和目的的不同而有所差异，以下是一些可能出现在水下攻防面试中的典型问题及其参考答案框架： 一、基础概念与理解 什么是水下攻防？ 水下攻防是…...
vmware 虚拟机多屏幕或添加屏幕
vmware 虚拟机多屏幕或添加屏幕 前置条件 vmware 安装 vmware tools 虚拟机系统支持多屏幕 物理上有至少两个屏幕，就是物理机上接至少一个屏幕 方法 虚拟机上点设置，需要在虚拟机关机时进行 ctrl alt enter 让当前虚拟机全屏 鼠标移动到屏幕虚拟机…...
鹏哥C语言49-51---第6次作业：循环语句 for 和 while
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> //-----------------------------------------------------------------------------------------------第六次作业：for循环等 //--------------------------------------------------------------------…...
springboot中药材进存销管理系统
基于springbootvue实现的中药材进存销管理系统 （源码L文ppt）4-079 4 系统总体设计 4.1系统功能结构设计图 根据需求说明设计系统各功能模块。采用模块化设计方法实现一个复杂结构进行简化，分成一个个小的容易解决的板块，然…...
GitHub上图像超分开源项目推荐【持续更新】
SRCNN 介绍：SRCNN（Super-Resolution Convolutional Neural Network）是一种用于图像超分辨率的卷积神经网络。它由Dong等人在2014年提出，是早期的深度学习方法之一，用于提高图像的分辨率。SRCNN通过学习低分辨率&#…...
浅谈软件测试的基础知识（1）
文章目录 一、什么是测试1.1、生活中的测试案例1.2、为什么需要进行软件测试 二、测试和开发的区别2.1、调试和测试的区别 四、测试人员需具备哪些素质五、软件的生命周期六、软件测试的生命周期七、设计测试用例的方法[!]7.1、什么是测试用例7.2、测试用例作用 八、走测试岗位…...
Mac 上哪个剪切板增强工具比较好用? 好用剪切板工具推荐
在日常文字编辑中，我们经常需要重复使用复制的内容。然而，新内容一旦复制，旧内容就会被覆盖。因此，选择一款易用高效的剪贴板工具成为了许多人的需求。本文整理了一些适用于 macOS 系统的优秀剪贴板增强工具，欢迎大家下…...
基于opencv的车牌检测和识别系统(代码+教程)
车牌检测与识别技术详解 车牌检测和识别（License Plate Recognition, LPR）是一项重要的计算机视觉任务，它在交通管理、安全监控以及智能门禁系统等多个领域都有着广泛的应用。随着深度学习技术的发展，LPR系统的准确性和鲁棒性得到…...
list(二) （list模拟实现）
首先进行大框架 先写基本的结点类 有data next prev template<class T>class ListNode//或者使用struct 就不用在写public声明公有{public://这里不仅仅是成员函数 成员变量也要公有化 ListNode<T>* _next;ListNode<T>* _prev;T _data;}之后是链表list类…...
[Linux]从零开始的泰山派系统安装与远程教程
一、前言 泰山派买回来也有一阵子了，最近慢慢开始研究。当然，学习这种Linux的开发板的第一步就是安装系统，对于RK系列的芯片系统安装有专门的软件，所有在系统安装方面比较简单。更多的还是我们应该怎么去编译系统，这一…...
Python国产新 ORM 框架 fastzdp_sqlmodel 快速入门教程
创建模型 from typing import Optional from sqlmodel import Field, SQLModel import fastzdp_sqlmodel as fasmclass Hero(SQLModel, tableTrue):id: Optional[int] Field(defaultNone, primary_keyTrue)name: strsecret_name: strage: Optional[int] None创建表 from ty…...
面试速通宝典——3
51. 野指针和内存泄漏是什么？如何避免？ 内存泄漏：是指程序中以动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。 避免&…...
每天一个数据分析题（四百七十三）- 元数据
下列哪些元素属于元数据内容？ （） A. 名称 B. 长度 C. 类型 D. 取值范围 数据分析认证考试介绍：点击进入 题目来源于CDA模拟题库 点击此处获取答案 数据分析专项练习题库 内容涵盖Python，SQL，统计学…...
产品经理面试整理-练习常见面试问题
练习常见面试问题是准备产品经理面试的重要环节。掌握这些问题的回答思路，不仅能帮助你在面试中更加自信，还能展示你对产品管理的深入理解。以下是一些常见的产品经理面试问题，以及如何高效准备这些问题的指南。 1. 常见面试问题及回答思路 1.1 你如何定义产品成功？ ●...
一步到位的智慧：BI可视化大屏在复杂环境中如何精准拾取目标
在可视化设计器中实现良好的组件拾取功能，是提升用户体验和设计效率的关键。它们不仅能够提升用户体验和操作效率，还能够增强设计的灵活性和精度，促进设计创新，并最终提升设计的质量和价值。因此，在可视化设计过程中&a…...
前端开发迎来新机会，全栈转型就靠这个！
在如今的开发世界，全栈开发者已成为许多前端开发者的新目标。随着技术的不断演进，前端不再局限于写页面和样式，而是逐渐向后端延伸，甚至触及数据库和云服务。如果你想在职业道路上更进一步，向全栈开发者靠拢࿰…...
关于less的基本使用
1、介绍及概述 1.1、解释 less 是方便开发人员书写CSS的一门预处理语言。浏览器只认识html /css /js格式的文件，所以直接引入.less文件，没有任何的效果，需要把less文件转换成css文件 1.2、概述 CSS弊端： 没有逻辑性、变量、函…...
python 将 aac 转为 mp3，保持原有目录结构
需要提前安装 FFmpeg import os import subprocess import time from concurrent.futures import ThreadPoolExecutor, as_completeddef convert_file(input_path, output_path):command [ffmpeg,-y, # 自动覆盖现有文件-i, input_path,-acodec, libmp3lame,-b:a, 192k,outpu…...
考研数据结构——C语言实现折半查找
首先定义了一个有序数组a，然后计算出数组的长度n。接着定义了一个要查找的元素x，值为79。binarySearch函数实现了二分查找算法，它接受数组、左右边界和目标值作为参数，通过不断缩小搜索范围来查找目标值。如果找到了目标值&#x…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...