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

html行内元素和块级元素的区别？

news 2026/4/1 10:37:47

HTML中的元素可以分为两种类型：行内元素（inline）和块级元素（block）

文章目录

    • 什么是行内元素
    • 什么是块级元素
    • 元素转换
      • 行内元素转块级元素
      • 块级元素转行内元素
    • 区别
    • 总结

什么是行内元素

HTML的行内元素（inline element）是指那些不会打断文本流，在一行内显示的元素。行内元素通常用于包裹文本或者在文本中嵌入其他标记或元素。

常见的行内元素有：

  • <span>：用于为文本或一系列文本设置样式或添加标记。
  • <a>：用于创建超链接。
  • <strong>：用于表示强调的文本。
  • <em>：用于表示强调并且带有斜体效果的文本。
  • <img>：用于嵌入图片。
  • <input>：用于创建输入框。
  • <button>：用于创建按钮。

行内元素的特性包括：

  • 不会独占一行，会在一行内显示。
  • 宽度和高度由内容决定，无法通过CSS设置固定的宽度和高度。
  • 可以设置左右外边距（margin）和内边距（padding），但上下外边距和内边距不会影响其他元素的布局。

需要注意的是，行内元素可以通过CSS的display属性设置为块级元素，使其以块级元素的方式显示。

什么是块级元素

HTML的块级元素（block-level element）是指那些会始终独占一行的元素，即会从新的一行开始显示。块级元素通常用于组织和布局页面内容的结构。

常见的块级元素有：

  • <div>：用于组织和布局页面的块级内容。
  • <p>：用于表示段落。
  • <h1>-<h6>：用于表示标题。
  • <ul>和<ol>：用于创建无序列表和有序列表。
  • <li>：用于表示列表项。
  • <table>：用于创建表格。
  • <form>：用于创建表单。

块级元素的特性包括：

  • 独占一行，会从新的一行开始显示。
  • 可以设置宽度、高度、外边距和内边距。
  • 默认情况下，宽度会自动填满父容器的宽度。
  • 可以包含其他块级元素和行内元素。

需要注意的是，块级元素可以通过CSS的display属性设置为行内元素或者行内块元素，使其以行内元素的方式显示。

元素转换

需要注意的是，也可以通过CSS的display属性将行内元素转换为块级元素，或将块级元素转换为行内元素。如：

行内元素转块级元素

    <style>.a{display: block;}</style>
<body>
<span class="a">1</span>
<span>2</span>
<span>3</span>
</body>

结果：
在这里插入图片描述
可以看到1加了转换独自占了一行，而2和3在一行里

块级元素转行内元素

    <style>.a{display: inline;}</style>
<body>
<div class="a">1</div>
<div class="a">2</div>
<div>3</div>
</body>

结果:
在这里插入图片描述
可以看到1和2都转换为行内元素就在一行里了，而3没有转换所以独自一行

区别

区别一： 行内元素不从新行开始，只占用必要宽度和高度；块级元素总是从新行开始，并占用其父元素的可用的全部宽度。
区别二：块级元素可能包含行内元素，有时也包含其他块级元素，行内元素只能包含数据和其他行内元素。
区别三：行内元素设置内外边距不会影响其他元素；块级元素设置内外边距会影响其他元素。

总结

以下内容是本文的重点知识

行内元素不从新行开始，只占用必要宽度；块级元素总是从新行开始，并占用其父元素的可用的全部宽度。

块级元素可能包含行内元素，有时也包含其他块级元素，行内元素只能包含数据和其他行内元素。a元素例外，它可以包含块级元素，例如div。

修改元素的display属性，例如把display属性值从“inline”修改为“block”或者从“block”修改为“inline"，并不会改变元素的类别和内容模型。例如，即使把span元素的display属性修改为”block“，它仍然属于行内元素并且不能内嵌div元素。

相关文章：

html行内元素和块级元素的区别？

HTML中的元素可以分为两种类型&#xff1a;行内元素&#xff08;inline&#xff09;和块级元素&#xff08;block&#xff09; 文章目录 什么是行内元素什么是块级元素元素转换行内元素转块级元素块级元素转行内元素 区别总结 什么是行内元素 HTML的行内元素&#xff08;inli…...

编程日记 2023/12/19 11:05:41

ResNet 原论文及原作者讲解

