[分享]css中如何显示与消失

在CSS中，有两种方式可以实现元素的显示和消失，分别是隐藏和显示。/ 隐藏元素 / display: none; 使用以上代码可以实现隐藏元素的功能，被隐藏的元素将不会在页面中显示，同时也不会占用空间...

在CSS中，有两种方式可以实现元素的显示和消失，分别是隐藏和显示。

/* 隐藏元素 */
display: none; 

使用以上代码可以实现隐藏元素的功能，被隐藏的元素将不会在页面中显示，同时也不会占用空间。需要注意的是，被隐藏的元素在页面中仍然存在，可以使用JavaScript等脚本语言操作。

/* 显示元素 */
display: block/inline/inline-block; 

使用以上代码可以实现显示元素的功能，display属性可以接受三个值，分别是block、inline和inline-block。block表示元素将被显示为块级元素，占据整个父元素的宽度；inline表示元素将被显示为行内元素，只占据自己所需的宽度；inline-block则表示元素将被显示为行内块级元素，和行内元素一样只占据自己所需的宽度，但又可以设置宽度和高度。

/* 鼠标悬停显示元素 */
display: none/ block/inline/inline-block; 

CSS还提供了交互式的操作，在鼠标悬停元素上时可以显示元素，代码如上。当元素被隐藏时，在鼠标悬停上面时可以显示元素；当元素被显示时，在鼠标悬停上面时可以隐藏元素。