css元素显示与隐藏

概念

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

1.display 属性

作用： 设置一个元素如何显示

• display: none; 隐藏对象；
• display: block; 除了转换为块级元素之外，同时还有显示元素的意思。

注意： display隐藏元素后，不再占有原来的位置。
场景： 搭配JS可以做很多的网页特效。

2.visibility 可见性

作用: 指定一个元素应可见还是隐藏

• visibility: visible; 元素可见
• visibility: hidden; 隐藏元素

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

3.overflow 溢出

作用：指定元素内容溢出元素如何显示

• overflow: visible; 元素可见
• overflow: hidden; 超出的元素隐藏
• overflow: scroll; 显示滚动条
• overflow: auto; 在需要的时候使用滚动条

注意：

• 一般情况，溢出内容不显示，否则影响布局。
• 如果有定位的盒子，请慎用overflow: hidden，因为会隐藏多余的部分。

总结

1. display显示隐藏元素，不保留位置
2. visibility显示隐藏元素 但是保留原来位置
3. overflow溢出显示隐藏 只针对溢出的部分处理