ResNet 论文摘要1. 引入2. 相关工作残差表示快捷连接 3. 深度残差学习3.1. 残差学习3.2. 快捷恒等映射3.3. 网络体系结构普通网络 plain network残差网络 residual network 3.4. 实施 4. 实验4.1. ImageNet分类普通的网络 plain network残差网络 residual network恒等vs.快捷连…...

编程日记 2023/12/19 11:01:38

liteflow规则引擎 执行Groovy脚本

在LiteFlow规则引擎中执行Groovy脚本的步骤相对简单。首先&#xff0c;确保你的项目中包含了LiteFlow的相关依赖。接下来&#xff0c;创建一个Groovy脚本规则&#xff0c;并使用LiteFlow引擎执行它。 以下是一个简单的示例&#xff1a; 添加LiteFlow依赖&#xff1a;在你的项…...

编程日记 2023/12/19 10:59:36

GZ015 机器人系统集成应用技术样题5-学生赛

2023年全国职业院校技能大赛 高职组“机器人系统集成应用技术”赛项 竞赛任务书&#xff08;学生赛&#xff09; 样题5 选手须知&#xff1a; 本任务书共 24页&#xff0c;如出现任务书缺页、字迹不清等问题&#xff0c;请及时向裁判示意&#xff0c;并进行任务书的更换。参赛队…...

编程日记 2023/12/19 10:58:35

Spark编程实验二：RDD编程初级实践

目录 一、目的与要求 二、实验内容 三、实验步骤 1、pyspark交互式编程 2、编写独立应用程序实现数据去重 3、编写独立应用程序实现求平均值问题 4、三个综合实例 四、结果分析与实验体会 一、目的与要求 1、熟悉Spark的RDD基本操作及键值对操作&#xff1b; 2、熟悉使…...

编程日记 2023/12/19 10:57:34

CleanMyMac X这一款mac电脑清理垃圾文件软件好用吗？

CleanMyMac X您的 Mac。极速如新。点按一下&#xff0c;即可优化调整整个 Mac畅享智能扫描 — 这款超级简单的工具用于优化您的 Mac。只需点按一下&#xff0c;即可运行所有任务&#xff0c;让您的 Mac 保持干净、快速并得到最佳防护。CleanMyMac 是一款功能强大的 Mac 清理程序…...

编程日记 2023/12/19 10:53:30

四通道 DMOS 全桥驱动MS35631N/MS35631

MS35631N/MS35631 是一款四通道 DMOS 全桥驱动器&#xff0c;可以驱动两 个步进电机或者四个直流电机。每个全桥的驱动电流在 24V 电源下可以 达到 1.2A 。 MS35631N/MS35631 集成了固定关断时间的 PWM 电流校正 器&#xff0c;以及一个 2bit 的非线性 DAC &…...

编程日记 2023/12/19 10:50:28

JWT令牌的作用和生成

JWT令牌&#xff08;JSON Web Token&#xff09;是一种用于身份验证和授权的安全令牌。它由三部分组成&#xff1a;头部、载荷和签名。 JWT令牌的作用如下&#xff1a; 身份验证&#xff1a;JWT令牌可以验证用户身份。当用户登录后&#xff0c;服务器会生成一个JWT令牌并返回…...

编程日记 2023/12/19 10:49:26

elementui el-pagination分页组件查询的时候当前页不更新

elementui el-pagination分页组件查询的时候当前页不更新 <mypagination v-if"pageshow" :currentPage.sync"pageNum" :pagesize"pageSize" :pagetotal"pageTotal" pagefunc"pageFunc"></mypagination>1.在加的…...

编程日记 2023/12/19 10:46:24

C++——C++11（1）

时至今日&#xff0c;C标准已经到了C23&#xff0c;但是你要说哪一次提出的标准最经 典&#xff0c;那C11一定会被人提及&#xff0c;C11带来了数量可观的变化&#xff0c;其中包 含了约140个新特性&#xff0c;以及对C03标准中约600个缺陷的修正&#xff0c;这使得 C11更像是从…...

编程日记 2023/12/19 10:44:22

CoPilot究竟如何使用？

