行级元素、块级元素、行级块元素

最新推荐文章于 2025-05-16 23:31:53 发布

swallow_杨

最新推荐文章于 2025-05-16 23:31:53 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/swallow_y/article/details/79377128

本文介绍了HTML中的三种元素类型：行级元素、块级元素和行级块元素的特点及常见示例，并解释了如何通过display属性在这些类型间进行转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

行级元素、块级元素、行级块元素

简单的介绍html标签元素

行级元素
块级元素
行级块元素

行级元素特点及例子(inline)

内容决定元素所占位置
不可以通过css改变高宽
例子：span strong em a del

块级元素特点及例子(block)

独占一行
可以通过css改变高宽
例子：div p ul li ol form address

行级块元素(inline-block)

内容决定大小
- 可以通过css改变高宽
- 例子：img

这几个元素可以通过display属性来转换

元素	属性值
行级元素	inline
块级元素	block
行级块元素	inline-block

小知识

凡是带有inline属性的，都带有文字特性，中间有空格的会出现4像素的距离。如：多个img标签一行一行的使用，会出现每张图片有4像素的距离
可以通过css改变高宽
例子：div p ul li ol form address

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

swallow_杨

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端面试题：行内元素和块级元素是哪些？区别是什么？

qq_46582421的博客

01-06

734

一、行内元素： <span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del> 二、块级元素： <address>、<center>、<h1>~<h6>、<hr>、<p>、&

HTML行级元素和块级元素标签列表

m0_51863682的博客

10-20

182

⭐ tips：块级元素占一行，不论内容多少只要是有2个这样的元素就会换行，行内元素内容少时不会换行。为那些不支持框架的浏览器显示文本，于 frameset 元素内部。标签为input元素定义标注（标记）定义在脚本未被执行时的替代内容。3. 宽度就是它的文字或图片的宽度，不可改变。定义表格的页脚（脚注或表注）多行的文本输入控件。语气更强的强调的内容。组合文档中的行内元素。

参与评论您还未登录，请先登录后发表或查看评论

行块级元素

weixin_44516932的博客

11-07

196

行块级元素 块级元素 block 例如：div, p, h1~h6, li 独占一行宽度默认与浏览器一致高度默认与内容一致宽高, 行高, 内外边距可以手动控制容纳性: 任何元素行级元素 inline 例如：b，i，u，span，del，strong 同在一行宽度默认与内容一致高度默认与内容一致行高, 内外的左右边距可以手动控制宽度,内外上下无法控制容纳性: 行级元...

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

最新发布

HRDMN的博客

05-16

1542

本文介绍了CSS的盒子模型-块级元素、行内元素、行内块级元素和display属性。在CSS中，块级元素独占一行、可设宽高和边距，常用于页面结构；行内元素同行显示，不可直接设宽高，多用于文本包裹。行内块级元素结合两者特性，可同行且设宽高。灵活使用display属性转换类型，能满足多样布局需求。

[前端]块级元素以，行级元素以及行级块元素

joe_leong的博客

10-16

1086

块级元素（独占一行）： p、address、pre、ul、ol、dl、h1-h6、hr、div、table、blockquote、form 行级标签： code、strong、sub、sup、a、span、br、i、em、label、q（指示引用，会在前后自动加上引号）行间块元素： img、input...

行级元素与块级元素

C0die的博客

04-15

574

1.行级元素（inline）默认css属性 span{ display:inline; } 内容决定元素所占位置不可以通过css改变宽高 span、strong、em、a、del 2.块级元素（block）默认css属性 div{ display:block; } 独占一行可以通过css改变宽高 div、p、ul、li、ol、form、address 3行级块元素（inli...

行级元素,块级元素,行级块元素特点

x1037490413的博客

09-08

2995

1em=1 font-size 宽度=高度 1.行级元素 inline feature:内容决定元素所占位置,不可以通过css改变宽高 span strong em a del 2.块级元素 block feature:独占一行,可以通过css改变宽高 div p ul li ol form address 3.行级块元素 inline-block feature:内容决定大小,可以改宽高 img img只需要设置宽度就好了,高度会成比例缩放凡是带有inline的元素,都带有文字特性 - 所以img.

微信小程序布局之行内元素和块级元素

03-29

元素按照显示方式主要可以分为块级元素和行内元素，元素的显示方式由display属性控制。 块级元素特点总结： 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...

CSS块级元素与行级元素详解

12-10

块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签’P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。 .如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。...

HTML中的块级、行级元素，特殊字符，嵌套规则

01-19

元素可以划分为块级元素和行级元素，块级元素是什么？它可以独占一行，可以设置宽高度，默认是100%；行级元素与之相反，它的内容决定它的宽高度，至于特殊字符就当成是文字来看 <!DOCTYPE html> <...

关于css 行元素和块元素 相互转换居中

12-13

这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。您可以使用 display 属性改变生成的框的类型。这意味着，通过将 ...

