HTML_行内元素和块级元素的区别? 分别有哪些?

L败落

已于 2023-12-21 19:00:53 修改

阅读量666

点赞数 14

文章标签： html 前端

于 2023-12-08 11:43:31 首次发布

本文链接：https://blog.csdn.net/2301_78311954/article/details/134872976

版权

文章目录

🍧一、前言
🍧二、块级元素
🍧三、行内元素
🍧四、行内块级转化
🍧五、文章总结

🍧一、前言

1、在HTML和CSS中，元素被分为两种类型：行内元素和块级元素。了解它们之间的区别对于正确掌握页面布局和样式非常重要。
2、在页面布局和样式设计中，行内元素和块级元素经常配合使用，通过设置它们的样式属性，可以实现不同的排列和布局效果。了解行内元素和块级元素的特点和区别，有助于我们更好地掌握网页的布局和样式设计。

🍧二、块级元素

HTML常见的块级元素有：

标签	作用
p	定义段落
h1~h6	定义标题
ul	定义无序列表
ol	定义有序列表
li	标签定义列表项目
div	定义文档中的分区或节
table	定义表格
dl	定义列表
dt	定义列表中的项目
dd	定义列表中定义条目

特点：
1、在默认情况下，会新起一行。
2、块级元素可以包含行内元素和其他块级元素。
3、可以设置宽度、高度、内边距、边框和外边距等盒模型属性。

由于块级元素会占据一整行，因此通常用于分隔和布局页面的不同区域，可以设置宽度和高度等盒模型属性，从而实现复杂的布局效果。

常见代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            background-color: aqua;
        }

    </style>
</head>
<body>
<p class="aa">我是块级元素</p>
<h2 class="aa">我是块级元素</h2>
<ul class="aa">
    <li>我是块级元素</li>
</ul>
<ol class="aa">
    <li>我是块级元素</li>
</ol>
<div class="aa">我是块级元素</div >
</body>
</html>

运行结果：
在这里插入图片描述

🍧三、行内元素

HTML常见的行内元素有：

标签	作用
a	标签定义超链接
span	组合文档中的行内元素
b	定义字体缩写
select	创建单选或多选菜单
strong	组合文档中的行内元素
em	定义字体倾斜
br	定义换行

特点：
1、默认情况下，不会以新行开始，其内容会在同一行上显示，直到到达该行的末尾才会换行显示。
2、一般情况下，行内元素只能包含数据和其他行内元素。
3、默认情况下，无法设置宽度和高度，除非将 display 设为除 inline 之外的某个值。

由于行内元素在默认情况下不会开始新行，因此通常用于文本内容和内联元素的排列和布局。但是行内元素无法设置宽度和高度等盒模型属性，其宽度和高度都是由它们所包含的内容决定的，因此不能实现像块级元素那样的复杂布局效果。

常见代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            background-color: aqua;
        }

    </style>
</head>
<body>
<span class="aa">我是行内元素</span>
<a class="aa">我是行内元素</a>
<b class="aa">我是行内元素</b>
<em class="aa">我是行内元素</em>
</body>
</html>

运行结果：
在这里插入图片描述

🍧四、行内块级转化

属性	作用
display: block	这将使行内元素变为块级元素，并独占一行的宽度。
display: inline	这将使块级元素变为行内元素，不再独占一行的宽度，并根据内容自动收缩宽度。
display: inline-block;	这将使元素同时具有行内元素和块级元素的特性，可以独占一行的宽度，又可以根据内容自动收缩宽度。

代码演示（将块级元素变为行内元素）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            background-color: aqua;
            display: inline;
        }
    </style>
</head>
<body>
<p class="aa">我是块级元素(p)</p>
<h2 class="aa">我是块级元素(h2)</h2>
<div class="aa">我是块级元素(div)</div>
</body>
</html>

运行结果：

在这里插入图片描述
代码演示（将行内元素变为块级元素）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            background-color: aqua;
            display: block;
        }

    </style>
</head>
<body>
<span class="aa">我是行内元素</span>
<a class="aa">我是行内元素</a>
<b class="aa">我是行内元素</b>
<em class="aa">我是行内元素</em>
</body>
</html>

运行结果：

在这里插入图片描述

🍧五、文章总结

1、盒模型：行内元素不会自动换行，而块级元素会自动换行。

2、默认宽度：行内元素的宽度由其内容决定，而块级元素的宽度默认为100%。

3、默认高度：行内元素的高度由其内容决定，而块级元素的高度默认为0。

4、可以包含的内容：行内元素只能包含文本和其他行内元素，而块级元素可以包含任何HTML元素。

5、盒模型的属性：行内元素的宽度、高度、外边距和内边距属性不会影响布局，而块级元素的这些属性会影响布局。

6、默认显示方式：行内元素默认以行内方式显示，即元素之间没有换行符，而块级元素默认以块级方式显示，即元素之间有换行符。

7、CSS布局属性的应用：行内元素不能使用width、height、margin-top、margin-bottom、padding-top、padding-bottom这些属性，而块级元素可以使用这些属性。

总之，行内元素和块级元素在外观、布局和使用属性方面有很多区别，开发者需要根据实际需求选择适合的元素类型。

L败落

关注

14
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML_行内元素和块级元素的区别? 分别有哪些?

但是行内元素无法设置宽度和高度等盒模型属性，其宽度和高度都是由它们所包含的内容决定的，因此不能实现像块级元素那样的复杂布局效果。在 HTML 5 标准前，HTML 中的元素可以分为块级元素、行内元素（又称行级元素）和行内块级元素三种类型，它们的主要区别在于它们在文档流中所占据的空间和如何与其他元素相互作用。由于块级元素会占据一整行，因此通常用于分隔和布局页面的不同区域，可以设置宽度和高度等盒模型属性，从而实现复杂的布局效果。3、可以设置宽度、高度、内边距、边框和外边距等盒模型属性。
复制链接

扫一扫