现在的网页设计越来越动态化, 我们经常需要隐藏某些元素, 在特定的时候才显示它们. 我们通常可以使用 4 种方法来隐藏和显示元素.
CSS 无法将 html 元素完全的从页面中去除, 但是可以通过一些方法让它们在视觉上隐藏掉. 具体的做法是设置元素 CSS 属性 display:none 和 visibility:hidden 等属性.
一, visibility: hidden
visibility: hidden 是许多人在隐藏某个 HTML 元素时的首选. 这个属性只是简单的隐藏某个元素, 但是元素占用的空间任然存在.
- div{
- visibility: hidden;
- }
与之相对的属性: visibility: visible 可以使隐藏的元素变为可见.(推荐学习: CSS 视频教程 https://www.html.cn/css/ )
二, opacity: 0
- div{
- opcity: 0;
- }
这是一个 CSS3 属性, 设置 opacity: 0 可以使一个元素变得完全透明, 从而制作出和 visibility: hidden 一样的效果. opacity 和 visibility 相比, 其优势在于它可以被 transition 和 animate.
通常可以使用 opacity 属性来制作元素的淡入淡出效果.
与之相对的属性: opacity:1 可以使透明元素变得可见.
三, position: absolute
- div {
- position: absolute; left: -1000px;
- }
最古老和最标准的做法是设置元素的绝对定位来隐藏元素. 这种技术使元素脱离文档流, 处于普通文档之上, 并给它设置一个很大的 left 负值定位, 使元素定位在可见区域之外. float 和 margin 都不能影响到 position: absolute 的元素, 因此它们可以很好的被隐藏起来.
在制作一些元素的直线动画时, 使用这种技术是最好的方法.
要使元素再次变得可见, 可以增大 left 的值, 使元素出现在屏幕上.
四, display: none
- div{
- display: none;
- }
display: none 也是一个非常老的技术, 它是 position: absolute 和 visibility: hidden; 的折中方法, 元素会变得不可见, 并且不会再占用文档的空间.
display: none 在制作手风琴效果时十分有用.
与之相对的属性: display: block 或其它值可以使元素再次可见.
除了上面描述的 4 种方法之外, 还有其它方法可以隐藏元素, 特别是使用 CSS3 的时候. 例如: 你可以使用 scale 属性来减少元素的尺寸直到它消失. 但是 scale 属性和 opacity: 0 和 visibility: hidden 一样, 不可见的元素会占用文档的空间.
来源: http://www.css88.com/qa/css3/15222.html