当前位置主页 > 资料库 > 前端教程 > 通过CSS来隐藏元素的几种方法总结

通过CSS来隐藏元素的几种方法总结

01-26

隐藏和显示一个元素是响应式网页设计不可或缺的一个功能。我们通过CSS有多种方法可以隐藏一个元素,这里我们就对这些方法进行一个总结。

通过display属性来隐藏元素

在HTML页面上所有的元素的形状都是规则的矩形,元素的这种行为是通过CSS的盒模型来解释的。如果我们通过display属性来隐藏一个元素,那么就意味着这个元素不会被在页面中生成。在这个元素中的任何内容,或者它的子元素也会同时被隐藏。另外如果这个元素是一个可以被执行的元素,例如<button><a>元素,那么它们的执行功能也会被隐藏。被隐藏的元素和它的子元素会被屏幕阅读器忽略。

.foo {
  display: none;
}                                
                            

使用display来隐藏元素

通过visibility属性来隐藏元素

通过visibility属性来隐藏的元素,该元素仍然会在页面中被生成,但是不会在屏幕中渲染。由于该元素已经被生成,盒模型中的4个区域(content区域, padding区域, border区域, margin 区域)仍然会对页面布局产生影响,它们所占的空间仍然存在,但是它们是不可见的。

除了会生成盒模型之外,使用visibility属性来隐藏元素和使用display属性来隐藏元素是一样的。同样,使用visibility属性来隐藏的元素也会被屏幕阅读器忽略。

.foo {
  visibility: hidden;
}                                
                            

使用visibility来隐藏元素

通过opacity属性来隐藏元素

opacity属性用于控制元素的透明度,当一个元素的透明度为0时,该元素不可见。

当一个元素opacity属性设置的足够小的时候,这个元素在页面中也会变得不可见。使用opacity属性来隐藏的元素也会占用页面空间,同样会被屏幕阅读器忽略。

.foo {
  opacity: 0;
}                               
                            

使用opacity来隐藏元素

通过position属性来隐藏元素

使用position属性来隐藏页面中的元素不是一种很常用的方法。通常我们在不影响页面布局的情况下,要隐藏一个元素,同时又要使该元素能够被屏幕阅读器阅读,才会使用这种方法。

通过position属性,有两种方式可以隐藏一个元素。

1、通过和topleft属性相结合,将元素移动到视口之外,从而达到隐藏元素的目的。

.foo {
  position: absolute;
  top: -9999px;
  left: -9999px;
}                                
                            

2、另外一种方式是和clip属性相结合,来使元素盒模型的矩形区域变得非常小,以至于我们看不见它的存在。

.foo {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* syntax for IE6 & IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}                                
                            

上面两种方法移除元素之后的结果是相同的。

使用display来隐藏元素

小结

通过上面的描述,我们可以得到下面的结论:

display visibility opacity position
是否会生成盒模型?
隐藏的元素是否会影响页面的布局?
元素在页面中是否可见?
隐藏元素是否可以被屏幕阅读器阅读?
元素是否仍然可以被操作?
相关阅读
Previous:
上一篇:深入理解CSS z-index属性
Next:
下一篇:Bootstrap 4组件和CSS样式介绍(一)
返回顶部