概念
让一个元素在页面中隐藏或者显示出来。
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,因为会隐藏多余的部分。
总结
- display显示隐藏元素,不保留位置
- visibility显示隐藏元素 但是保留原来位置
- overflow溢出显示隐藏 只针对溢出的部分处理