CSS显示属性--无显示、表显示、内联块等介绍

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

事实上，要使用现代的Flexbox和Grid模型，你需要在访问它们的各种属性和值之前使用显示属性。这就是为什么显示属性在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 ，以及更多。

display: inline

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

正因为如此，你不能设置一个显示为inline 的元素的width 和height ，因为它不会占用整个屏幕宽度。

有些元素默认是内联的，比如<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;
      }

display: block

一个将显示属性设置为block 的元素会在新的一行开始，并占用可用的屏幕宽度。

你可以为这类元素指定width 和height 属性。默认处于块级的元素的例子有：<div>,<section>,<p>, 以及更多。

你可以把前面的HTML代码中的span 设置为block 显示，它的行为就像一个块级元素:

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

你可以看到，<span> 占据了整个宽度,这是因为它的显示属性设置为块:

display: inline-block

除了block和inline display之外，还有inline-block。

你指定显示为inline-block 的元素是内联显示。但它有一个额外的好处，就是你可以对它应用width 和height ，而当这个元素被分配到一个dispaly为inline ，你就不能这样做了。

所以，你可以把inline-block 显示看成是一个内联元素和块元素的组合:

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

display: none

当你把一个元素的display属性设置为none ，这个元素就完全脱离了页面，它不会对布局产生影响。

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

不要把display: none 和visibility: hidden 混淆。后者也隐藏了该元素，但它通常占用的空间是开放或空的:

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

隐藏的可见性使span元素占用的空间开放，正如你在下面看到的:

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

display: table

现在你很少会用到table ，但知道这个值仍然很重要。它在过去更有用，因为在浮动、Flex和Grid出现之前，你会把它用于布局。

将display设置为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代码片断的结果是这样的:

但你也可以用<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>

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;
}

.table {
   display: table;
}

.row {
   display: table-row;
}

.cell {
   display: table-cell;
}

.row,
.cell {
  padding: 10px;
}

你仍然可以得到你的表格:

显示属性的其他值

除了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;
}

display: grid

显示设置为grid ，可以让你用网格系统建立布局，这就像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: 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;
}

display: inherit

这使得该元素继承了它的父元素的显示属性。因此，如果你在一个div里面有一个<span> 标签，而你给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;
}

display: initial

这将一个元素的显示属性设置为其默认值。因此，如果你将span的显示属性设置为initial，它就保持内联，如果你为div设置同样的值，它就保持块状:

<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: initial;
    background-color: crimson;
}

总结

熟练掌握 display 属性将有助于你的页面布局看起来很棒。它还能让你在使用CSS时对元素的呈现方式有更多的控制。

你也可以继续回过头来看这篇文章，因为显示属性一开始总是令人困惑的，直到你用得足够多，完全理解它。

我希望这篇文章能给你提供你所需要的背景知识，以便好好利用display属性。

谢谢你的阅读，并继续编码。