---

CSS Display与Visibility

在CSS中，Display和Visibility是用来控制元素在页面中显示方式和可见性的属性。这两个属性虽然在表面上看似乎有一些相似之处，但实际上它们有着截然不同的用途和效果，下面将分别介绍这两个属性的用法、特点以及常见的应用场景。

Display

Display属性用来定义一个元素在页面中的布局方式以及外观属性，常见取值如下：

• block: 元素会以块级元素展示，即默认会占据一行的整个宽度，并且可以在内部设置margin、padding等属性。

• inline: 元素以内联方式展示，即不会换行，只占据必要的宽度并和文字在同一行中。

• inline-block: 包含inline和block两种属性的特点，既可以设置元素的宽高，也可以同行排列。

• none: 元素不会在页面中显示，占据的空间也会被移除，因此该元素的其他属性效果也不会被渲染到页面上。

Display属性常见的应用场景包括：

• 实现响应式布局，根据不同屏幕大小，显示不同的布局方式、界面元素。

• 隐藏元素，在需要时显示出来，只占据必要的布局空间。

Visibility

Visibility属性用来定义元素在页面中是否可见，常见取值如下：

• visible: 元素在页面中可见。

• hidden: 元素在页面中不可见，但仍会占据其布局空间。

• collapse: 用于表格元素，将一个表格行或列隐藏掉，与hidden的区别是不会占据布局空间。

Visibility常见的应用场景包括：

• 安全性考虑，在页面中隐藏一些敏感信息，在需要时显示出来。

• 控制用户界面流程，在特定的条件下，暂时隐藏某些操作按钮或者其他交互元素。

区别和联系

总体来看，Display和Visibility都是用来控制页面元素在视觉和布局上的效果。但两者的区别主要体现在以下方面：

• Display更加关注元素在可见状态下的是以怎样的方式进行布局排版，而Visibility则更加关注在不可见状态下元素所占据的布局空间。

• Display使用none值后，元素会被完全从页面中移除；而Visibility使用hidden值后，元素虽然不可见，但占据的空间不会消失。

• Display提供了inline-block这种既有块元素属性又有内联属性的特殊取值，而Visibility没有类似的组合取值。

在一些特定的页面布局、元素隐藏、用户交互场景中，Display和Visibility可以根据实际需要进行灵活的组合和应用，从而产生不同的视觉和交互效果。

总之，对于开发人员来说，Display和Visibility这两个属性是页面布局和元素控制中非常重要的工具，理解其用法和取值范围可以让开发更加高效和精准，同时也能够带来更好的用户体验和界面效果。