ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css中实现元素隐藏的几种方法

2022-03-30 21:35:25  阅读:167  来源: 互联网

标签:display 元素 visibility 几种 翻译成 hidden 隐藏 css


一、display:none;

display翻译成中文是显示、展览的意思;将display的属性改为none可以实现元素的隐藏,元素和盒子模型也不生成,被隐藏的元素不占位置,看不见摸不着,它会导致浏览器的重排和重绘。

二、visibility:hidden;

visibility翻译成中文是能见、可见性的意思;hidden翻译成中文的是隐藏、不易察觉的意思。将visibility的属性改成hidden可以实现元素的隐藏,和display:none的区别是它占位置,看不见但是摸得着,所以它只会导致浏览器重绘而不会重排。

三、opacity:0;

opacity翻译成中文是透明度、不透明的意思;将opacity的属性改成0那就是透明度等于0看不见元素,但是这种方法也是只能隐藏看不见元素,和visibility:hidden一样,元素依然存在页面中。

四、position

利用定位将元素的top和left值设为足够大的负数,使它移出屏幕在屏幕上看不见。

五、overflow:hidden

overflow翻译成中文是漫出、溢出的意思;将overflow的属性设置hidden可以实现元素隐藏,但是这个是超出盒子的部分隐藏,有局限性。

总:常用的方法就是display:none 和visibility:hidden;

 

标签:display,元素,visibility,几种,翻译成,hidden,隐藏,css
来源: https://www.cnblogs.com/simple-Xiao/p/16079188.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有