用 css 隐藏页面元素的 5 种方法!

《用 css 隐藏页面元素的 5 种方法!》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、www.gybdqn.com用CSS隐藏页面元素的5种方法！用CSS隐藏页面元素有许多种方法。你可以将opacity设为0、将visibility设为hidden、将display设为none或者将position设为absolute然后将位置设到不可见区域。你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点，让你根据不同情况选择上面这些方法中适合的方法来隐藏元素。opacityopacity属性的意思是设置一个元素的

2、透明度。它不是为改变元素的边界框（boundingbox）而设计的。这意味着将opacity设为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。.hide{opacity:0;}如果你打算使用opacity属性在读屏软件中隐藏元素，很不幸，你并不能如愿。元素和它所有的内容会被读屏软件阅读，就像网页上的其他元素那样。换句话说，元素的行为就和它们不透明时一致。我还要提醒一句，opacity属性可以用来实现一些效果很棒的动画。任何opacity属性值小于1的元素也会创建一个新的堆叠上下文（stackingcontext）。看下面的例子：看@Site

3、Point提供的例子“用opacity隐藏元素”当你的鼠标移到被隐藏的第2个的区块上，元素状态平滑地从完全透明过渡到完全不透明。区块也将cursor属性设置为了pointer，这说明了用户可以与它交互。www.gybdqn.comvisibility第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。这个属性也能够实现动画效果，只要它的初始和结束状态不一样。这确保了visibility状态切换之间的过渡动画可以

4、是时间平滑的（事实上可以用这一点来用hidden实现元素的延迟显示和隐藏——译者注）。.hide{visibility:hidden;}下面的例子演示了visibility与opacity有怎样的不同：看@SitePoint提供的例子“用visibility隐藏元素”注意，如果一个元素的visibility被设置为hidden，同时想要显示它的某个子孙元素，只要将那个元素的visibility显式设置为visible即可（就如例子里面的.o-hidep——译者注）。尝试只hover在隐藏元素上，不要hover在p标签里的数字上，你会发现你的鼠标光标没有变成手指头的样子。此时，你点击鼠标，你

5、的click事件也不会被触发。而在