CSS学习15--元素的显示与隐藏

本文主要是介绍CSS学习15--元素的显示与隐藏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

元素的显示与隐藏

前言
一、display显示
二、visibility可见性
三、overflow溢出

前言

CCS中有三个显示和隐藏的单词比较常见，分别是display visibility和overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告。

一、display显示

display设置或者检索对象是否以及如何显示。使用更多！

display: none; 隐藏对象，与它相反的是display: block; 除了转换为块级元素还有显示元素的意思。

特点：隐藏之后不保留位置。

二、visibility可见性

设置或检索是否显示对象。

visible: 对象可见
hidden: 对象隐藏

特点：隐藏之后，保留原有位置。

例一：鼠标经过显示二维码

<html>
<head><style>div {width: 200px;height: 200px;background-color: pink;text-align: center;line-height: 50px;    }div:first-child {display: none;/*隐藏元素，看不见但是存在代码但不保留位置*/display: block;visibility: hidden;/*隐藏元素，与display：none最大的区别是它保留位置*/visibility: visible;position: relative;}div:last-child {background-color: purple;}div img {position: absolute;left: 100px;top: 0;display: none; /*隐藏二维码*/}div:hover img{display: block; /*显示元素*/}</style>
</head>
<body><div>扫二维码<img src="#.png" alt="wu"></div><div></div>
</body>
</html>

例二：下拉菜单

<html>
<head><style>* {margin: 0;padding: 0;}ul {list-style: none;}div {width: 200px;height: 200px;background-color: pink;position: relative;}div ul {position: absolute;left: 0;top: 0;display: none; /*隐藏元素*/}div:hover ul{display: block; /*显示元素*/margin-top: 20px;}</style>
</head>
<body><div>here<ul><li>1</li><li>2</li><li>3</li></ul></div>
</body>
</html>