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

一、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 样式表的复用更大程度的缩减了页面的体积，减少下载的时间。