CSS Display(显示) 与 Visibility「可见性」

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

免责声明:本文来自互联网,本站所有信息(包括但不限于文字、视频、音频、数据及图表),不保证该信息的准确性、真实性、完整性、有效性、及时性、原创性等,版权归属于原作者,如无意侵犯媒体或个人知识产权,请来电或致函告之,本站将在第一时间处理。猿码集站发布此文目的在于促进信息交流,此文观点与本站立场无关,不承担任何责任。