css元素显示与隐藏
2020-05-10 本文已影响0人
Jay_ZJ
概念
让一个元素在页面中隐藏或者显示出来。
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溢出显示隐藏 只针对溢出的部分处理
