在网站上经常会有一些需要一定操作才会显示或隐藏的元素，这时会用到元素的隐藏与显示。主要通过以下三种属性实现。
1、display ：none|block |inline |inline-block
display常用以上四个属性值，none 是元素隐藏，且不占有位置。block 除了转换为块级元素之外，同时还有显示元素的意思。inline 和inline-block 分别是显示为行内元素和行内块元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; margin: 0; } div:first-child { background-color: aqua; } div:nth-child(2) { background-color: red; display: none; } div:last-child { background-color: pink; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
可以发现红色的div 消失且不占有位置，粉色的自动补上去。
2、visibility: hidden|visible
visibility 隐藏时原有的位置还会占有，不会消失
将1中的display：none ； 改为 visibility: none;结果如下图所示
可以发现红色额的div 虽然消失了，但是原有的位置还是占有的。
3、overflow: visible | auto | hidden | scroll
overflow只要是用来对超出盒子指定大小的内容做处理。
visible 是默认值，及不剪切内容也不添加滚动条。
auto 是有超出部分就添加滚动条，没有超出的部分就不添加滚动条。
hidden 是超出的部分被剪切，不显示。
scroll 是不管内容有没有超出大小，都添加滚动条。