css = display: none, visibility: hidden, opacity: 0 的区别
一、 页面结构
- display: "none" 的元素其实并不会渲染，不会出现在页面中，不会占据位置，切换“显隐”时会触发渲染，所以会影响性能。
- visibility: "hidden" 的元素是会渲染的，它会占据页面中的位置（就好像 position: "relative" 的感觉一样，即使把元素left: 1080px，它也会占据原来的位置），切换“显隐”时会触发重绘，基本不影响性能。
- opacity: 0，"opacity"是不透明度的意思，顾名思义，它只是让元素变得不透明，1为完全不透明，0是完全透明，所以它也会在页面中占据位置（只是透明了，看不见），切换“显隐”时会触发重绘。
在这里就有一个小插曲了：什么是渲染？什么是重绘？
- 渲染： 这里所说的渲染其实指的回流，那什么是回流呢，回流就是当元素发生了会影响布局上变化的时候，页面需要重新构建，就会触发回流，重新渲染页面。
- 重绘： 通俗的说，就是元素发生了不影响布局结构的样式变化时，只是元素自身的外观发生了变化，就会触发重绘，比如改变color、background-color等等。
1、display: block
代码：
<body><p >我是吃瓜群众</p><p id="p1">我是主角</p><p >我是吃瓜群众</p><button onclick="document.getElementById('p1').style.display='block'">Block</button><button onclick="document.getElementById('p1').style.display='none'">None</button>
</body>不妨、动手一试？
我是吃瓜群众
我是主角
我是吃瓜群众
Block
None
2、visibility: hidden
代码：
<body><p >我是吃瓜群众</p><p id="p2">我是主角</p><p >我是吃瓜群众</p><button onclick="document.getElementById('p2').style.visibility='visible'">Visible</button><button onclick="document.getElementById('p2').style.visibility='hidden'">Hidden</button>
</body>不妨、动手一试？
我是吃瓜群众
我是主角
我是吃瓜群众
Visible
Hidden
3、opacity: 0
代码：
<body><p >我是吃瓜群众</p><p id="p3">我是主角</p><p >我是吃瓜群众</p><button onclick="document.getElementById('p3').style.opacity=0">0</button><button onclick="document.getElementById('p3').style.opacity=.5">0.5</button><button onclick="document.getElementById('p3').style.opacity=1">1</button>
</body>不妨、动手一试？
我是吃瓜群众
我是主角
我是吃瓜群众
0
0.5
1
转载于:https://www.cnblogs.com/nyya/p/10475773.html
css = display: none, visibility: hidden, opacity: 0 的区别相关推荐
- display:none和visibility:hidden和透明度的区别
**当想实现一个区域或者内容的消失(隐藏)**,我们有多种代码可以实现.但是根据要求和用户体验,应该选择最合适的方法实现.代码中最常用的代码包括:display:none; visibility:hi ...
- CSS隐藏元素的几种方式以及display、visibility、opacity的区别
CSS隐藏元素的方式 首先最通用且最易想到的方法肯定是display.visibility和opacity这三种了 display:none 设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏 ...
- CSS Display与Visibility区别和用法
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆,visibility和display两个属性都有隐藏元素的功能.visibility属性 ...
- display、visibility、opacity的区别
我们常设置display:none.visibility:hidden.opacity:0来隐藏元素,但是在实际使用中会有问题 (1)元素隐藏时是否在DOM中存在? display:不占据空间,会导致 ...
- 基础总结（04）-- display:none;visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
- display、visibility和opactity的区别
1.display:none: DOM结构:浏览器不会渲染display属性为none的元素,不占据空间,意思就是页面上没有它的一席之地,你在开发者模式中选不中那个元素. 事件监听:无法进行DOM事件 ...
- Vue | 显示切换（v-if与v-show,display,visibility与opacity）
文章目录 致读者(选读) 显示切换 1.动绑display 2.v-show 3.v-if 4.动绑visibility 5.动绑opacity 提问集合 watch监听 若有疑问,欢迎评论,我会尽快 ...
- CSS display(显示)详解 与 visibility（可见性）详解[第七天]
文章目录 display list-item[无效果,懵逼] run-in[都不支持,忽略] initial content table visibility 隐藏元素(display:none/vi ...
- inline-block是html5,详解CSS display:inline-block的应用
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
最新文章
- 修改wamp默认网站目录
- r 多元有序logistic回归_R语言多分类logistic逻辑回归模型在混合分布模拟单个风险损失值评估的应用...
- html图片上传选择文件后的事件,bootstrap-fileinput插件，上传成功后事件
- Struts 2基础
- top 命令_Linux监控cpu以及内存使用情况之top命令
- 【深度学习】——物体检测的难点
- opencv SIFT角检测
- python能做什么项目-Python 的练手项目有哪些值得推荐？
- spring cloud gateway java.lang.IllegalStateException:Only one connection receive subscriber allowed.
- 给老年人“种草”，是不是一门好生意?
- C++统计正数数目和负数的数目，并计算平均值
- 啥样的广告语省钱，高效？
- CISP查询具体步骤
- GPON标准简要解析
- “富强“, “民主“, “文明“, “和谐“, “自由“, “平等“, “公正“, “法治“, “爱国“, “敬业“, “诚信“, “友善“
- ITE6561 联阳（ite) Type-C转HDMI芯片
- JavaScript 空间分析库——JSTS和Turf
- 电子科技大学2021计算机考研复试科目,2021西安电子科技大学考研复试时间_西安交通大学考研复试科目...
- js实现文件下载功能
- ez-usb fx3 linux,Mouser带来最新USB 3.0技术：赛普拉斯EZ-USB FX3和恩智浦USB 3.0超高速转接驱动器...