HTML块级元素和内联元素(简单易懂)

在HTML中,元素可以分为块级元素(Block-level elements)和内联元素(Inline elements)。这两类元素在页面布局和样式应用上有不同的特点和用途。

一、块级元素(Block-level elements)

1. 定义

块级元素在页面上以块的形式显示,通常会独占一行,其宽度默认为父容器的宽度。

2. 特点
  • 独占一行:块级元素会在新行开始,并且其后的元素也会在新行开始。
  • 宽度和高度:可以设置宽度(width)和高度(height)。
  • 内边距和外边距:可以设置内边距(padding)和外边距(margin)。
3. 常见的块级元素
  • <div>:通用的块级容器,用于布局。
  • <p>:段落。
  • <h1><h6>:标题。
  • <ul><ol><li>:列表。
  • <table>:表格。
  • <form>:表单。
4. 示例
<div style="background-color: lightblue; padding: 20px;"><h1 style="color: blue;">欢迎来到我的网站</h1><p style="color: green;">这是一个段落文字。</p>
</div>

二、内联元素(Inline elements)

1. 定义

内联元素在页面上以行内形式显示,不会独占一行,其宽度由内容决定。

2. 特点
  • 行内显示:内联元素不会独占一行,与前后元素在同一行显示。
  • 宽度和高度:宽度由内容决定,不能直接设置宽度和高度。
  • 内边距和外边距:可以设置垂直方向的内边距(padding-toppadding-bottom)和外边距(margin-topmargin-bottom),但水平方向的内边距和外边距可能不会按预期工作。
3. 常见的内联元素
  • <span>:通用的内联容器,用于样式控制。
  • <a>:超链接。
  • <img>:图像。
  • <strong>:加粗文本。
  • <em>:强调文本。
  • <input>:表单输入框。
4. 示例
<p>这是一个<a href="https://www.example.com" style="color: red;">链接</a>示例。</p>
<span style="background-color: yellow;">这是一个内联元素。</span>

三、块级元素与内联元素的转换

1. 使用CSS控制显示方式

可以通过CSS的display属性来改变元素的显示方式。

  • display: block;:将内联元素转换为块级元素。
  • display: inline;:将块级元素转换为内联元素。
  • display: inline-block;:将内联元素转换为块级元素,但允许与其他元素在同一行显示。
2. 示例
<span style="display: block; background-color: lightblue;">这是一个显示为块级的内联元素。</span>
<div style="display: inline; background-color: lightgreen;">这是一个显示为内联的块级元素。</div>

四、总结

  • 块级元素:独占一行,可以设置宽度和高度,适用于布局和需要独占空间的元素。
  • 内联元素:与前后元素在同一行显示,宽度由内容决定,适用于文本和小部件。
  • 转换显示方式:通过CSS的display属性可以灵活地改变元素的显示方式,实现更复杂的布局需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34086.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人工智能与人的智能,改变一生的思维模型【8】逆向思维

逆向偏差思维模型&#xff1a;顶尖高手如何「反常识」破局 &#xff08;斯坦福决策科学中心认证的逆向思考框架&#xff09; 一、直击本质&#xff1a;什么是逆向偏差思维&#xff1f; 定义&#xff1a; 逆向偏差思维是一种主动对抗本能认知倾向的决策模式&#xff0c;通过系…

YOLO优化之扫描融合模块(SimVSS Block)

研究背景 在自动驾驶技术快速发展的背景下,目标检测作为其核心组成部分面临着严峻挑战。 驾驶场景中目标尺度和大小的巨大差异 ,以及 视觉特征不显著且易受噪声干扰 的问题,对辅助驾驶系统的安全性构成了潜在威胁。 传统的卷积神经网络(CNN)虽然在目标检测领域取得了显著…

(全)2024下半年真题 系统架构设计师 综合知识 答案解析01

系统架构设计师第二版教程VIP课程https://edu.csdn.net/course/detail/40283 操作系统 下列选项中不能作为预防死锁措施的是 。 A. 破坏“循环等待"条件 B. 破坏“不可抢占”条件 C. 破坏“互斥”条件 D. 破坏“请求和保持”条件 答案&#xff1a;C 解析&…

通义万相 2.1 + 蓝耘算力,AI 视频生成的梦幻组合

在这个科技日新月异的时代&#xff0c;人工智能不断刷新着我们对世界的认知。一次偶然的机会&#xff0c;我借助北京蓝耘科技股份有限公司提供的算力支持&#xff0c;踏上了使用通义万相 2.1 进行 AI 视频生成的奇妙之旅。 目录 1.1初遇蓝耘科技&#xff1a; 1.2通义万相 2.1…

链表·简单归并

cur->next la; //将 p指针所指向的链表节点的 next 指针&#xff08;也就是 p 节点的下一个节点的指针&#xff09;指向 l1 所指向的链表节点。简单来说&#xff0c;就是把 la 节点连接到 p 节点的后面&#xff0c;更新了链表的连接关系。 p la; //将p指针的值更新为 la …

kmp报错→Cannot find skiko-windows-x64.dll.sha256

1、前言 学习kmp&#xff08;Kotlin MultiPlatform简称&#xff09;过程中报了错误&#xff0c;这个报错在直接运行desktop的main方法才会出现&#xff0c;用gradle运行却不会报错&#xff0c;新建的kmp项目也不会出现&#xff0c;我学习的写了一些代码的项目才会出现。   运…

MySQL(事物下)