基本步骤说明 CoPilot是一款由GitHub开发的人工智能代码助手&#xff0c;可以提供实时代码建议和自动完成功能。下面是使用CoPilot的详细介绍&#xff1a; 安装&#xff1a;首先&#xff0c;你需要在你的代码编辑器中安装CoPilot插件。目前&#xff0c;CoPilot支持一些主流的代…...

编程日记 2023/12/19 10:39:16

前端(三)

1.表格标签 数据展示: jason 123 read egon 123 dbj tank 123 hecha ... <table> <thead><tr> 一个tr就表示一行<th>username</th> 加粗文本<td>username</td> 正常文本</tr></thead> 表头(字段信息)<tbody>…...

编程日记 2023/12/19 10:37:12

Maven知识

文章目录 一、概念1、官方文档2、什么是Maven&#xff1f; 二、相关知识1、Maven生命周期1.1、clean1.2、default1.3、site 2、Pom文件3、Pom常用元素3.1、项目基本元素3.2、<properties\></properties\>3.3、pom继承相关3.4、依赖管理相关3.5、构建管理相关3.6、&…...

编程日记 2023/12/19 10:33:08

美颜SDK是什么？视频美颜SDK在直播平台中的集成与接入教程详解

当下&#xff0c;主播们追求更加自然、精致的外观&#xff0c;而观众也期待在屏幕前欣赏到更为清晰、美丽的画面。为了满足这一需求&#xff0c;美颜SDK应运而生&#xff0c;成为直播平台的重要利器之一。 一、什么是美颜SDK&#xff1f; 通过美颜SDK&#xff0c;开发者可以…...

编程日记 2023/12/19 10:32:07

CSS基础面试题

介绍一下标准css盒子模型与低版本IE的盒子模型&#xff1f; 标准盒子模型&#xff1a;宽度内容的宽度&#xff08;content&#xff09; border padding margin 低版本IE盒子模型&#xff1a;宽度内容宽度&#xff08;contentborderpadding&#xff09; margin box-sizing 属性…...

编程日记 2023/12/19 10:30:06

L1-028 判断素数

本题的目标很简单&#xff0c;就是判断一个给定的正整数是否素数。 输入格式&#xff1a; 输入在第一行给出一个正整数N&#xff08;≤ 10&#xff09;&#xff0c;随后N行&#xff0c;每行给出一个小于231的需要判断的正整数。 输出格式&#xff1a; 对每个需要判断的正整数&a…...

编程日记 2023/12/19 10:24:01

Scala多线程爬虫程序的数据可视化与分析实践

一、Scala简介 Scala是一种多种类型的编程语言&#xff0c;结合了针对对象编程和函数式编程的功能。它运行在Java虚拟机上&#xff0c;具有强大的运算能力和丰富的库支持。Scala常用于大数据处理、并发编程和Web应用程序开发。其灵活性和高效性编程成为编写多线程爬虫程序的理…...

编程日记 2023/12/19 10:18:56

YOLOv8加入顶会ICLR2022MobileViT模块

一、原文引入介绍 MOBILEVIT：轻量级、通用型且移动友好的视觉Transformer 论文地址：https://arxiv.org/pdf/2110.02178.pdf MOBILEVIT: LIGHT-WEIGHT, GENERAL-PURPOSE,AND MOBILE-FRIENDLY VISION TRANSFORMER MobileViT是由苹果公司发表在ICLR2022顶会上的一篇文章，这篇文…...

编程日记 2023/12/19 10:14:53

「数据结构」二叉树1

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;C启航 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 文章目录 &#x1f349;树&#x1f349;二叉树&#x1f34c;特殊二叉树&#x1f34c;二叉树的性质&#x1f34c;存储结构 &#x1f349;…...

编程日记 2023/12/19 10:13:52

栈（C语言版）

一.栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。 栈中的数据元素遵守 后进先出 LIFO &#xff08; Last In First Out &#xff09;的原则。…...

编程日记 2023/12/19 10:10:49

5. 大模型核心基础概念（三）：模型量化、蒸馏、微调的核心逻辑（通俗解读）

001、开篇：为什么大模型需要“瘦身”与“调教”？——量化、蒸馏、微调的必要性 上周在产线调试一个端侧部署的视觉模型，设备跑着跑着就内存溢出了。同事盯着日志问我：“模型在服务器上明明跑得好好的，怎么一到嵌入式板子上就崩了？” 我看了眼那 2GB 的 RAM 和板载的 8GB …...

