CSS display属性 – 不显示、显示表格、内联块等

分手后的思念是犯贱 2023-09-28 08:51 1阅读 0赞

在 CSS 中，display 属性决定了元素的外观。它也是 HTML 代码呈现的关键部分，因为它对布局有重大影响。

事实上，要使用现代 Flexbox 和 Grid 模型，您需要先使用 display 属性，然后才能访问它们的各种属性和值。这就是为什么 display 属性在 CSS 中如此重要的原因之一。

让我们深入了解如何使用该`display`属性及其所有不同的值。

### **基本`display`属性语法** ###

element {
            display: value;
         }

### **在 CSS 中显示属性值** ###

CSS 中有内联和块级元素。两者之间的区别在于，内联元素不会占用整个空间——也就是说，它们不会从新行开始——但块元素会。

display 属性采用许多不同的值，例如`inline`、`inline-block`、`block`、`table`等，它们都会影响网页上元素的布局和呈现。此外，要实现 flex 和 grid 布局，您需要使用 display 属性。

您可以使用此显示属性将元素更改`inline`为 ，将元素更改为`block`，将`block`元素更改为`inline`，`block`等等。`inline``inline-block`

![5f11b7ef6b971f6340ac54e27056190e.png][]

#### **`display: inline`** ####

显示属性设置为的元素`inline`不会从新行开始，它将占用剩余/可用的屏幕宽度。它只占用了这样一个元素通常会占用的空间。

因此，您不能设置显示为 的元素的`width`and ，因为它不会占用整个屏幕宽度。`height``inline`

有些元素默认是内联的，例如`<span>`, `<a>`, `<i>`, 和`<img>`.

<div>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <span>This is an inline lement</span> Modi eaque debitis eos quod labore
          maiores delectus asperiores voluptatem voluptas soluta!
    </div>

body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-size: 2rem;
          }
    div {
            max-width: 600px;
          }
    span {
            background-color: #006100;
          }

![6ade3d262e33452cb56c04e2960a0921.png][]

#### **`display: block`** ####

`block`将 display 属性设置为从新行开始并占用可用屏幕宽度的元素。

您可以为此类元素指定`width`和`height`属性。默认情况下处于块级的元素示例包括`<div>`、`<section>`、`<p>`等等。

您可以将`span`之前的 HTML 代码设置为`block`显示，它的行为类似于块级元素。

span {
            display: block;
            background-color: #006100;
          }

![349d00a6eaa32fed517441d9ca83d74b.png][]

你可以看到它`<span>`占据了整个宽度。那是因为它有一个显示属性设置为阻止。

#### **`display: inline-block`** ####

除了块和内联显示，还有内联块。

您分配显示的元素`inline-block`是按演示内联的。但它还有一个额外的优势，即您可以应用它，`width`而`height`当元素被分配一个显示时，您无法做到这一点`inline`。

因此，您可以将`inline-block`显示视为一个包中的内联元素和块元素。

span {
            display: inline-block;
            background-color: #006100;
            width: 140px;
            height: 140px;
          }

![5226db1a0a08e76b0974de3d483e07cd.png][]

#### **`display: none`** ####

当您将元素的 display 属性设置为 时`none`，该元素会完全脱离页面，并且不会影响布局。

这也意味着像屏幕阅读器这样使盲人可以访问网站的设备将无法访问该元素。

不要`display: none`与`visibility: hidden`. 后者也隐藏了元素，但留下了通常打开或空的空间。

span {
            display: none;
            background-color: #006100;
            width: 140px;
            height: 140px;
          }

![c3a16827391916f66c5630e6415b5066.png][]

Visibility hidden 使 span 元素占用的空间保持打开状态，如下所示：

span {
            visibility: hidden;
            background-color: #006100;
            width: 140px;
            height: 140px;
          }

![20ee6d4e12822fcc326f17ee108bb9f5.png][]

#### **`display: table`** ####

这些天你很少使用显示值`table`，但知道它仍然很重要。它在过去更有用，因为您会在浮动、Flex 和 Grid 出现之前将其用于布局。

将显示设置为`table`使元素表现得像一个表格。因此，您可以制作 HTML 表格的副本，而无需使用表格元素和相应的元素，例如`tr`和`td`。

例如，在 HTML 中，您可以使用`<table>`元素创建一个表格，也可以创建一个`<div>`，或您选择的任何容器。

您使用 HTML`<table>`元素制作一个表格，如下所示：

<table>
          <tr>
            <td>Fruits</td>
            <td>Lemurs</td>
            <td>Pets</td>
          </tr>
          <tr>
            <td>Cashew</td>
            <td>Hua hua</td>
            <td>Dog</td>
          </tr>
          <tr>
            <td>Apple</td>
            <td>Diadem Sifaka</td>
            <td>Cat</td>
          </tr>
          <tr>
            <td>Mango</td>
            <td>Rig-tailed</td>
            <td>Chicken</td>
          </tr>
    </table>

body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        font-size: 2rem;
    }
    
    div {
        max-width: 600px;
    }
    
    span {
        display: inline-block;
        background-color: #006100;
        width: 140px;
        height: 140px;
    }
    
    tr,
    td {
        padding: 10px;
    }

上面的 HTML 和 CSS 代码片段的结果如下所示：

![23aa15dadbc3ae88f367df87730c7f55.png][]

`<div>`但是您可以通过将相应的显示设置为 、 和 来制作与元素`table`相同`table-row`的表格`table-cell`。您将获得与如下所示相同的结果：

