CSS 显示属性

对象的显示属性决定了浏览器如何呈现它。

这是一个非常重要的属性，并且可能具有您可以使用的最多值。

这些值包括：

• block
• inline
• none
• contents
• flow
• flow-root
• table（以及所有那些table-*）
• flex
• grid
• list-item
• inline-block
• inline-table
• inline-flex
• inline-grid
• inline-list-item

还有一些你不太可能使用的特质，比如ruby。

选择这些元素中的任何一个都会极大地改变浏览器关于该元素及其子元素的行为。

在这篇文章中我将分析其他地方没有提到的最重要的几点：

• block
• inline
• inline-block
• none

内联

Inline 是 CSS 中每个元素的默认显示值。

所有 HTML 标签均在框架外内嵌显示，除了由用户代理（浏览器）设置为块的某些元素（例如 div、p 和section）之外。

内联元素没有应用边距或填充。

高度和宽度也是如此。

您可以添加它们，但页面的外观不会改变 - 浏览器会自动计算并使用它们。

内联-block

与内联类似，但内联块的宽度和高度将按照您指定的方式使用。

block

如前所述，元素通常以内联方式显示，但也有一些例外，包括

• div
• p
• 节
• ul

默认阻止浏览器。

显示：block时，元素一个接一个垂直堆叠，每个元素占据页面的 100%。

如果设置宽度和高度以及边距和填充属性，则会考虑分配给它们的值。

无

block

inline

inline-block

none 使用 display: none 使元素消失。它仍然是 HTML 格式，只是在浏览器中不可见。