编程新知 2026/4/1 9:52:26

Ostrakon-VL扫描终端实战教程：像素特工式零售图像识别部署指南

Ostrakon-VL扫描终端实战教程&#xff1a;像素特工式零售图像识别部署指南 1. 像素特工终端介绍 想象你是一位未来世界的零售侦探&#xff0c;手持高科技扫描仪在商店里穿梭。Ostrakon-VL扫描终端就是你的数字助手&#xff0c;它能帮你"看"懂货架上的每一个细节。这…...

编程新知 2026/4/1 9:42:13

ZGC在超大堆（＞16TB）下的隐性崩溃风险：JDK17~21版本兼容性断层分析（仅限内测团队知晓）

第一章&#xff1a;ZGC在超大堆&#xff08;>16TB&#xff09;下的隐性崩溃风险&#xff1a;JDK17~21版本兼容性断层分析&#xff08;仅限内测团队知晓&#xff09;当堆内存突破16TB阈值后&#xff0c;ZGC在JDK17至JDK21的多个GA版本中暴露出未公开的元数据结构越界行为——…...

编程新知 2026/4/1 9:13:36

HsMod终极指南：5步打造你的专属炉石传说模改体验

HsMod终极指南&#xff1a;5步打造你的专属炉石传说模改体验 【免费下载链接】HsMod Hearthstone Modify Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod HsMod是一款基于BepInEx框架的炉石传说模改插件&#xff0c;为玩家提供全面的游戏体验…...

编程新知 2026/4/1 7:20:54

[Android] 鲁迅全集 7.2.0

[Android] 鲁迅全集 7.2.0 链接&#xff1a;https://pan.xunlei.com/s/VOp2ylhHGYlTTbQ2rTOhsk3RA1?pwdh6tu# 鲁迅作品全集&#xff01;&#xff01;&#xff01;...

编程新知 2026/4/1 4:56:30

黑客为什么不攻击微信钱包？

黑客为什么不攻击微信钱包&#xff1f; 现在人人手机里都装着微信和支付宝&#xff0c;里面都或多或少存了些钱。怎么从来没听说谁的钱被技术牛逼黑客惦记走&#xff1f; 是黑客没攻击过&#xff1f;还是黑客不敢攻击&#xff1f;其实都不是。阿里巴巴首席风险官郑俊芳就说过&…...

编程新知 2026/4/1 4:42:14

无需本地安装，用快马平台5分钟搭建git操作可视化原型

最近在准备一个Git入门教学项目时&#xff0c;发现很多新手卡在环境配置这一步。传统方式需要先安装Git客户端、配置SSH密钥、设置全局参数&#xff0c;光是这些前置操作就能劝退不少人。于是尝试用InsCode(快马)平台的云端开发环境&#xff0c;意外发现能跳过所有安装步骤直接…...

编程新知 2026/4/1 4:09:45

深入解析STM32 map文件：从编译到内存优化的关键步骤

1. 为什么STM32开发者必须掌握map文件分析 第一次接触STM32的map文件时&#xff0c;我和大多数新手一样感到一头雾水。这个由编译器自动生成的文本文件&#xff0c;乍看就像天书般难以理解。直到有次项目遇到内存不足的紧急情况&#xff0c;我才真正体会到map文件的价值——它不…...

编程新知 2026/4/1 3:35:13

智能转换驱动科研效率：DeTikZify重构学术图表自动化新范式

智能转换驱动科研效率&#xff1a;DeTikZify重构学术图表自动化新范式 【免费下载链接】DeTikZify Synthesizing Graphics Programs for Scientific Figures and Sketches with TikZ 项目地址: https://gitcode.com/gh_mirrors/de/DeTikZify 在科研成果可视化的关键环节…...

编程新知 2026/4/1 2:50:25

Mbed OS platform_drivers：嵌入式HAL驱动核心解析

1. 项目概述platform_drivers是 Arm Mbed OS 生态中一组经过严格验证、面向硬件抽象层&#xff08;HAL&#xff09;的平台级设备驱动集合&#xff0c;其核心定位并非提供通用外设封装&#xff0c;而是为 Mbed OS 内核及中间件组件提供可移植、可测试、符合 RTOS 语义的底层硬件…...

编程新知 2026/4/1 2:42:21