<div class="table">
          <div class="row">
            <div class="cell">Fruits</div>
            <div class="cell">Lemurs</div>
            <div class="cell">Pets</div>
          </div>
          <div class="row">
            <div class="cell">Cashew</div>
            <div class="cell">Hua hua</div>
            <div class="cell">Dog</div>
          </div>
          <div class="row">
            <div class="cell">Apple</div>
            <div class="cell">Diadem Sifaka</div>
            <div class="cell">Cat</div>
          </div>
          <div class="row">
            <div class="cell">Mango</div>
            <div class="cell">Ring-tailed</div>
            <div class="cell">Chicken</div>
          </div>
    </div>

你仍然得到你的桌子：

![8b58e9f1835abd45e658f6447f54044e.png][]

### **显示属性的其他值** ###

除了`inline`, `block`,`none`和`table`, 非常重要，因为它们会显着影响网页的外观，还有其他`display`值得您注意的属性值。

其中一些你会一直使用，却没有真正意识到它们也是显示属性的一部分。还有一些你根本不会经常使用的。

现在让我们来看看其中的一些。

#### **`display: flex`** ####

显示`flex`使您可以访问 Flex 布局系统，它简化了我们设计和布局网页的方式。

<div class="container">
          <div class="child">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            <span>This is an inline element</span> Modi eaque debitis eos quod
            labore maiores delectus asperiores voluptatem voluptas soluta!
          </div>
          <div class="child">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            <span>This is an inline element</span> Modi eaque debitis eos quod
            labore maiores delectus asperiores voluptatem voluptas soluta!
          </div>
    </div>

.container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-size: 2rem;
    }
        
    span {
           visibility: hidden;
           background-color: #006100;
           width: 140px;
           height: 140px;
    }
    
    .child {
           border: 2px solid crimson;
           margin: 4px;
    }

![c3cc812385e7f99f63985cba071d9bca.png][]

#### **`display: grid`** ####

显示集`grid`允许您使用网格系统构建布局，这就像 flex 的高级形式。

.container {
            display: grid;
            place-items: center;
            height: 100vh;
            font-size: 2rem;
          }
       
    span {
           visibility: hidden;
           background-color: #006100;
           width: 140px;
            height: 140px;
    }
    
    .child {
           border: 2px solid crimson;
           margin: 4px;
    }

![1decfe8e679a43bea3356f5df78290a6.png][]

#### **`display: inherit`** ####

这使得元素继承其父元素的显示属性。因此，如果您`<span>`在 div 中有一个标签，并且您给 span 标签显示`inherit`，它会将其从内联元素变为块元素。

<div>
          Lorem ipsum dolor sit amet consectetur
          <span>Inline element</span> adipisicing elit. Cumque cupiditate harum
          consectetur a exercitationem laboriosam nobis eos pariatur expedita iure.
    </div>

body {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100vh;
         font-size: 2rem;
    }
    
    span {
         display: inherit;
         background-color: crimson;
    }

![93c0844e2064f73acb86e97d46c8e5e0.png][]

#### **`display: initial`** ####

这会将元素的显示属性设置为其默认值。因此，如果您将 span 的 display 属性设置为 initial，它仍然是内联的，如果您为 div 设置相同的值，它仍然是块状的。

body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        font-size: 2rem;
    }
    
    span {
        display: initial;
        background-color: crimson;
    }

![1c27c142ef60d4e2df6284b3d257ec30.png][]

### **结论** ###

很好地掌握 display 属性将有助于您的页面布局看起来很棒。它还使您可以在使用 CSS 时更好地控制呈现元素的方式。

您也可以继续返回本文以供参考，因为 display 属性一开始总是令人困惑，直到您使用它足以完全理解它。

我希望本文为您提供了充分利用 display 属性所需的背景知识。

感谢您阅读，并继续编码。

[5f11b7ef6b971f6340ac54e27056190e.png]: https://img-blog.csdnimg.cn/img_convert/5f11b7ef6b971f6340ac54e27056190e.png
[6ade3d262e33452cb56c04e2960a0921.png]: https://img-blog.csdnimg.cn/img_convert/6ade3d262e33452cb56c04e2960a0921.png
[349d00a6eaa32fed517441d9ca83d74b.png]: https://img-blog.csdnimg.cn/img_convert/349d00a6eaa32fed517441d9ca83d74b.png
[5226db1a0a08e76b0974de3d483e07cd.png]: https://img-blog.csdnimg.cn/img_convert/5226db1a0a08e76b0974de3d483e07cd.png
[c3a16827391916f66c5630e6415b5066.png]: https://img-blog.csdnimg.cn/img_convert/c3a16827391916f66c5630e6415b5066.png
[20ee6d4e12822fcc326f17ee108bb9f5.png]: https://img-blog.csdnimg.cn/img_convert/20ee6d4e12822fcc326f17ee108bb9f5.png
[23aa15dadbc3ae88f367df87730c7f55.png]: https://img-blog.csdnimg.cn/img_convert/23aa15dadbc3ae88f367df87730c7f55.png
[8b58e9f1835abd45e658f6447f54044e.png]: https://img-blog.csdnimg.cn/img_convert/8b58e9f1835abd45e658f6447f54044e.png
[c3cc812385e7f99f63985cba071d9bca.png]: https://img-blog.csdnimg.cn/img_convert/c3cc812385e7f99f63985cba071d9bca.png
[1decfe8e679a43bea3356f5df78290a6.png]: https://img-blog.csdnimg.cn/img_convert/1decfe8e679a43bea3356f5df78290a6.png
[93c0844e2064f73acb86e97d46c8e5e0.png]: https://img-blog.csdnimg.cn/img_convert/93c0844e2064f73acb86e97d46c8e5e0.png
[1c27c142ef60d4e2df6284b3d257ec30.png]: https://img-blog.csdnimg.cn/img_convert/1c27c142ef60d4e2df6284b3d257ec30.png