第一种：display：none
特点：不占据屏幕空间
显示：display：block
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {width: 200px;height: 200px;background-color: lightblue;}.two {width: 80px;height: 80px;background-color: lightcoral;display: none;}.three {width: 80px;height: 80px;background-color: lemonchiffon;}</style> </head><body><div class="one"><div class="two"></div><div class="three"></div></div> </body></html>隐藏前：
隐藏后：
第二种：visibility：hidden
特点：仍然占据屏幕空间
显示：visibility：visible
执行前：
第三种：opacity：0
可取值：0~1
特点：仍然占据屏幕空间
显示：opacity：1
隐藏前：
第四种：overflow：hidden（在父元素添加）
特点：将超出父元素的内容隐藏
<style>div {width: 100px;height: 100px;background-color: antiquewhite;/* 4、使用overflow隐藏元素 ——将超出父元素的内容隐藏 */overflow: hidden;}</style> </head><body><!-- 面试题 --><div>我是div标签<br>我是div标签<br>我是div标签<br>我是div标签<br>我是div标签<br>我是div标签<br>我是div标签<br></div></body>隐藏前：
隐藏后：
以滚轮显示隐藏部分：
