CSS面试20真题高频版- CSS中有哪些隐藏页面元素的方法？区别是什么实现方式 display: none visib

实现方式

元素在页面彻底消失，不占空间，会导致浏览器的重绘和回流，消失后自身绑定的事件不会触发，无法响应点击事件。

仅仅隐藏该元素（不可见状态），DOM结果依然存在，占据页面空间，不会触发回流但会触发重绘，无法响应点击事件

元素透明度设置为0，改变元素的透明度，占据页面空间，不会触发回流一般情况下会触发重绘（如果利用 animation 动画，对 opacity 做变化，animation会默认触发GPU加速，则只会触发 GPU 层面的 composite，不会触发重绘），可以响应点击事件

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

元素不可见，不占据页面空间，无法响应点击事件

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

元素不可见，不影响页面布局

clip-path属性通过定义一个裁剪路径（clipping path）来确定元素的可视区域。这意味着可以指定一个形状或路径，只有位于这个形状或路径内的部分才会被显示出来，其余部分则会被裁剪掉。裁剪区域可以是圆形、椭圆形、多边形或复杂的SVG路径。其中，属性值可以是以下几种类型之一：

circle(): 创建一个圆形裁剪区域。例如：clip-path: circle(50%); 表示一个中心在元素中心，半径为50%的圆。
ellipse(): 创建一个椭圆形裁剪区域。例如：clip-path: ellipse(50% 25%); 表示一个中心在元素中心，水平半径为元素宽度的50%，垂直半径为元素高度的25%的椭圆。
polygon(): 创建一个多边形裁剪区域。例如：clip-path: polygon(50% 0%, 100% 100%, 0% 100%); 表示一个菱形。
inset(): 创建一个矩形区域，可以有圆角。例如：clip-path: inset(10% 20% 30% 40%); 表示一个从各边内缩指定距离的矩形。
path(): 使用SVG路径来定义裁剪区域。例如：clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z'); 表示一个复杂的SVG路径。

特点：元素不可见，占据页面空间，无法响应点击事件