CSS Display Block

CSS中的display属性控制着元素的显示方式。它对于我们的HTML代码如何呈现也很重要，因为它极大地影响着布局。

CSS中的Display属性决定了组件（div、超链接、header等）在网页上的位置。顾名思义，此属性控制着网页的各种组件如何显示。

在访问现代Flexbox和Grid模型的许多特性和值之前，我们必须使用display属性。CSS中display属性的重要性在一定程度上也归因于此。

让我们开始探索show属性的各种值。

基本Display属性的语法

CSS Display属性的值

在CSS中，有块级元素和内联元素。两者之间的主要区别在于，块级元素从新行开始，而内联元素则不，只占据可用空间的一部分。

元素在网站上的样式和表现受display属性的多种可能值的影响，包括inline、inline-block、block、table等。此外，您必须使用display属性来构建flex和grid布局。

此display属性可用于将内联元素转换为块级元素，将块级元素转换为内联元素，将块级和内联元素转换为inline-block元素，以及更多其他操作。

CSS的Display值

以下CSS display值是最受欢迎的。

1. display: inline;
2. display: inline-block;
3. display: block;
4. display: run-in;
5. display: none;

Display: inline

当元素的display属性设置为inline时，元素不会在新行开始，并会占用所有可用的屏幕空间。它只占用该元素通常会占用的空间。

由于它不占据整个屏幕宽度，因此具有inline显示的元素无法指定其宽度和高度。

某些元素，如<span>、<a>、<i>和<img>，默认是inline的。

输出

Display: block

当display属性设置为block时，元素从新行开始，并占据所有可用的屏幕宽度。

对于这些元素，我们可以设置它们的宽度和高度参数。<div>、<section>、<p>等许多元素是默认的块级元素。

如果我们为前面HTML代码中的span元素设置block display，它将表现得像一个块级元素。

输出

Display: inline-block

除了block和inline显示外，还有一个inline-block。

您赋予inline-block显示的元素在表现上是inline的。但是，它还有一个额外的优点，即允许您应用宽度和高度，而当元素具有inline显示时，您无法做到这一点。

因此，inline-block显示可以被看作是inline和block元素的组合。

输出

Display: none

当您将元素的display属性设置为none时，该元素将从页面上消失，而不会影响布局。

这也意味着像屏幕阅读器这样的软件，它们能帮助盲人浏览网页，将无法访问该元素。

不要将display: none与visibility: hidden混淆。后者也会隐藏元素，但会留下该元素通常占据的空间为空或空白。

输出

正如您在下面所看到的，visibility: hidden 会留下主元素所占据的空间。

输出