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

The CSS property `display: block` is used to set the display behavior of an element to a block-level element. This means that the element will take up the full width of its parent container and will start a new line after it. Block-level elements are used for larger sections of content such as paragraphs, headings, and lists.

Example:

<div style="display: block;">
  This is a block-level element.
</div>

In this example, the `div` element is set to `display: block`, which means it will take up the full width of its parent container and start a new line after it. The text inside the `div` is a block-level element as well, since it is contained within a block-level element.

display: block和display: flex 的区别

`display: block` 和 `display: flex` 是两种不同的 CSS 属性值，它们用于控制 HTML 元素的布局。

`display: block` 用于将元素渲染为块级元素，每个块级元素会独占一行，可以设置宽度、高度、内边距和外边距等属性。常见的块级元素有 `div`、`p`、`h1` ~ `h6` 等。

`display: flex` 用于将元素渲染为一个弹性容器，它可以通过 `flex-direction` 属性来控制子元素的排列方向，可以通过 `justify-content` 和 `align-items` 属性来控制子元素的水平和垂直对齐方式，还可以通过 `flex-wrap` 属性来控制子元素的换行方式。常见的弹性容器元素有 `div`。

总的来说，`display: block` 将元素渲染为块级元素，而 `display: flex` 将元素渲染为一个弹性容器，可以更灵活地控制子元素的布局。