CSS中的display属性详解

1. display 属性概述

display属性是CSS中的重要属性之一，主要用于控制元素的显示方式及其在文档流中的表现。不同的取值会影响元素的显示方式、布局特点，以及它与其他元素的交互方式。以下是一些常见的display属性值及其作用。

2. 常见的 display属性

属性值	作用
none	元素不显示，并且从文档流中移除，完全不占用空间。
block	该元素作为块级元素显示，占据一整行，可设置宽高和内外边距。
inline	该元素作为行内元素显示，宽高设置无效，多个元素同行显示。
inline-block	作为行内元素显示，但可以设置宽高，不会换行。
list-item	作为块级元素显示，同时会有列表样式标记（如圆点或数字）。
table	作为块级表格显示，类似<table>元素。
inherit	从父元素继承display属性值。

3. block、inline 和 inline-block 的区别

（1）block 元素

• 占据整行：每个块级元素都独占一行。
• 可以设置宽高：块级元素可以自由设置width和height。
• 自动换行：块级元素会自动换行，不同行的块级元素垂直排列。

（2）inline 元素

• 不独占一行：多个行内元素可以在同一行中显示。
• 宽高设置无效：行内元素无法通过CSS设置宽高属性。
• 水平边距有效：可以设置水平方向的margin和padding，但垂直方向无效。

（3）inline-block 元素

• 同一行显示：多个inline-block元素可以在同一行中显示。
• 宽高可控：可以像块级元素一样设置宽高，同时保留行内元素的特性。
• 适合布局：这种模式常用于需要既保持同行排列又需要控制宽高的场景，比如按钮、图片等。

4. display: none 与 visibility: hidden 的区别

display: none和visibility: hidden都是隐藏元素的方法，但两者在布局、继承性、以及重绘重排上有着显著区别。

（1）在渲染树中的表现

• display: none：会将元素完全从渲染树中移除，元素不占据任何空间。
• visibility: hidden：元素依然在渲染树中，只是不可见，但仍然占据布局空间。

（2）继承性

• display: none：子元素会随着父元素一同从文档流中消失，无法通过子元素单独控制显示。
• visibility: hidden：子元素继承父元素的隐藏特性，但可以通过单独设置visibility: visible来让子元素显示。

（3）性能影响

• 修改display属性会导致重排（reflow），因为元素的布局发生了变化，影响整个文档流。
• 修改visibility属性仅会导致重绘（repaint），因为只影响元素的显示状态，不改变布局。

区别点	重排（Reflow）	重绘（Repaint）
影响范围	影响页面布局，可能引起整个页面重新布局。	仅影响元素的外观，不会影响布局。
触发条件	布局相关的变化，如尺寸、位置、显示状态等。	外观相关的变化，如颜色、背景、阴影等。
性能消耗	性能开销大，尤其在复杂的布局中，可能影响整体性能。	性能开销相对较小，影响局部元素的视觉效果。