CSS Display与Visibility的区别
CSS Display与Visibility是两个常用的CSS属性，它们的主要作用都是控制元素的可见性，但是它们的实现方式有所不同。下面我们将详细介绍这两个属性的用法和区别。
1. Display（显示）
Display属性用于控制元素的显示方式。它有多种属性值，每种属性值决定了元素的表现形式。下面介绍几种常用属性值：
1）block
任何标签都可以设置为block元素，即块级元素，它默认占据整个可用父容器的宽度。通常用于布局元素，如<div>和等。
2）inline
Inline属性使元素变为行内元素，并且它只会占据必要的宽度，不会占据整个父容器的宽度。通常用于文本元素，如<span>和<a>等。
3）none
None属性使元素消失，不占据任何空间。通常用于动态控制可见性，如hover和click等。
示例代码：
/* div和p元素都是块级元素 */
div {
display: block;
}
p {
display: block;
}
/* span和a元素都是行内元素 */
span {
display: inline;
}
a {
display: inline;
}
/* 控制可见性 */
button.hidden {
display: none;
}
2. Visibility（可见性）
Visibility属性用于控制元素的可见性。它有两个属性值：visible和hidden。其中，visible表示元素可见，hidden表示元素不可见。与Display属性不同的是，Visibility隐藏元素时仍保留其原来的空间，因此Visibility的隐藏方式不会影响页面的布局。通常用于控制动态交互效果的可见性。
示例代码：
/* 元素可见 */
div.visible {
visibility: visible;
}
/* 元素不可见 */
div.hidden {
visibility: hidden;
}
3. Display与Visibility的区别
虽然Display和Visibility都可以控制元素的可见性，但它们的实现方式有所不同。主要区别如下：
1）可见性不会影响元素的布局，而显示方式会影响元素的布局。
2）可见性隐藏的元素仍占据空间，显示方式隐藏的元素不占据空间。
3）可见性隐藏方式常用于动态交互效果的实现，显示方式隐藏常用于布局实现。
因此，在选择使用哪种方式隐藏元素时，需要根据实际需求来选择。如果要实现动态交互效果，并不需要改变元素的布局，那么可以选择使用Visibility属性来隐藏元素；如果要隐藏的元素对页面布局有影响，那么可以使用Display属性来隐藏元素。
参考：
CSS Display属性：https://www.w3school.com.cn/cssref/pr_class_display.asp
CSS Visibility属性：https://www.w3school.com.cn/cssref/pr_class_visibility.asp