欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS 使页面元素隐藏的所有方式汇总

程序员文章站 2022-07-06 16:50:55
使盒子(元素)隐藏的所有方式汇总1、display:none2、visibility:hidden3、opacity:04、overflow:hidden5、定位6、2D变换7、设置高为08、jq的hide(time,function)9、jq的 fadeout(time,function)10、jq的slideup(time,function)1、display:nonecss属性设置display,且不占位2、visibility:hiddencss属性,隐藏,且占位3、opacity:0c...

1、display:none

css属性设置display,且不占位

2、visibility:hidden

css属性,隐藏,且占位

3、opacity:0

css属性,设置透明度为0

4、overflow:hidden

css属性,超出部分隐藏,需要设置显示的盒子比需要隐藏的小。比如一个盒子
是30*30,里面的内容是50*50,给盒子设置overflow:hidden  就是内容只显
示30*30。

5、定位

设置position:relative  相对定位,设置z-index:-1000

或者直接定位到超级远的地方

6、2D变换

transfrom:scaleY(0)

  缩放到0倍(看不见)

translate(x,y )平移

x和y设置很大的值,使其平移出屏幕外。
也可以拆分成translateX(),translateY(),单位是px

skew(Xdeg,Ydeg) 倾斜

同上也可拆分X,Y,合在一起写的话,X,Y是数值类型,deg是角度单位,必须写
比如说沿X轴旋转。就是你拿张纸,面朝你旋转90°。就是变成一条线了,等同于消
失

7、设置元素高为0

height:0

8、jQ

hide(time,function)

普通隐藏显示
time为时间
function为执行完毕调用的函数

fadeout(time,function)

透明度隐藏
time为时间
function为执行完毕调用的函数

slideup(time,function)

向上卷起隐藏
time为时间
function为执行完毕调用的函数

本文地址:https://blog.csdn.net/Lazy33/article/details/107164145