分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

最新推荐文章于 2021-03-24 11:55:52 发布
最新推荐文章于 2021-03-24 11:55:52 发布
阅读量312 收藏
点赞数
原文链接：http://www.cnblogs.com/wangxi01/p/11248751.html
版权
  1. display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）
  2. visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）
  3. opacity: 0（占据空间，可以点击）（场景：可以跟transition搭配、自定义图片上传按钮）

转载于:https://www.cnblogs.com/wangxi01/p/11248751.html

weixin_30707875
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 设置style:display的方法
10-24
关于`style:display`的设置，jQuery提供了一系列方便的API，使得开发者能够更加便捷地控制元素的显示和隐藏状态。下面我们将深入探讨jQuery中设置`display`属性的方法。 1. **使用`.css()`方法** `.css()`方法是...
比较opacity:0、visibility:hidden、display:none，优劣和适用场景
Menqq的博客
03-16 1201
display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间； 事件监听：无法进行 DOM 事件监听，不能点击； 性能：修改元素会造成文档回流（reflow 与 repaint）,读屏器不会读取display: none元素内容，性能消耗较大； 继承：是非继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染； 场景：显示出原来这里不存在的结构； tran..
opacity:0; visibility:hidden; display:none;
weixin_30408739的博客
07-31 144
如果祖先元素遭遇某祸害，则其子孙孙无一例外也要遭殃，比如：opacity:0和display:none，若父节点元素应用了opacity:0和display:none，无论其子孙元素如何挣扎都不会再出现在大众视野；而若父节点元素应用visibility:hidden，子孙元素应用visibility:visible，那么其就会毫无意外的显现出来。 结构：display:none:...
分析比较 opacity: 0、visibility: hidden、display: none
Mark
12-20 312
1、三个属性分别是什么？ 1.1、opacity属性：指定了一个元素的透明度，值：number 类型的值，0~1。 1.2、visibility属性：显示或隐藏元素而不更改文档的布局，值：visible、hidden、collapse。 1.3、display属性：指定了元素的显示类型，被设置成none的元素，将从可访问性树中移除，包括其子元素在内。 2、三个属性的区别 2.1、结构上：...
分析比较opacity: 0、visibility: hidden、display: none 优劣和适用场景
wang415229224ye的博客
03-24 692
1、DOM结构方面 display，会让元素完全从渲染树中消失，渲染的时候不占据任何空间，不能点击。 visibility，不会让元素从渲染树消失，元素继续占据空间，只是内容不可见，不能点击。 opacity，不会让元素从渲染树消失，元素继续占据空间，只是内容不可见，可以点击 2、继承方面 display，会让元素完全从渲染树中消失，渲染的时候不占据任何空间，不能点击。 visibility，不会让元素从渲染树消失，元素继续占据空间，只是内容不可见，不能点击。 opacity，不会让元素从渲染
微信小程序开发问答《七十七》encryptedData解密 & canvas 设置opacity：0无效 ... ..
03-29
1、weapp的wxss选择器中 > 和 * 有什么替代方案吗？   答：不建议使用关系选择器，效率低 微信小程序不允许wxss使用*和>进行选择。 折中方案就是在你要选择的标签添加一个class来进行选择。 我已开始也发现不能用，...
CSS隐藏元素 display visibility opacity的区别.docx
07-24
在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...
mapbox-gl-opacity:使多个平铺层透明
05-29
mapbox-gl-不透明度mapbox-gl-opacity 是一个 Mapbox GL JS 插件，可以让多个瓦片层透明。 浏览器支持Chrome合金火狐浏览器苹果浏览器用法演示选项 // addControl Option// The position of the control (one of the...
Slider-video-over-opacity:简单的工作
05-01
这种技术在网页设计中非常常见，能够创造出动态且吸引人的界面，尤其适用于展示产品、讲述故事或者增强用户体验的场景。在实际应用中，还可以根据需要添加更多的交互元素，如控制按钮、动画过渡等，以进一步提升项目...
关于opacity:0、visibility:hidden、display:none三个属性的比较以及拓展
问白的博客
03-04 8332
今天上午看某头条的时候有个刚入门的前端小伙伴提问道opacity:0、visibility:hidden、display:none。这三个属性的区别，这三个属性在我们日常开发中也算是用到频率也是蛮多的，所以干脆就就把这三个属性放在一起，配合实例做一个比较。首先这三个属性依次设置为0/hidden/none都可以使得用户看不见页面上的元素，不过他们之间还是有区别的，不然若是一样的话，也就没必要用三个...
[css] 分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景
歌谣的博客
02-05 476
[css] 分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景 opacity 0: 单纯视觉效果，除了看不见，其他都正常。 visibility: hidden: 可继承也可覆盖。 display: none: 元素不会渲染，不影响布局，不会被css计数，也不支持transition。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
opacity: 0、visibility: hidden、display: none 优劣和适用场景
qazxbjp2010的博客
03-18 303
素display:none DOM 结构：元素完全从渲染树中消失，不占据空间； 子节点：不会被子节点继承，子节点设置display:block也无法显示； 性能：改变此属性时会引起重排和回流，性能较差；但由于修改被隐藏的子节点时不会进行重排，所以在大量修改子节点样式时，先隐藏修改完在显示会有较好的性能； Event事件：无法进行 DOM 事件监听、无法被选中； transition：tra...
display: none, visibility: hidden 和 opacity: 0的比较
摇摆小仙的博客
06-14 1158
1.关于是否脱离文档流 display: none会使元素脱离文档流,不占据原来的空间,会引起页面的重排 visibility: hidden和opacity: 0 虽然会使元素不可见,但是元素仍然占据原来的位置,不会脱离文档流 2.关于继承 display: none,虽然被隐藏的子元素也会一起隐藏,但是子元素并不继承display: none,子元素仍然具有本身的display属性,但...
CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析
FEWY的博客
05-27 4248
说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。 是否占据页面空间 例子 <!doctype html&a
css样式 元素隐藏的优劣和适用场景
小钱端
10-18 1474
opacity: 0、visibility: hidden、display: none 优劣和适用场景 opacity:0;占空间，父级设置之后，子级不能出现，能触发绑定事件； visibility:hidden;占空间，父级设置之后，子级可以通 visitility:visible;设置显示，显示之后能触发绑定事件； display:none;不占空间，父级设置之后，子级不能出现，不能触发绑定事件； ...
display:none、visibility:hidden和opacity:0之间的区别
github_39673115的博客
09-10 1万+
一、空间占据 display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。 代码： div { width: 200px; height: 200px; background: #ccc; margin-top: 10px; } .div1
前端 100 问：能搞懂80%的请把简历给我
热门推荐
木易杨的博客
07-09 6万+
引言 半年时间，几千人参与，精选大厂前端面试高频 100 题，这就是「壹题」。 在 2019 年 1 月 21 日这天，「壹题」项目正式开始，在这之后每个工作日都会出一道高频面试题，主要涵盖阿里、腾讯、头条、百度、网易等大公司和常见题型。得益于大家热情参与，现在每道题都有很多答案，提供的解题思路和答案也大大增长了我的见识，到现在已累积 100 道题目，『 8000+ 』Star 了，可以说你面试中...
visibility: hidden ，opacity display:none
最新发布
06-01
这三个CSS属性都可以用于隐藏元素，但有一些区别： 1. `visibility: hidden`：元素不可见，但仍占用布局空间，即元素仍然存在于DOM中，可以通过更改CSS属性或通过JavaScript让其可见。 2. `opacity: 0`：元素透明度为0，即元素不可见，但仍占用布局空间，即元素仍然存在于DOM中，可以通过更改CSS属性或通过JavaScript让其可见。 3. `display: none`：元素不可见，且不占用布局空间，即元素在DOM中不存在，也不能通过JavaScript让其可见，要让其重新出现，必须更改CSS属性或通过JavaScript重新创建元素并添加到DOM中。 因此，在使用这些属性时，需要根据实际需求进行选择。如果需要隐藏元素但仍占用布局空间，则使用`visibility: hidden`或`opacity: 0`；如果需要完全移除元素并释放布局空间，则使用`display: none`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值