CSS|07 标准文档流

ops/2024/12/20 1:41:49/

标准文档流

一、什么是标准文档流

在制作的 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">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">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">css">span{font-size: 36px;}</style>
</head>
<body>人人人人人人人人人<span>姚明</span>人人人人人人人人人人人人<img src="../img/IMG_0425.JPG">
</body>
</html>

在这里插入图片描述


http://www.ppmy.cn/ops/143343.html

相关文章

C/C++圣诞树

系列文章 序号直达链接1C/C爱心代码2C/C跳动的爱心3C/C李峋同款跳动的爱心代码4C/C满屏飘字表白代码5C/C大雪纷飞代码6C/C烟花代码7C/C黑客帝国同款字母雨8C/C樱花树代码9C/C奥特曼代码10C/C精美圣诞树11C/C俄罗斯方块12C/C贪吃蛇13C/C孤单又灿烂的神-鬼怪14C/C闪烁的爱心15C…

word中写论文的一些trick

文章目录 加图注使用latex|matjax语法打公式给公式加上编号引用文献 加图注 这样就给图片插入图注 使用latex|matjax语法打公式 按下alt 会出现下面的情景 在右上角选择专业 然后就可以在里面打入latex或mathjax了&#xff0c;不过这个没有预览功能&#xff0c;可以在别的…

Vue3 获取当前组件实例

在 Vue 3 中&#xff0c;getCurrentInstance 是一个用于获取当前组件实例的重要函数。以下是对getCurrentInstance 的详细分析&#xff1a; 基本概念 定义&#xff1a;getCurrentInstance 是 Vue 3 提供的一个函数&#xff0c;用于获取当前正在执行的 Vue 组件实例的上下文信息…

强化学习Q-learning及其在机器人路径规划系统中的应用研究,matlab代码

一、Q-learning 算法概述 Q-learning 是一种无模型的强化学习算法&#xff0c;它允许智能体&#xff08;agent&#xff09;在没有环境模型的情况下通过与环境的交互来学习最优策略。Q-learning的核心是学习一个动作价值函数&#xff08;Q-function&#xff09;&#xff0c;该函…

ip_done

文章目录 路由结论 IP分片 数据链路层重谈Mac地址MAC帧报头局域网的通信原理MSS&#xff0c;以及MAC帧对上层的影响ARP协议 1.公司是不是这样呢? 类似的要给运营商交钱&#xff0c;构建公司的子网&#xff0c;具有公司级别的入口路由器 2&#xff0e;为什么要这样呢?? IP地…

碰一碰发视频 + 智能文案生成全解析,支持OEM

一、引言 在数字化营销的汹涌浪潮中&#xff0c;新颖且高效的推广策略不断迭代涌现。“碰一碰发视频” 结合 “点评打卡、种草文案一键生成” 的创新模式&#xff0c;宛如一颗璀璨的营销新星&#xff0c;正以燎原之势重塑商家与消费者的互动生态&#xff0c;为品牌传播及用户引…

【工具】使用 Gin 集成 pprof 进行性能调优

使用 Gin 集成 pprof 进行性能调优 一、pprof 简介 pprof 表示性能分析器&#xff08;Performance Profiler&#xff09;&#xff0c;其概念和初始实现来源于Google内部的性能分析需求。pprof 在程序运行期间&#xff0c;定期对应用的状态数据进行采样&#xff0c;每次采样都…

vue 响应式数据原理

发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【宝藏入口】。 Vue 的响应式数据原理是其核心功能之一&#xff0c;它使得 Vue 应用能够自动响应数据的变化&#xff0c;并在数据变化时自动更新…