通过与 Jira 对比,让您更全面了解 PingCode

  • 首页
  • 需求与产品管理
  • 项目管理
  • 测试与缺陷管理
  • 知识管理
  • 效能度量
        • 更多产品

          客户为中心的产品管理工具

          专业的软件研发项目管理工具

          简单易用的团队知识库管理

          可量化的研发效能度量工具

          测试用例维护与计划执行

          以团队为中心的协作沟通

          研发工作流自动化工具

          账号认证与安全管理工具

          Why PingCode
          为什么选择 PingCode ?

          6000+企业信赖之选,为研发团队降本增效

        • 行业解决方案
          先进制造(即将上线)
        • 解决方案1
        • 解决方案2
  • Jira替代方案

25人以下免费

目录

CSS 隐藏页面元素有哪些方法

CSS 隐藏页面元素的方法:1、display:none;2、visibility:hidden;3、opacity:0;4、设置height,width等盒模型属性为0;5、CSS的clip让元素在视觉上不可见;6、position:absolute。display:none设置元素的display为none是最常用的隐藏元素的方法,将元素设置为display:none后,元素在页面上将彻底消失。

一、CSS 隐藏页面元素的方法

1、display:none

设置元素的display为none是最常用的隐藏元素的方法。将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。

2、visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法,和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景

3、opacity:0

opacity属性表示元素的透明度,而将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方法。这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中。

4、设置height,width等盒模型属性为0

简单说就是将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素。

这种方式既不实用,也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的,比如jquery的slideUp动画,它就是设置元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-较好,margin-bottom,border-较好,border-bottom,padding-较好,padding-bottom为0,从而达到slideUp的效果。

5、CSS的clip让元素在视觉上不可见

注意,该clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用,其次clip属性目前已经从网页标准里面给移出了,现在更多的写就是用clip-path来代替,所以如果想要兼容所有浏览器的话,可以书写clip属性和clip-path属性一起用。这个方法隐藏之后,空间还在。

6、position:absolute

position:absolute配合任何一个足够大的left、right、bottom或较好的负值,让元素不在视口范围内显示。定位这个属性的目的主要不是为了做隐藏的,在一些具体的案例里面,需要在页面上隐藏一个元素,但是呢又不想影响页面布局,可以用position配合较好和left的值,达到隐藏的效果,但是用这个方法的前提是在该元素的祖先元素上添加overflow:hidden。

二、CSS特点

1、丰富的样式定义

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,只需要在样式列表中找到相应的样式声明进行修改。

3、多页面应用

CSS样式表可以单独存放在一个CSS文件中,这样就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4、层叠

简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。

5、页面压缩

在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。

延伸阅读1:CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

相关文章