目录 一 多版本并发控制&#xff08; MVCC &#xff09;是一种用来解决 读-写冲突 的无锁并发控制 1. 前置知识 示例&#xff1a; 二 Read View 1. 当事物进行快照读(读历史数据)会MySQL会创建一个Read Vidw类对象&#xff0c;用来记录和当前一起并发的事物(活跃的事物)&a…

星型组网模块的两种交互方式优缺点解析

星型组网模块简介 星型组网模块工作在433MHz频段&#xff1b;星型组网模块集主机&#xff08;协调器&#xff09;、终端为一体&#xff0c;星型组网模块具有长距离、高速率两种传输模式&#xff0c;一个主机&#xff08;协调器&#xff09;支持多达200个节点与其通讯&#xff0…

IMX6ULL学习整理篇——UBoot的一些基础知识(1.编译流程)

前言 笔者整理了最近刷IMX6ULL的一些学习笔记&#xff0c;这里打算稍微整理一下东西发上来作为作为一个补充 正文 大部分而言&#xff0c;当我们拿到源码的时候&#xff0c;一般都是——先使用make来生成一份针对我们目标开发板的配置。举个例子&#xff0c;正点原子针对他们…

docker桌面版启动redis,解决无法连接

docker run -d --name redis -p 6379:6379 -v E:\2\redis\redis.conf:/usr/local/etc/redis/redis.conf redis redis-server /usr/local/etc/redis/redis.conf 在本地创建一个目录&#xff0c;里面有个redis.conf文件&#xff0c;内容如下&#xff0c;启动时绑定这个配置文件目…

2025-03-15 学习记录--C/C++-PTA 习题3-3 出租车计价

合抱之木&#xff0c;生于毫末&#xff1b;九层之台&#xff0c;起于累土&#xff1b;千里之行&#xff0c;始于足下。&#x1f4aa;&#x1f3fb; 一、题目描述 ⭐️ 习题3-3 出租车计价 本题要求根据某城市普通出租车收费标准编写程序进行车费计算。具体标准如下&#xff1…

《C++ Primer》学习笔记(二)

第二部分&#xff1a;C标准库 1.为了支持不同种类的IO处理操作&#xff0c;标准库定义了以下类型的IO&#xff0c;分别定义在三个独立的文件中&#xff1a;iostream文件中定义了用于读写流的基本类型&#xff1b;fstream文件中定义了读写命名文件的类型&#xff1b;sstream文件…

数据类设计_图片类设计之6_混合图形类设计(前端架构)

前言 学的东西多了,要想办法用出来.C和C是偏向底层的语言,直接与数据打交道.尝试做一些和数据方面相关的内容 引入 接续上一篇,讨论混合图形类设计 方法论-现在能做什么 这段属于聊天内容---有句话是这么说的&#xff1a;不要只埋头拉车&#xff0c;还要抬头看路。写代码也是…

招聘信息|基于SprinBoot+vue的招聘信息管理系统(源码+数据库+文档)

招聘信息管理系统 目录 基于SprinBootvue的招聘信息管理系统 一、前言 二、系统设计 三、系统功能设计 5.1系统功能模块 5.2管理员功能模块 5.3企业后台管理模块 5.4用户后台管理模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、…

【软件】免费的PDF全文翻译软件,能保留公式图表的样式

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 很多PDF全文翻译软件都是收费的&#xff0c;而划线翻译看着又很累。这个开源的PDF全文翻译软件非常好用&#xff0c;并且能够保留公式、图表、目录和注…

79.HarmonyOS NEXT 手势操作模型详解:移动、缩放与旋转的实现原理

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; HarmonyOS NEXT 手势操作模型详解&#xff1a;移动、缩放与旋转的实现原理 文章目录 HarmonyOS NEXT 手势操作模型详解&#xff1a;移动、缩放与旋…

解读Ant Design X API流式响应和流式渲染的原理

前言 AI是未来世界的趋势&#xff0c;deepseek的出现让在国内构建更多的大模型出现了更多的可能。而从前端出发&#xff0c;Ant design团队最近很有意思&#xff0c;基于这个背景&#xff0c;提供了一套面向构建平台化产品的组件。 本篇结合Ant design AI的XSteam、XRequesta…

CentOS 7 64 安装 Docker

前言 在虚拟机中安装 Docker 是一种常见的测试和开发环境搭建方式。通过在虚拟机上安装 Docker&#xff0c;可以方便地创建和管理容器化应用&#xff0c;同时避免对宿主机系统造成影响。以下是在 CentOS 7 虚拟机中安装 Docker 的详细步骤。 1. 更新系统&#xff08;可以不操作…

SPI驱动(八) -- SPI_DAC设备驱动程序

文章目录 参考资料&#xff1a;一、编写设备树二、 编写驱动程序三、编写测试APP四、Makefile五、上机实验 参考资料&#xff1a; 参考资料&#xff1a; 内核头文件&#xff1a;include\linux\spi\spi.h内核文档&#xff1a;Documentation\spi\spidevDAC芯片手册&#xff1a;…

Ansible 自动化运维

Ansible架构: 一.部署主机清单 前期环境准备: 管理端: 192.168.60.128 被管理端: client1:192.168.60.129 client2:192.168.60.131 1.所有被管理端配置ssh密钥 (1.免密登陆 2.允许root远程登陆) 脚本如下: #!/bin/bash# 检查 sshpass 是否已安装 if ! command -v ss…