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

小亮编码

已于 2023-12-21 09:30:16 修改

阅读量1.1k

点赞数 26

分类专栏： HTML 文章标签： html 前端 css

于 2023-12-18 11:42:15 首次发布

本文链接：https://blog.csdn.net/a836996156/article/details/135058187

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

文章目录

什么是行内元素

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

常见的行内元素有：

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

代码示例：

<body>
<div style="background-color: red">
    <span>1</span>
    <a>2</a>
    <strong>3</strong>
    <em>4</em>
    <img src="image/b9cb884daa9721c19acb562864ed9c9.png" style="height: 100px;width: 100px">
    <input type="text">
    <button>5</button>
</div>
</body>

结果：
在这里插入图片描述
行内元素的特性包括：

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

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

什么是块级元素

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

常见的块级元素有：

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

代码示例：

<body>
<div style="background-color: red">1</div>
<p style="background-color: blue">2</p>
<h1 style="background-color: green">3</h1>
<ul style="background-color: cyan">4</ul>
<ol style="background-color: purple">5</ol>
<li style="background-color: lawngreen">6</li>
<table style="background-color: orange">7</table>
<form style="background-color: black;color: red">8</form>
</body>

结果：
在这里插入图片描述
块级元素的特性包括：

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

需要注意的是，块级元素可以通过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元素。

小亮编码

关注

26
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
html行内元素和块级元素的区别？

HTML的行内元素（inline element）是指那些不会打断文本流，在一行内显示的元素。行内元素通常用于包裹文本或者在文本中嵌入其他标记或元素。：用于为文本或一系列文本设置样式或添加标记。：用于创建超链接。：用于表示强调的文本。：用于表示强调并且带有斜体效果的文本。：用于嵌入图片。：用于创建输入框。：用于创建按钮。代码示例：stylered
复制链接

扫一扫