HTML块级元素和行内元素，行内块元素(通俗易懂)

于山上之明月

已于 2023-12-22 21:06:24 修改

阅读量3.5k

点赞数 38

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

于 2023-12-07 20:28:44 首次发布

本文链接：https://blog.csdn.net/sjs52406/article/details/134863693

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

✨前言✨
本篇文章主要讲解一下html标签中的块级元素，主要包括块级元素的概念、作用、特点，还有就是块级元素有哪些标签等内容。

🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

🍎一，块级元素

块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。

通常有这几个特点：

独占一行
可以设置宽度，高度，margin,padding
宽度默认所在容器的宽度。
可以容纳内联元素和块级元素
注意

一些文字级标签不能放块元素。例如：

<p>，<h1>~<h6>，<dt>

常见的块级元素：

标签	作用
table	定义表格
h1 ~ h6	定义标题
hr	定义一条水平线
p	定义段落
li	标签定义列表项目
ul	定义无序列表
ol	定义有序列表
dd	定义列表中定义条目
div	定义文档中的分区或节
dl	定义列表
dt	定义列表中的项目
form	创建 HTML 表单
caption	定义表格标题
address	定义地址
fieldset	定义一个框架集

常用标签代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blocks{
            /*使用内部样式,设置一个背景颜色*/
            background-color: #B4E2FB;
        }
    </style>
</head>
<body>
<p class="blocks">我是p 我是块级元素</p>
<h1 class="blocks">我是h1 我是块级元素</h1>
<div class="blocks">我是div 我是块级元素</div>
<ul class="blocks">我是ul 我是块级元素</ul>
<ol class="blocks">我是ol 我是块级元素</ol>
<dl class="blocks">我是dl 我是块级元素</dl>
<li class="blocks">我是li 我是块级元素</li>
</body>
</html>

浏览效果：

在这里插入图片描述

🍎二，行内元素

行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。

通常有这几个特点：

与其他行内元素并排
设置宽高无效
默认的宽度就是文本内容的宽度
水平方向的 padding 和 margin 属性可以使用。
只能容纳文本级元素和内联元素
注意：

a 标签可以放块级元素，但是连接里面不能再放连接

常见的行内元素：

标签	作用
a	标签定义超链接
span	组合文档中的行内元素
br	定义换行
select	创建单选或多选菜单
abbr	表示一缩写形式
acronym	定义只取首字母缩写
b	定义字体缩写
bdo	可覆盖默认的文本方向
big	定义大号字体加粗
code	定义计算机代码文本
label	标签
small	定义小号字体

常用标签代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .inlines{
            /*使用内部样式,设置一个背景颜色*/
            background-color: #B4E2FB;
        }
    </style>
</head>
<body>
<a class="inlines">我是a 我是行内元素</a>
<span class="inlines">我是span 我是行内元素</span>
<label class="inlines">我是label 我是行内元素</label>
<select class="inlines">我是select 我是行内元素</select>
</body>
</html>

浏览效果：

在这里插入图片描述

🍎 三，行内块元素

行内块元素从文字上看像块级元素和行内元素结合似的，其实比较特殊，可以设置宽高属性，这种就称为行内块元素。

比如：

<input>，<img>

通常有这几个特点：

默认宽度是内容宽度
宽度，高度，行高，margin,padding 都可以设置
和行内元素同一行，之间会留白。

代码样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .inlines{
            /*使用内部样式,设置一个背景颜色*/
            background-color: #B4E2FB;
            /*设置宽*/
            width: 100px;
            /*设置高*/
            height: 100px;
        }
    </style>
</head>
<body>
<img src="img.png" class="inlines">我是td 我是行内块元素</img>
</body>
</html>

浏览效果：

在这里插入图片描述

🍎 四，块级元素和行内元素的转换

display 属性

通过 display 属性转换，其中 display 有三个值：

inline:
- 值为 inline 将变成行内元素，比如 div
- 不能设置宽高，和行内元素并排
block:
- 值为 block 的，比如 span
- 能设置宽高（填充父级），独占一行。
inline-block
- 值为 inline-block 也就是变成行内块元素

代码演示：

小练习：这是我们将< div >变为行内元素，吧< span >变为块级元素，在让它们都变为行内块元素

1，首先都给他们一个背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    使用内部样式设置背景颜色-->
  <style>
    .color{
    <!-- 设置一个背景颜色 -->
      background-color: #B4E2FB;
    }
  </style>
</head>
<body>
<!--代码书写区域-->
<div class="color" id="div">我是div</div>
<br>
<span class="color" id="span">我是span</span>

</body>
</html>

浏览效果：

在这里插入图片描述

2，使用display 属性转换行内，块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    使用内部演示设置背景颜色-->
  <style>
    .color{
      background-color: #B4E2FB;
    }
    #div{
        /*转化为行内元素*/
        display: inline;
    }
    #span{
        /*转化为块级元素*/
        display: block;
    }
  </style>
</head>
<body>
<!--代码书写区域-->
<div class="color" id="div">我是div</div>
<br>
<span class="color" id="span">我是span</span>

</body>
</html>

浏览效果：

在这里插入图片描述

3，使用display 属性转换行内块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    使用内部演示设置背景颜色-->
  <style>
    .color{
        /*设置背景颜色*/
        background-color: #B4E2FB;
        /*设置宽*/
        width:100px;
        /*设置高*/
        height: 100px;
    }
    #div{
        /*转化为行内元素*/
        display: inline-block;
    }
    #span{
        /*转化为块级元素*/
        display: inline-block;
    }
  </style>
</head>
<body>
<!--代码书写区域-->
<div class="color" id="div">我是div</div>
<br>
<br>
<span class="color" id="span">我是span</span>

</body>
</html>