CSS隐藏页面元素的5种方法-猿码集

CSS隐藏页面元素的5种方法

1. visibility: hidden

visibility属性用于隐藏元素，但元素仍会占据页面上的空间，不会改变其他元素的位置和大小。visibility有两个可选值，分别是visible和hidden。visible表示元素正常显示，hidden表示元素被隐藏。


.hide {
  visibility: hidden;
}

上面的代码定义了一个class为hide的元素，设置了visibility属性为hidden，此时页面上的hide元素被隐藏。

display属性用于隐藏元素，该元素在页面上不占据任何空间，也不会改变其他元素的位置和大小。display有多个可选值，包括block、inline、none等。


.hide {
  display: none;
}

上面的代码同样定义了一个class为hide的元素，设置了display属性为none，此时页面上的hide元素被隐藏。

opacity属性用于设置元素的透明度，该属性的取值范围是0~1，0表示完全透明，1表示完全不透明。使用opacity: 0可以将元素设置为完全透明，从而达到隐藏的效果。


.hide {
  opacity: 0;
}

上面的代码同样定义了一个class为hide的元素，设置了opacity属性为0，此时页面上的hide元素被隐藏。

height属性用于设置元素的高度，如果将元素的高度设置为0，则该元素将不再占据页面上的空间。overflow属性用于指定元素的溢出内容应该如何处理，如果将overflow设置为hidden，那么超出元素高度的内容将被隐藏。


.hide {
  height: 0;
  overflow: hidden;
}

上面的代码同样定义了一个class为hide的元素，设置了height属性为0，overflow属性为hidden，此时页面上的hide元素被隐藏。

position属性用于指定元素的定位方式，如果将position设置为absolute，则可以用left和top属性将元素定位到页面的任意位置。同时，将left设置为-9999px可以将元素定位到页面以外的位置，从而达到隐藏的效果。


.hide {
  position: absolute;
  left: -9999px;
}

上面的代码同样定义了一个class为hide的元素，设置了position属性为absolute，left属性为-9999px，此时页面上的hide元素被隐藏。

以上就是CSS隐藏页面元素的5种方法，通过不同的属性和取值，我们可以选择适合自己需求的隐藏方式。