display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
登录后复制
特点： display 隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：
配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
二、visibility 可见性 （了解）
visibility 属性用于指定一个元素应可见还是隐藏。
visibility：visible 元素可视
visibility：hidden 元素隐藏
登录后复制
特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）
如果隐藏元素想要原来位置， 就用 visibility：hidden
如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）
三、overflow 溢出（重点）
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。
四、显示与隐藏总结
属性 区别 用途
display 显示 （重点） 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 可见性 （了解） 隐藏对象，保留位置 使用较少
overflow 溢出（重点） 只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围
css
javascript
1、新建一个html文件，命名为test.html。
2、在test.html文件内，使用ul li创建一行列表，在li标签里面使用a标签创建一个文字链接。
3、在a标签的下面，创建一个div模块，在div内写上测试的文字。代码如下。
4、在test.html文件内，创建css标签，在css内初始化页面所有元素样式，设置内外边距都为0 。
5、使用css设置div隐藏（display:none），并且设置div内的文字颜色为红色（color:red）。
6、使用css设置li的hover属性，实现当鼠标放在li标签内的a链接上面时，通过把div的display属性设置为block，把div显示出来。
7、在浏览器打开test.html文件，查看实现的效果。
有的时候总是会碰到稀奇古怪的需求，像现在就有一个判断条滚动时显示，不滚动时隐藏的。按照一般的滚动条显示隐藏需求，基本上是用css的hover属性，hover的时候显示滚动条，否则隐藏。
像滚动条的控制样式我们基本知道，看下
针对不同的浏览器，有不同的隐藏滚动条的方法，以下针对三大浏览器 chrome、ie（包括 edge）、firefox 分别叙述之：
firefox 是三者之中最麻烦的：
到此还没结束，你还要在一些地方加上 width: 100vw。
假设你的 HTML 长这样：
那你的CSS就还要再加上：
综上所述，如果你想让三大浏览器的滚动条都隐藏，并且可以卷动，那你的CSS就至少要长这样：
至于 width: 100vw要加在何处，就要看你的 HTML 结构长怎样了。
可以让读者更聚焦于内文，而不会看到滚动条很短就懒得看、跳出网页，或一心急，就把滚动条直直往下拉。换言之，就是强迫读者慢慢地把内容看完。
假如读者想往回看，可能就会要滚很久。所以，如果你想为较长的内文隐藏滚动条，建议应有导览列，让读者可以快速跳到某一处。
好了，现在我们知道滚动条隐藏了，后面就有滑动时显示滚动条，滚动条没有滑动时隐藏，获取滚动条一般是写
但是我们这里用EventTarget.addEventListener() ；同时也用到了css的calc计算属性，关于EventTarget.addEventListener()，不了解的童鞋可以仔细看看，如果已经知道的童鞋可以直接略过
方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element , Doument 和 Window 或者任何其他支持事件的对象（比如 XMLHttpRequest ）
addEventListener() 的工作原理是将实现 EventListener 的函数或对象添加到调用它的 EventTarget 上的指定事件类型的时间侦听器列表中。