行级元素-块级元素-行内块级元素

超超的博客

03-15

486

html标签按照元素种类可以分为行内元素（display: inline），块级元素（display：block）和行内块级元素（display：inline-block）三种。了解元素种类有利于，我们进行css布局及属性的使用。 “块级元素”译为 block level element，“内联元素”译为 inline element 1. 行内元素特点：内联元素或内嵌元素，只能容纳文本或其他内联元素，不能设置宽高，可以使用可以设置line-height指定行高，宽度随内容变化。margin 水平方向有

行级元素和块级元素

OoChellyoO的博客

12-08

1413

1.1 块级元素： 块级元素独占一行，块级元素的后面无法再放任何的内容从页面布局和外观显示来看，一个网页的布局就类似于一篇报纸的排版。首先将网页分成大的模块。然后在模块里面再分成小的模块。所以块级元素多用于布局。 1.2 行级元素：只占一小块空间，后面可以继续放内容行级元素也称为行内标签，内联标签，使用块级、元素将网页结构搭建好了后，使用行级元素来排版。

行级元素 块级元素 行内块级元素

Public places

07-19

336

行级块级元素（行内块级元素） 1、能设置宽高 2、能和其他元素待在同一行常见的行内块级元素：img 表单 <style> img{ width: 300px; height: 300px; } </style> <body> <img src="tupian.jpg" /...

HTML常用行级标签

远方水木

03-19

8209

HTML常用行级标签行级标签：按行逐一显示，前后不会自动换行文本化格式元素符号意义 <b> 定义粗体文本 <i> 定义斜体文本 <em> 定义强调文本，实际效果与斜体文本差不多 <strong> 定义粗体文本，左右和<b>基本相同 <small...

HTML 块级元素、行内元素和行内块级元素

风清扬的专栏

02-15

5204

表单元素：、、、、等，用于创建表单，包括文本框、单选按钮、复选框、下拉框等。多媒体元素：、、、、，用于插入图像、视频和音频。、、、、、、、等：用于对文本进行修饰和强调。表格元素：、、、，用于表示表格和表格的行和单元格。

块级元素和行内元素

weixin_42434289的博客

10-06

808

块级元素和行内元素 块级元素 <address>定义地址 <caption>定义表格标题 <dd>定义列表中定义条目 <div>定义文档中的分区或节 <dl>定义列表 <dt>定义列表中的项目 <fieldset>定义一个框架集 <form>创建HTML表单 <h1>定义最大的标题 <h2>定义副标题 <h3>定义标题 <h4>定...

css 行级元素 块级元素 行级块元素 display（inline block inline-block）

JackLiu16的博客

09-01

449

参考： https://study.163.com/course/courseLearn.htm?courseId=1004165002#/learn/video?lessonId=1048131006&courseId=1004165002

行元素块元素

myth_wei的博客

10-26

285

块元素(block element) HTML标签分类明细 * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div - 常用块级容易，也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form - 交互表单（只能用来容纳其它块元素） * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标

vue2怎么把行级元素变成块级元素

02-09

### Vue2 中修改行内元素为块级元素的方法在 Vue2 项目中，可以通过多种方式将行内元素转换为块级元素。主要方法是在组件的模板部分应用 CSS 类或直接使用内联样式。 #### 使用类名绑定的方式推荐的做法是通过 `v-bind:class` 或者缩写形式 `:class` 来动态绑定 CSS 类： ```html <template> <div id="app">  <span :class="{ 'block-element': isBlock }">这是一个可以变成块状的 span</span> <button @click="toggleDisplay()">切换显示模式</button> </div> </template> <script> export default { data() { return { isBlock: false, }; }, methods: { toggleDisplay() { this.isBlock = !this.isBlock; } } } </script> <style scoped> .block-element { display: block; /* 将原本的行内元素转成块级 */ } /* 默认情况下保持原有特性 */ span { color: blue; } </style> ``` 上述代码展示了如何利用 Vue 的响应式数据属性 `isBlock` 控制是否给 `<span>` 添加 `.block-element` 这个类[^1]。当点击按钮触发 `toggleDisplay()` 函数时，会改变 `isBlock` 的布尔值状态，从而实现样式的切换效果。 #### 直接使用内联样式如果只需要简单地更改某个特定实例而不希望创建额外的 CSS 文件，则可以直接采用内联样式的方式来调整元素的行为： ```html <template> <div id="app">  <a v-bind:style="{display: inlineOrBlock}">链接文本</a> <button @click="changeDisplayStyle()">改变展示风格</button> </div> </template> <script> export default { data() { return { inlineOrBlock: "inline", // 初始状态下为行内元素 }; }, methods: { changeDisplayStyle() { this.inlineOrBlock = this.inlineOrBlock === "inline" ? "block" : "inline"; } } }; </script> ``` 这段例子说明了怎样借助 JavaScript 动态更新 HTML 属性中的 `style` 字段来即时改变 DOM 元素的表现形态[^2]。