提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

一文搞懂行内元素、块元素、行内块元素

元素 一文 行内
2023-09-27 14:20:14 时间

文章目录

前言

行内元素,行内块元素是html中的一个基本概念,想要进行良好的页面布局,就需要理解什么是行内元素,块元素,并理解他们如何进行转换

考

一、了解各个元素的概念

1.概念：

可以将web页面中的一行，认为是一块领地,每个标签是一个首领

行内元素:
	就是在web页面布局时可以与其他元素一块共享一行的元素
块元素：
	就是每一个元素,占有一行,即使自己的内容不够多也不让其他元素侵犯自己的底盘
行内块元素：
	块元素经过一系列转换,终于被征服,所以就变成了行内块元素,与行内元素没有了本质的区别

2.举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */
            margin: 3px;
        }
        span,p{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <span>Hello,我是行内元素</span>
    <span>Hello,我是行内元素</span>
    <p>
        我是p标签,我是块元素
    </p>
    <p>
        我是p标签，我是块元素
    </p>
</body>
</html>

3.样式展示

	如图所示,占据一行的就是块元素,一行有两块的就是行内元素

在这里插入图片描述

二、如何将块元素变为行内块元素？

1.修改css中的dispaly属性

	相对于刚才,给p标签加入了一个display: inline-block;
	就是他占据一行变为了,占据一部分。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */
            margin: 3px;
        }
        span,p{
            background-color: aquamarine;
        }
        p {
            display: inline-block;
        }
    </style>
</head>
<body>
    <span>Hello,我是行内元素</span>
    <span>Hello,我是行内元素</span>
    <p>
        我是p标签,我是块元素
    </p>
    <p>
        我是p标签，我是块元素
    </p>
</body>
</html>

图示：
在这里插入图片描述

2.在进行样式选择的时候加入浮动

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */
            margin: 3px;
        }
        span,p{
            background-color: aquamarine;
        }

        p {
           float: left;
        }
    </style>
</head>
<body>
    <span>Hello,我是行内元素</span>
    <span>Hello,我是行内元素</span>
    <p>
        我是p标签,我是块元素
    </p>
    <p>
        我是p标签，我是块元素
    </p>
</body>
</html>

图示：
在这里插入图片描述

三、将行内元素变为块元素？

1.代码示例

	使用的还是display这个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */
            margin: 3px;
        }
        span,p{
            background-color: aquamarine;
        }
        span{
            display: block;
        }
    </style>
</head>
<body>
    <span>Hello,我是行内元素</span>
    <span>Hello,我是行内元素</span>
    <p>
        我是p标签,我是块元素
    </p>
    <p>
        我是p标签，我是块元素
    </p>
</body>
</html>

2.效果展示

在这里插入图片描述

总结

清楚块元素、行内元素、行内块元素的概念,可以是我们更规范的布局,css样式表将块元素修改为行内块元素属于css知识,后续会在css专栏细说,大家在这里知道这三种元素的区别就好。

相关文章