---

CSS display 属性

CSS 的 display 属性可以控制元素的显示方式，常见的属性取值包括 block，inline，inline-block，none 等。不同的取值决定了元素在文档流中的行为，比如是否允许其他元素与之并列，是否自动换行等。

常见取值及其作用

block

该元素会以块级元素（block）的形式展现，即从上到下独占一行。它会自动换行，并且可以设置宽度、高度等样式。

常见的块级元素包括 div、p、h1-h6、ul 等。

inline

该元素为行内元素（inline），不会独占一行，如果宽度够小，多个行内元素会并列在一行中。此外，它的高度、宽度、外边距等无法用 CSS 直接设置。

常见的行内元素包括 span、a、img、input 等。

inline-block

该元素为行内块级元素，它既可以像行内元素那样并列在一行中，也可以像块级元素那样设置高度、宽度等样式，且自动换行。

none

该元素完全不会被显示出来，相当于从文档流中移除。该属性经常用于实现 JavaScript 的显示或隐藏功能。

display 对 visibility 的区别

display 属性和 visibility 属性都可以控制元素的显示或隐藏，但是它们的行为有所不同：

• display:none; 会使元素完全从文档流中移除，不再占用空间。visibility:hidden; 则只是将元素的可见性变为 hidden，元素仍然存在于文档流中，可以通过 DOM 操作显示出来。
• 被设置 display:none; 的元素在页面中不会留下空白，但是被设置 visibility:hidden; 的元素会留下空白。

可以看到，display 属性比 visibility 属性的更加“彻底”，但在某些情况下，使用 visibility 属性更加方便和合适。

display 和伪元素

display 属性还和伪元素有一些关系：

• 通过设置 display:none;，可以实现伪元素的显示或隐藏。
• 一些伪元素在特定的显示属性下才能生效，比如 ::before 和 ::after 伪元素只有在设置 display: block; 或者 display: inline-block; 时才能生效。而当设置为 display: none; 时，它们就无法被渲染出来。

总结

display 属性控制元素在文档流中的行为，常见的取值有 block、inline、inline-block 和 none 等，它们的作用和行为有所不同，根据实际需求进行选择。此外，注意 display 对 visibility 和伪元素的影响。理解 display 属性的作用和使用，可以更加灵活、准确地控制页面元素的布局和显示效果。