怎么在css中显示与隐藏元素-成都快上网建站

怎么在css中显示与隐藏元素

本篇文章给大家分享的是有关怎么在css中显示与隐藏元素,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

站在用户的角度思考问题,与客户深入沟通,找到来凤网站设计与来凤网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站制作、网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、雅安服务器托管、企业邮箱。业务覆盖来凤地区。

display

对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题,元素的display属性在隐藏前并不都是block,还有可能是inline、inline-block等

注意:如果要适用于任何元素需要提前储存元素的display值

显示
隐藏
测试文字

visibility

visibility:hidden与display:none作为隐藏元素的两种方式,常常被人们拿来比较。其实区别很简单,前者不脱离文档流,保留隐藏之前元素占据的物理区域;而后者则脱离文档流,如果重新显示则需要页面的重新绘制。还有一点区别却很少人提到,如果父级设置display:none;子级设置display:block也不会显示;而如果父级设置visibility:hidden;子级设置visibility:visible时子级会显示出来

注意:visilibity可应用transition属性。因为visibility是离散步骤,在0到1数字范围之内,0表示隐藏,1表示显示。visibility:hidden可以看成visibility:0;visibility:visible可以看成visibility:1。于是,visibility应用transition等同于0~1之间的过渡效果。实际上,只要visibility的值大于0就是显示的。由于这个现象,我们可以利用transition实现元素的延时显示隐藏

显示
隐藏
测试文字

hidden

可能有些人不太熟悉,HTML有个hidden全局属性,专门用于显示隐藏元素,与display:none的作用类似,元素隐藏时脱离文档流,无法接受javascript事件

注意:IE10-不支持test.hidden='hidden'写法,只支持test.setAttribute('hidden','hidden')写法

显示
隐藏
测试文字

opacity

对于元素显隐,opacity的使用频率也挺多。opacity的好处是,即使opacity为0的元素,仍然可以接受javascript事件,这是display:none和visiblity:hidden所不具备的。

显示
隐藏
还原
测试文字

overflow

CSS中有一个属性是overflow,overflow:hidden代表着溢出隐藏。我们可以利用父级的overflow:hidden配合父级的height:0或width:0来实现元素的显隐

注意:当设置overflow的元素在绝对定位元素和其包含块之间的时候,overflow属性会失效

显示
隐藏

    测试内容
        

clip

CSS裁剪clip这个属性平时用的不多,当clip:rect(top,right,bottom,left)中的top>=bottom,或者left>=right时,可实现元素的隐藏效果,效果类似于visibility:hidden

注意:clip属性只能应用在绝对定位元素上

显示
隐藏
测试内容

transform

CSS变形transform是一些效果的集合,主要是移动、旋转、缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果。通过不同的变形函数可以实现元素显隐效果

注意:IE9-浏览器不支持,safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀

【1】scale

transform:scale(0)时,元素被隐藏

显示
隐藏
测试内容

【2】rotate

transform:rotateX(90deg)时,元素被隐藏

显示
隐藏
测试内容

【3】skew

transform:skew(90deg)时,元素被隐藏

显示
隐藏
测试内容

覆盖

利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸,通过控制伪元素的定位属性,实现显隐效果

测试内容
//鼠标移入移出会出现元素的显隐效果

偏移

元素显示隐藏的另一种常见思路是偏移,将元素移动到视窗范围外,也可以实现等价的显隐效果

【1】margin-top

利用负margin将元素移出视窗外,要注意的是设置负margin的元素并没有脱离普通流,后续元素会跟着一起移动

显示
隐藏
测试内容

【2】left

通过设置相对定位或绝对定位元素的偏移属性,将元素移动到视窗外

显示
隐藏
测试内容
 

【3】translate

显示
隐藏
测试内容

以上就是怎么在css中显示与隐藏元素,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


新闻标题:怎么在css中显示与隐藏元素
网页地址:http://kswjz.com/article/igopgs.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