display:block

"display:block" is a CSS property used to define how an element should be displayed on a web page.

When "display:block" is applied to an element, it means that the element will take up the full width of its parent container and will start on a new line. This is in contrast to "display:inline" which will make an element take up only the space it needs and will not start on a new line.

Examples of elements that may use "display:block" include headings, paragraphs, and divs. It is often used to create visual separation between elements on a page.

相关问题

display: block

`display: block` 是 CSS 中一个常用的属性，它用来指定元素应该生成一个块级元素的框。当设置了 `display: block` 后，元素会独占一行，宽度默认为其父元素的100%。

当一个元素设置了 `display: block` 后，下一个元素会换行且与当前元素垂直方向对齐。例如，下面的代码会将三个链接元素垂直排列：

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

如果希望实现水平排列，可以将其设置为 `display: inline-block`，如下所示：

<a href="#" style="display: inline-block;">Link 1</a>
<a href="#" style="display: inline-block;">Link 2</a>
<a href="#" style="display: inline-block;">Link 3</a>

这样，链接元素就可以水平排列了。

display: block属性阻止flex-direction生效。 请尝试将display: block属性设置为display: flex。

当我们把元素的display属性设置为block时，会阻止flex-direction属性生效。这是因为display属性同时只会生效一个，当我们将display设置为block时，flex布局失效。为了解决这个问题，我们可以将display属性设置为flex，而不是block。这样，元素既能显示出来，又能保持flex布局的效果。

因此，将display: block属性设置为display: flex可以解决这个问题。这样，我们可以同时实现元素的显示和flex布局的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [display: block和display: flex一块用出现的问题](https://blog.csdn.net/qq_42890921/article/details/129099809)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [详解CSS中的display:flex||inline-flex属性](https://download.csdn.net/download/weixin_38501751/12891643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [display: block 属性影响flex布局](https://blog.csdn.net/m0_65491952/article/details/132038572)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]