元素的显示与隐藏

本质：让一个元素在在页面中隐藏或者显示出来。

CSS可以实现元素隐藏和显示的属性

1：display属性

  • display: none; 隐藏对象

  • display: block;除了转换为块级元素之外，还有显示元素的意思

注意：display隐藏元素之后，不再占有原来的位置

2.visibility属性

  • visibility: visible; 元素可视

  • visibility: hidden; 元素隐藏

注意：visibility隐藏元素后，继续占有原来的位置

3.overflow属性（溢出内容的显示与隐藏）

overflow: visible | hidden | scroll | auto

1、属性值具体说明见下表：

属性值 说明
visible 不剪切内容，也不添加滚动条
hidden 隐藏超出的部分
scroll 不管内容是否超出，都显示滚动条
auto 只有内容超出时才显示滚动条，不超出则不显示

4、opacity属性

  • opacity: 0; 隐藏元素

  • opacity: 1; 显示元素

opacity属性的意思是检索或设置对象的不透明度。当他的透明度为0的时候，视觉上它是消失了；但是他依然占据着那个位置，并对网页的布局起作用。

注：添加了opacity属性的元素，它的背景和元素内容也是会跟着变化的。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。