CSS display属性

news2025/2/25 21:14:48

概述：

设置display示例：

none：

block：

inline：

inline-block ：

概述：

在CSS中我们可以使用display属性来控制元素的布局，我们可以通过display来设置元素的类型。

在不设置的时候很多元素都有对应的display属性值，如常见的它默认的display属性就是block(块元素)，还有默认的display属性是inline(行内元素)，我们可以使用display属性来设置元素。其display属性的可选值如下：

值	说明
none	隐藏元素。
block	将元素设置为块级元素。
inline	将元素设置为内联元素。
list-item	将元素设置为列表项目。
inline-block	将元素设置为行内块元素。
table	将元素设置为块元素的表格(类似<table>)。
inline-table	将元素设置为内联元素的表格(类似<table>)。
table-caption	将元素设置为表格的标题(类似<caption>)。
table-cell	将元素设置为表格的单元格(类似<td>和<th>)。
table-row	将元素设置为表格的行(类似<tr>)。
table-row-group	将元素设置为表格的内容部分(类似<tbody>)
table-column	将元素设置为表格的列(类似<col>)。
table-column-group	将元素设置为表格中一个或者多个列的分组(类似<colgroup>)。
table-header-group	将元素设置为表格的头部(类似<thead>)。
table-footer-group	将元素设置为表格的脚(类似<tfoot>)。
box	CSS3新增的属性，表示将对象设置为弹性伸缩盒。（伸缩盒的最老版本）
inline-box	CSS新增的属性，表示将对象设置为内联元素的弹性伸缩盒.（伸缩盒的最老版本）
flexbox	CSS3新增的属性值，表示将对象设置为弹性伸缩盒。（伸缩盒的过渡版本）
inline-flexbox	CSS3新增的属性，表示将对象设置为内联元素级的弹性伸缩盒。（伸缩盒的过渡版本）
flex	CSS3新增的属性，表示将对象设置为弹性伸缩盒。（伸缩盒的最新版本）
inline-flex	CSS3新增的属性，表示将对象设置为内联元素级的弹性伸缩盒。（伸缩盒的最新版本）
run-in	根据上下文来决定将元素设置为块级元素或内联元素。
inherit	从父元素中继承对display属性的设置。

上述所指的伸缩盒子是CSS3中引入一种布局模式，引入伸缩盒子的目的是为了更好的对页面中的元素进行排列，对齐和分配空间，弹性布局可以让元素在不同大小的屏幕之中更合适的显示。初识CSS-CSDN博客 CSS盒模型(详讲)-CSDN博客 0基础看这一篇就够了HTML教程(详细汇总)_php代码格式-CSDN博客

设置display示例：

none：

如下是none值的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            background-color: red;
        }

        .none {
            display: none;
        }
    </style>
</head>

<body>
    <p class="none">123456789</p>
    <p>987654321</p>

</body>

</html>

可以看到我们有两个标签，而其中一个标签display的值为none(隐藏)，此元素就不在页面中显示了。而没有设置的none的依旧显示。又因为绝大多数元素基本都会显示在页面中，所以大部分元素的display并不是none。

block：

block(块级元素)特点如下：

独占一行。
默认的宽度跟父元素相同。
可以设置margin(外边距)和padding(内边距)的宽高。

元素display值为block的示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .block {
            display: block;
            background-color: red;
        }

        .spancolor1 {
            background-color: aqua;
        }

        .spancolor2 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <span class="block">span这原本是个内联元素被设置成了block</span>
    <span class="spancolor1">1号span这个才是它本来的样子</span> <span class="spancolor2">2号span他两是共处一行的</span>
</body>

</html>

block块级元素，最明显的特征就是独占一行。在CSS中的display属性默认是inline(内联元素)，我们可以将其设置为块级元素，如下图中第一个标签就被设置为块级元素可以明显看到它是独占一行的(占满此行)，而原本没有设置block值的两个标签他们是共处在同一行的。

inline：

inline(内联元素)其特征如下：

不能设置宽高。
不独占一行，在一行内显示。
内边距只左，右，下有用，外边距只左，右有用

元素display值为inline的示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inline1 {
            display: inline;
            background-color: red;
        }

        .inline2 {
            display: inline;
            background-color: rgb(34, 186, 138);
        }

        .pcolor {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <p class="inline1">p这原本是个块级元素被改成了inline</p>
    <p class="inline2">这个p标签也被display值也被设置成了inline</p>
    <p class="pcolor">这就是p本来的样子</p>
    <p>也是独占一行</p>
</body>

</html>

在CSS中标签的display的默认值为block(块级元素) ，上述代码中把前两个标签设置为inline(内联元素)元素，也就是说这两个标签不再独占一行，导致两个都在同一行内显示。最后两个标签都是没有对display属性，因为标签的默认属性是block所以他们两个都不在同一行内显示。

inline-block ：

inline-block(行内块元素)特点如下所示：

可以设置宽高。
都显示在一行以内。
默认宽高为内容的宽高。

元素display为inline-block的示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .divspan {
            display: inline-block;
            background-color: red;
        }

        .divp {
            display: inline-block;
            background-color: aqua;
        }

        div {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div>
        紫色都是div之内
        <span class="divspan">span行内块元素</span>
        <p class="divp">p行内块元素</p>
    </div>
    <p class="p" style="background-color: aquamarine;">不在div之内的一个块级元素</p>
    <span style="background-color:bisque">一个内联元素</span>
</body>

</html>