CSS | 显示属性

在 CSS 中，display 属性常常被用来控制一个 HTML 元素的显示方式。通过修改 display 属性，我们可以让元素以不同的方式呈现，比如是块级元素还是行内元素，或者干脆不显示。

基本语法

display 属性的基本语法如下：

selector {
    display: value;
}

其中，selector 是要修改显示方式的 HTML 元素的选择器，value 是要改变的显示方式。

值

CSS 中 display 属性可以接受多个可选的值，这里我们罗列一些常用的值：

none

将元素隐藏。与 visibility: hidden; 不同之处在于，使用 display: none; 隐藏的元素会占据更少的空间。

selector {
    display: none;
}

block

将元素显示为块级元素。块级元素会占用一行，并且可以设置宽度和高度。

selector {
    display: block;
}

inline

将元素显示为行内元素。行内元素不会独占一行，只占据需要的宽度和高度。

selector {
    display: inline;
}

inline-block

将元素显示为行内块元素。行内块元素不会独占一行，但可以设置宽度和高度。

selector {
    display: inline-block;
}

flex

将元素显示为弹性盒子。弹性盒子是一种可以轻松地实现自适应布局的容器。

selector {
    display: flex;
}

grid

将元素显示为网格容器。网格容器也是一种可以轻松地实现自适应布局的容器。

selector {
    display: grid;
}

小结

display 属性是 CSS 中一个常用的、重要的属性。通过修改 display 属性，我们可以控制 HTML 元素的显示方式，实现丰富多样的布局效果。