CSS display属性 | lh11223326

概述：

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

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

CSS display属性-LMLPHP

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值的两个标签他们是共处在同一行的。

CSS display属性-LMLPHP

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所以他们两个都不在同一行内显示。

CSS display属性-LMLPHP

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>

CSS display属性-LMLPHP