CSS 隐藏、显示元素的方法

1.Opacity

• opacity属性是通过改变元素的透明度来实现隐藏和显示效果。
• 当值为0时，元素被隐藏，当值为1时，元素没有透明度
• 控制div的透明度

<div id="div1"></div>

#div1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            opacity: 0.5;
        }

2.display

• display:none 属性可以让元素隐藏，准确来说应该是消失，在页面上找不到了。也就是说用display:none的时候，该元素在网页上不占据任何的位置
• display还有以下属性：

3.visibility

• visibility属性规定元素是否可见，即使不可见，也会在页面上占据空间。
• 可能的值有一下几种：
  

4.Overflow

• overflow是对溢出的内容进行处理
• 可能的值：
  

以下是将div中溢出的部分隐藏

<div>
       <h1>你好</h1>
       <h1>你好</h1>
       <h1>你好</h1>
       <h1>你好</h1>
       <h1>你好</h1>
       <h1>你好</h1>
   </div>

       div
  {
  width:150px;
  height:150px;
  background-color: aqua;
  overflow: hidden;
  }

5.Position

• position是定位属性，只是将元素移除可是区域，它实现隐藏的方式是将元素定位到“无限远”。
• 它通常与top,left等属性搭配使用，例如：

div {
   position: absolute;
   top: -8000px;
   left: -8000pxpx;
}

6.clip-path

• clip-path是通过裁剪的方式来实现元素的隐藏
• 例如，以下是对div进行裁剪

div
  {
  width:150px;
  height:150px;
  background-color: aqua;
  clip-path: circle(40%);
  }

• 关于clip-path的更多知识，可以借鉴以下内容：
• clip-path
• 使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变
• clip-path介绍

6.clip: rect(0px 0px 0px 0px)

• clip属性裁剪的是绝对定位的元素，也就是说，只有position:absolute的时候才能生效
• 以下代码，看不见div

div{
width:150px;
  height:150px;
  position:absolute;
  background-color: aqua;
  clip: rect(0px 0px 0px 0px);
}

以下代码可以看到裁剪后的div

div{
 width:150px;
  height:150px;
  position:absolute;
  background-color: aqua;
  clip:rect(0px,60px,200px,0px);
}