admin管理员组

文章数量:1031662

前端总结：块级元素和行内元素及其区别

我们知道判断行内元素和块级元素的快捷方法就是判断是否能并列，下面我们就块级元素和行内元素做个分类，并看一下具体区别：

大多数 HTML 元素被定义为块级元素或内联元素。“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。

1.块级元素

块级元素： 在浏览器显示时，通常会以新行来开始（和结束）。块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。

  • 结构化块状元素： 这类元素用于构造文档的结构，没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。
  • 终端块状元素： 这类元素用于从结构转向内容，拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。
  • 多目标块状元素： 多目标指的是可以自由的扩展或嵌套文档的结构，以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。

2、行内元素

内联元素 (inline element)或称为行内元素 一般都是基于语义级(semantic)的基本元素，只能容纳文本或者其它内联元素。

注：这里input元素比较特殊，它属于行内块级元素。

3.块级元素与行内元素的区别

（1）块级元素会独占一行，其宽度自动填满其父元素宽度； 行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。 （2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。 （3）行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。

4. 块级元素与行内元素的转换

display:inline-block; display:inline; display:block;

5.可变元素

可变元素为根据上下文语境决定该元素为块元素或内联元素：

可能随着版本的变化，会有改变，如有错误，请指正！

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-04-07，如有侵权请联系 cloudcommunity@tencent 删除displayinline浏览器前端终端

前端总结：块级元素和行内元素及其区别

我们知道判断行内元素和块级元素的快捷方法就是判断是否能并列，下面我们就块级元素和行内元素做个分类，并看一下具体区别：

大多数 HTML 元素被定义为块级元素或内联元素。“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。

1.块级元素

块级元素： 在浏览器显示时，通常会以新行来开始（和结束）。块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。

  • 结构化块状元素： 这类元素用于构造文档的结构，没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。
  • 终端块状元素： 这类元素用于从结构转向内容，拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。
  • 多目标块状元素： 多目标指的是可以自由的扩展或嵌套文档的结构，以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。

2、行内元素

内联元素 (inline element)或称为行内元素 一般都是基于语义级(semantic)的基本元素，只能容纳文本或者其它内联元素。

注：这里input元素比较特殊，它属于行内块级元素。

3.块级元素与行内元素的区别

（1）块级元素会独占一行，其宽度自动填满其父元素宽度； 行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。 （2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。 （3）行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。

4. 块级元素与行内元素的转换

display:inline-block; display:inline; display:block;

5.可变元素

可变元素为根据上下文语境决定该元素为块元素或内联元素：

可能随着版本的变化，会有改变，如有错误，请指正！

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-04-07，如有侵权请联系 cloudcommunity@tencent 删除displayinline浏览器前端终端

本文标签： 前端总结块级元素和行内元素及其区别

版权声明：本文标题：前端总结：块级元素和行内元素及其区别 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1747868767a2220164.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。