css隐藏元素的9种方法

2024-04-09 15:07| 来源: 网络整理| 查看: 265

这是我参与更文挑战的第12天，活动详情查看更文挑战

页面布局的时候，我们经常需要对元素做些显示隐藏的效果，有的时候我们只是希望元素不可见，有的时候我们又希望元素完全隐藏。根据不同的需求，我们可以使用不同的方法来实现。

隐藏不占位类 1、display

隐藏、不占位

display：none

常用的元素隐藏方法。他不但可以隐藏元素，而且还可以让元素在页面上不在占位；

但是它也可能影响到页面一些动画效果设置。

2、html的hidden属性

隐藏、不占位

隐藏

设置hidden属性，会应用浏览器默认样式[hidden] {display: none;}，所以注意不要和display属性同时使用。

3、设置尺寸

隐藏、不占位

height: 0; padding: 0; overflow: hidden;

可以通过使用最小化其尺寸被隐藏width，height，padding，border-width和/或font-size。还需多设置一个overflow: hidden;以确保内容不会溢出。

4、position

隐藏、不占位

position: absolute; left: -999px;

利用position属性，设置较大的值，将元素移除屏幕以实现隐藏的效果。

隐藏占位类 1、opacity

隐藏、占位

opacity: 0;

通过设置opacity的值实现隐藏元素的想过，但还是让元素不可见，元素在页面上依然占位

2、transform

隐藏、占位

transform: scale(0); 或 transform: translate(-999px, 0);

通过transform属性的平移（移动）、缩放、旋转或倾斜元素等方式，来对元素进行一个隐藏

3、visibility

隐藏、占位

visibility: hidden;

visibility属性可以设置为visible或hidden以显示和隐藏元素

4、颜色透明度

隐藏、占位

color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);

可以利用rgba设置元素的透明度为0，从而达到隐藏元素的效果

5、clip-path

隐藏、占位

clip-path: circle(0);

clip-path属性会创建一个裁剪区域，用于确定元素的哪些部分可见。使用clip-path: circle(0)可以达到将元素隐藏的效果。

小可爱看完就点个赞再走吧！🤞🤞🤞

【本文地址】

今日新闻