零基础CSS入门教程(20)–显示类型

原创已于 2022-09-21 15:20:13 修改 · 697 阅读

2 ·

CC 4.0 BY-SA版权

未经本人允许，请勿转载本人文章

文章标签：

#css #显示类型 #盒类型

于 2021-11-10 09:12:16 首次发布

零基础CSS 专栏收录该内容

31 篇文章

订阅专栏

本文详细解析了CSS中块级元素(block)、行级元素(inline)和行内块级元素(inline-block)的区别，以及display属性如何控制元素显示类型，同时介绍了none的隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点此查看 所有教程、项目、源码导航

1. 前言

在HTML学习中，我们曾经讲过一个重要概念：块级元素div、行级元素span。它们的区别是：块级元素独占一块区域，所以后面换行；而行级元素只会占用当前行，所以后面不换行。

在上一篇文章中，我们又接触了CSS盒子模型，我们进一步了解了，在网页上，所有元素其实相当于一个盒子，会占据一定的空间。那么块级元素、行级元素，其实说的就是元素占用空间的方式，是占用一块，还是占用一行的区别。

元素占用空间的方式，用比较专业的名词来讲，就是元素的盒类型，或者说显示类型，仔细品味的话，就能发现这三种说法是一个意思。

实际上，在CSS中，我们可以通过display属性，指定元素的显示类型，直接让元素按我们想要的方式显示。

2. 块级元素block

block表示将元素设定为块级元素，也就是说单独的占用一块，这一块跟前后的元素在垂直方向是隔离的，相当于前后都有换行符。

看如下代码：

<head>
    <meta charset="utf-8">
    <style>
        .display-block {
            display: block;
            background-color: grey;
        }
    </style>
</head>

<body>
    <span>春眠不觉晓</span>
    <span class="display-block">处处闻啼鸟</span>
    <span>夜来风雨声</span>
    <span>花落知多少</span>
</body>

正常情况下， span是行级元素，前后不会换行。但是咱通过display: block;将其盒类型修改为了块级元素，所以效果如下：
在这里插入图片描述

3. 行级元素inline

inline表示将元素设置为行内元素，其实就是不换行，跟旁边的元素一个样子。

看如下例子：

<head>
    <meta charset="utf-8">
    <style>
        .display-inline {
            display: inline;
            background-color: grey;
        }
    </style>
</head>

<body>
    <span>春眠不觉晓</span>
    <div class="display-inline">处处闻啼鸟</div>
    <span>夜来风雨声</span>
    <span>花落知多少</span>
</body>

原本div是要前后换行的，此时将display设置为inline，所以div区域变为普通的行级区域，不再换行，故效果如下：
在这里插入图片描述

3. 行内块级元素inline-block

inline-block就比较稀奇了，中文名称为行内-块级元素。

具体来说，inline-block元素在整体上是一个行级元素，前后并不会换行。但是在盒子内部，却表现为一个块级元素，所以长度、高度、边距等属性可以应用到该元素上。

例如：

<head>
    <meta charset="utf-8">
    <style>
        .display-inline-block {
            display: inline-block;
            background-color: red;
            width: 100px;
            height: 20px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <span>春眠不觉晓</span>
    <div class="display-inline-block">处处闻啼鸟</div>
    <span>夜来风雨声</span>
    <span>花落知多少</span>
</body>

前后并不换行，但是在行内是作为一个块的，效果如下：
在这里插入图片描述

4. 不显示none

none比较简单了，设置为none后元素没有盒子了，所以元素不在页面中占据空间，也不再显示。例如：

<head>
    <meta charset="utf-8">
    <style>
        .display-none {
            display: none;
            background-color: grey;
        }
    </style>
</head>

<body>
    <span>春眠不觉晓</span>
    <span class="display-none">处处闻啼鸟</span>
    <span>夜来风雨声</span>
    <span>花落知多少</span>
</body>