常见的块级元素，行内元素，行内块元素以及他们之间的区别

最新推荐文章于 2025-03-16 10:33:14 发布
原创 最新推荐文章于 2025-03-16 10:33:14 发布 · 347 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5

本文深入解析块级元素、行内元素及行内块元素的区别与特性。探讨它们如何影响页面布局，包括各自的显示方式、宽高设置及内外边距的影响。通过具体标签实例，如div、p、a、img等，帮助读者理解并掌握不同元素的应用场景。

其实块级元素，行内元素他们的定义并不清晰，因为有这个玩意

display，这个属性可以把标签转换为块级，行内等，总之你喜欢的样子，我都有。

所以我们这里的块级，行内都是他自身本来的定义

块级元素：块级元素会开启新一行，不和其他标签同行显示，可以设置height和width属性

div，p ，h系列 ul 无序列表 li列表项目 ol有序列表  dl 列表 dd列表条目

   行内元素 ：

可以和其他行内元素同行显示，宽高不可设置，一般表现为所包含内容的宽高，

margin只有水平方向有效果，padding无影响

a链接标签 img图片标签 input输入框 span strong修饰类标签 br换行

行内块元素：

块级元素和行内元素的结合体，可以和行内元素和行内块元素在同行显示

也有宽高，padding和margin都可用

 

