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

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

news 2026/2/10 16:25:32

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

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/8 20:42:55

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2026/1/31 8:35:07

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2026/2/1 4:23:19

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2026/2/5 4:25:58

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

编程新知 2026/2/4 18:11:56

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究

摘要&#xff1a;在消费市场竞争日益激烈的当下&#xff0c;传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序&#xff0c;探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式&#xff0c;分析沉浸式体验的优势与价值…...

编程新知 2026/2/2 21:52:42

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...

编程新知 2026/2/5 23:40:45