在CSS中,`display: block;` 和 `display: inline;` 是两个不同的属性值,用于控制元素的显示方式。
- `display: block;` 将元素呈现为块级元素。块级元素会独占一行,并默认拉伸以填充其父容器的宽度。常见的块级元素包括 `<div>`、`<p>`、`<h1>` 等。
- `display: inline;` 将元素呈现为行内元素。行内元素不会开始新的行,而是尽可能地紧密排列在一行中。常见的行内元素包括 `<span>`、`<a>`、`<strong>` 等。
然而,有时候我们可能需要同时使用块级和行内的特性来显示元素。这时可以使用 `display: inline-block;` 属性值。这种属性值将元素既作为块级元素,又作为行内元素,使得元素能够排列在一行中并且具有块级元素的特性。示例代码如下:
.inline-block-element {
display: inline-block;
}
通过上面给出的代码,你可以将元素设置为既具有块级元素的特点(独占一行),又具有行内元素的特点(在一行中排列)。