lmd666
关注
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
09-24
在CSS布局中，块级元素（Block Element）和行内元素（Inline Element）是两种基本的元素类型，它们之间的区别和联系是理解网页布局的关键。本文将深入探讨这两种元素的概念、特点以及它们如何影响文档流。 块级元素...
进一步理解CSS编程中的块级元素和行内元素
12-13
Block element 块级元素顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的、、默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。...
常用的行内元素和块级元素以及他们有什么区别
qq_47443027的博客
03-17 4380
常用行内元素列表: <a>标签可定义链接 <b>字体加粗 <br>换行 <img>图像 <input>输入框 <var>定义变量 块级元素列表: <div>定义文档中的分区或节 <form>创建 HTML 表单 <hr>创建一条水平线 <ol>定义有序列表 <ul>定义无序列表 <p>标签定义段落 一，从概念的角度解释块级元素和行内元素
块元素/行内元素/行内块元素
smilling sky的博客
04-06 312
1.块元素 注意： 文字类的元素内不能使用块级元素 < p>标签主要用于存放文字，因此< p>里面不能放块级元素,特别是不能放< div> 同理，< h1>~< h6>等都是文字类块级标签,里面也不能放其他块级元素 2.行内元素 3.行内块元素 总结 display详细信息：https://www.runoob.com/cs...
块级元素和行内元素区别
ysc199283的专栏
07-16 139
https://www.cnblogs.com/xmbg/p/11526676.html 记录，行块级元素介绍比较清晰
常用块级元素与行内元素
NewWent的博客
08-18 3713
常用块级元素： div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等   常用行内元素： span、img、a、input、textarea、select、strong、lable、button（默认display：inline-b...
html中行内元素、块级元素、行内块级元素有哪些，以及它们之间的区别
lyclyc_的博客
05-30 5487
html中行内元素、块级元素、行内块级元素有哪些，以及它们之间的区别 行内元素： 最常用的是span，其他还有img、a abbr b big br em i input label 块级元素 比较有代表性的是div 其余有p h1 h2 h3 h4 h5 h6 table ul li ol header section aside footer dl dd dt form hr pre tbody td tfoot th thead tr 行内元素
精选资源
微信小程序布局之行内元素和块级元素
03-29
元素按照显示方式主要可以分为块级元素和行内元素，元素的显示方式由display属性控制。 块级元素特点总结： 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
行内块级元素.txt
02-06
4. **嵌套兼容性**：块级元素可以包含其他块级元素或行内元素，但行内元素不能包含块级元素。 常见的块级元素包括但不限于： - `<address>`：用于定义文档或文章的联系信息。 - `<center>`：虽然HTML5不推荐使用，...
全面了解行内元素与块级元素的区别
09-24
在了解行内元素与块级元素的区别之前，首先要熟悉CSS的display属性。CSS规范规定每个元素都有一个display属性，这个属性决定了元素的类型。元素的默认display值分为块级（block）和行内（inline）两种。 块级元素是...
HTML常见的块元素、行内元素总结
weixin_44367415的博客
05-27 7930
HTML常见的块级元素、行内元素 1、常见块级元素 div ，p ，ul , li ,h1-h6… 块级元素特点：(1)所有的块级元素都会独占一行; (2)块级元素可以直接设置其宽度和高度； (3)如果一个块级元素没有设置宽度，那么其默认的宽度是父元素的宽度。 2、常见行内元素 span ,a ,strong ,em ,b ,s ,i ,font… 行内元素特点：(1)所有行内元素...
块级元素、行内元素和行内块元素各自特点和区别
zy1992As的博客
01-04 612
常见的行内元素有、、、、、、、、、等，其中标签最典型的“行内元素”，也称“内联元素”。在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。常见的块元素有~、、、、、等，其中标签是最典型的块元素。4. 块级元素、行内元素和行内块元素的区别。
行内元素，行内块元素以及块级元素的区别
郑哥哥の博客
04-05 348
行内元素 顾名思义，行内元素就是不换行，与其他内联元素共行。HTML常用的行内元素有： span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）等 行内元素可以设置元素的高度与宽度，但宽度只与内容有关，用line-height控制高度，不可...
行内元素与块级元素都有哪些，以及它们的区别与联系
weixin_58401027的博客
03-13 1730
行内元素：span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u。块级元素：div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre。块级元素会独占一行 默认的宽度占满父级元素，行内元素不会换行。行内元素如何实现块级元素的效果？一、行内元素和块级元素。
常见行内元素、块级元素、行内块元素
热门推荐
你，若盛开的专栏
04-11 1万+
1、常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。 2、常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、...
CSS块元素、行内元素、行内块元素详解
m0_73941339的博客
03-16 2221
效果：两个元素分别独占一行，且的宽度为200px，默认宽度为父容器100%。宽度：默认占父容器的 100%（即父容器的宽度）。高度：默认由内容撑开（即内容的高度决定，不会自动占满父容器的高度）。HTML 结构 CSS 样式 运行结果：效果说明HTML 结构 CSS 样式 效果说明 效果：span和a在同一行显示，且无法设置宽高。行内块元素兼具块元素和行内元素的特点： 效果：图片和按钮水平排列，且可以设置宽高。元素嵌套规则：行内元素的空白间隙：display属性转换：为什么行内元
行内元素有哪些？块级元素有哪些？ 行内块元素有那些？他们有什么区别？
qingdouxiaohua的博客
09-10 1082
独占一行，不能与其他任何元素并列。能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。块级元素有：div、 ul、ol、li、h1...h6、p、td、th、form。默认宽度就是内容的宽度；高度、宽度、内外边距都可以自定义；和相邻的行内元素（包含行内块）在一行上，它们直接会有空白缝隙；与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度。行内元素有： a、 b、span、br、 i、 s。行内块元素有：img、input、textarea。
CSS中的块级元素、行内元素和行内块元素
葉無聞
12-10 1万+
元素是文档结构的基础，在css里面，每个元素生成了包含内容的框（box）,大家都叫“盒子”。但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。比如：div 与span的显示方式不一样，因为 div是块级元素，会占据一行，而span为行内元素，可多个span放置一行。接下来就详细讲一下在CSS中块级元素、行内元素和行内块级元素的区别。 块级元素 block 块级元素，顾...
行内块元素有哪些？
zybijiso666的博客
03-14 491
1：行内元素有： a( 锚点) b(粗体) span(常用内联容器，定义文本内区块) select(项目选择) strong(粗体强调) label(表格标签) cite (引用) code(计算机代码) 2：块级元素有： div ul(无序列表) ol(有序列表) dl(定义列表) table(表格) form(表单) h1 (一级标题) p(段落) hr pre(预格式) 3：行内块元素常见的有： img input textarea
css显示模式块级元素行内块元素行内元素区别
最新发布
03-20
### CSS 中块级元素、行内块元素和行内元素的区别 #### 块级元素 (Block-level Elements) 块级元素在页面布局中会独占一行，其宽度默认为父容器的 100%，高度由内容决定。它可以包含其他块级元素以及行内元素。常见的块级元素有 `<div>` 和 `<p>` 等[^1]。 #### 行内块元素 (Inline-block Elements) 行内块元素既具有行内元素的特点又具备部分块级元素的行为特性。它不会独自占据整行空间，而是与其他行内或行内块元素并列排列；然而，在水平方向上支持设置宽高属性，并能够应用边距（margin）与填充（padding）。典型的例子如 `<img>` 或带有 `display:inline-block` 的自定义样式标签[^2]。 #### 行内元素 (Inline Elements) 行内元素仅占用必要的空间大小来容纳自己的文本或者子元素，它们之间允许在同一行展示多个实例直到达到容器边界为止才会换到下一行继续渲染。值得注意的是，行内元素内部不应放置块级元素以免引发不可预期的表现问题。典型代表包括 `<span>`, `<a>` 这样的链接标记等等[^4]。 下面是一个简单的 HTML 结构配合相应的 CSS 来演示这三种类型的差异： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Display Types</title> <style> .block { display: block; background-color: lightblue; margin-bottom: 5px; } .inline-block { display: inline-block; width: 100px; height: 50px; background-color: pink; margin-right: 5px; } .inline { display: inline; background-color: yellowgreen; } </style> </head> <body> <!-- Block element --> <div class="block">This is a block level element.</div> <!-- Inline-block elements --> <span class="inline-block">One</span><span class="inline-block">Two</span><span class="inline-block">Three</span> <!-- Inline element --> <span class="inline">An example of an inline element within text,</span> continuing sentence. </body> </html> ``` 通过上述代码可以看到不同显示模式下的视觉效果如何变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值