HTML行内元素，块元素，行内块元素的区别

最新推荐文章于 2024-08-24 18:49:13 发布

Duaigi

最新推荐文章于 2024-08-24 18:49:13 发布

阅读量280

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_43865551/article/details/114693072

版权

前端基础类专栏收录该内容

9 篇文章 0 订阅

订阅专栏

行内元素

类型：<a>,<strong>,<b>,<em>,<del>,<span>
特点：
1. 和相邻的行内元素在一行上
2. 高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
3. 默认的宽度就是它本身的宽度
4. 行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

<!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>
        span{
            width: 100px;
            height: 300px;
            background-color: rgb(145, 145, 160);
        }
    </style>
</head>
<body>
    <a href="#">超链接</a>
    <span>这个是行内元素</span>
</body>
</html>

可以看到a标签和span标签都在一行，并且我们给span设置的宽高无效
在这里插入图片描述

块元素

类型：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>
特点：
1. 能够识别宽高
2. margin和padding的上下左右均对其有效
3. 可以自动换行
4. 多个块状元素标签写在一起，默认排列方式为从上至下

<!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>
        #box {
            width: 100px;
            height: 100px;
            margin: 20px 20px;
            background: rgb(145, 145, 160);
        }
    </style>
</head>

<body>
    <i>自动换行</i>
    <div id='box'>box1</div>
    <div id='box'>box2</div>
</body>

</html>

可以看到我们设置的宽高生效了
在这里插入图片描述

行内块元素

分类：<img/>,<input/>,<td/>
特点：
1. 不自动换行
2. 能够识别宽高
3. 默认排列方式为从左到右

<!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>
        #box {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 20px 20px;
            background: rgb(145, 145, 160);
        }
    </style>
</head>

<body>
    <i>不自动换行，从左至右排序</i>
    <div id='box'>box1</div>
    <div id='box'>box2</div>
</body>

</html>

在这里插入图片描述

相互转换

三种类型能相互转换：
　(1)display:inline;转换为行内元素

　(2)display:block;转换为块状元素

　(3)display:inline-block;转换为行内块状元素

Duaigi

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录