display设置为none、visibility设置为hidden和opcitity设置为0的区别

最新推荐文章于 2022-12-20 10:57:50 发布
最新推荐文章于 2022-12-20 10:57:50 发布
阅读量699 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41805715/article/details/84645762
版权

display:none；是将元素隐藏起来，会改变页面的布局，可以理解为在页面中把元素删掉。

visibility:hidden;和opcitity:0;只是将元素隐藏起来，并不会改变页面的布局。

visibility:hidden;如果元素上有已经绑定的事件，隐藏后事件不会被触发。

opcitity:0;如果该元素上已经绑定一些事件，如click事件，隐藏后，点击该区域，事件也能够被触发。

柠檬布丁^O^
关注
专栏目录
display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2191
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
display:none； visibility:hidden； opacity:0 区别
weixin_36430673的博客
01-11 1146
display:none 1、DOM结构：浏览器不会渲染display为none的元素，不占据空间； 2、事件监听：无法进行DOM事件监听； 3、性能：动态改变DOM结构，会引起重排，性能较差； 4、继承：不会被子元素继承，因为子元素不会被渲染； 5、transition:不支持display。 visibility:hidden 1、DOM结构：元素被隐藏，还存在文档流中，占据一定的空间； 2、事件监听：无法进行DOM事件监听 3、性能：动态改变此属性会引起重绘，性能友好； 4、继承：
display:none;与visibility:hidden;的区别
米刀文
07-20 1万+
如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素， 但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。 visibility:隐藏对应的元素但不挤占该元素原来的空间。 display:隐藏对应的元素并且挤占该元素原来的空间
分析比较 opacity: 0、visibility: hidden、display: none
棠樾的博客
01-18 505
可以从结构，继承，性能三个方面来进行比较： 结构： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 继承： display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibi
[css3] 关于隐藏元素 display:none 和 visibility:hidden
我是z先生
08-13 687
大家都知道，写css的时候，隐藏一个元素可以通过display属性设置为"none"，或visibility属性设置为"hidden" 去隐藏元素。 但是注意，这两种方法会有着区别。 visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none 可以隐藏某个元素，且隐藏的元素不会占用...
display: none、visibility: hidden与opacity: 0的区别
u010227042的博客
06-10 1598
文章目录 1. display: none、visibility: hidden与opacity: 0的区别 2. 补充：其他隐藏元素的方法 1. display: none、visibility: hidden与opacity: 0的区别 display: none、visibility: hidden与opacity: 0都可以让元素隐藏，它们之间的区别见下表： 表格的解读： display:none其实很好理解，只要记住设置该属性的元素并不会出现在渲染树中这一点就行了，那么其他的一些特性（行为）
display:none和visibility:hidden的差别比较与演示代码
09-25
display:none和visibility:hidden的差别:visibility:hidden隐藏，但在浏览时保留位置；而CSS display:none视为不存在，且不加载,感兴趣的朋友可以研究下
display:none和visibility:hidden的区别
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
隐藏元素 display:none visibility: hidden区别
oscar92420aaa的博客
07-09 2039
display直接隐藏对应元素而且挤占该元素的空间 hidden虽然将元素隐藏了，但是将空间让出来了，不会挤占元素空间 .invisible {     visibility: hidden; } .hide {     display: none !important; }
display:none, visualbility:hidden 和 opacity:0隐藏元素的三种方式
过客如期的博客
08-07 335
一，display:none 1.dom依然渲染，看不见摸不着 2.将一个元素切换到display:none时，会引发回流和重绘，因为页面会重新布局。 二，visualbility:hidden 1.占据原来的空间，看不见摸得着 2.定义在元素上面的事件如点击事件依然会执行，只会触发重绘 三，opcity:0 1，同visualbility:hidden 看不见摸得着 2.就是将透明度设为100%， 四，注意 1.这三种方法都没有销毁DOM ...
CSS Display(显示) 与 Visibility（可见性）
Hhjian524的博客
09-20 1510
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。 隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为&quot;none&quot;，或把visibility属性设置为&quot;hidden&quot;。但是请注意，这两种方法会产生不同的结果。 visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与...
display：none、visiblity: hidden、opacity: 0区别
weixin_44941889的博客
11-10 1164
display：none、visiblity: hidden、opacity: 0均是用来隐藏元素的。 1、display: none。 DOM结构：被设置了display:none的元素浏览器不会渲染该元素在页面中，也根本不会占据位置； 事件：无法进行事件监听，点击事件没有生效； 性能：通过js无法获取到该元素身上的一些属性，并且通过动态的改变的display属性，会让页面反复渲染，引起页面重排，性能较差; 继承：不会被子类继承，因为自己没被渲染; transition: 不支持; 如图：
opacity属性会发生穿透，怎么办？
最新发布
Seimyle的博客
12-20 387
opacity属性会发生穿透，怎么办
Vue入门指南-06 Vue中的动画(快速上手vue)
weixin_33909059的博客
03-29 100
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js Vue中的全程动画 第一步： 需要把动画控制的元素用一...
display、visibility和opactity的区别
CamilleZJ的博客
07-01 682
1、display：none； DOM结构：浏览器不会渲染display属性为none的元素，不占据空间，意思就是页面上没有它的一席之地，你在开发者模式中选不中那个元素。 事件监听：无法进行DOM事件监听。 性能：动态改变此属性时会引起重排，性能较差。 继承：不会被子元素继承，因为子元素也不被渲染。 transtion过渡不支持display。 2.、visibility：hidden； DOM结构：元素被隐藏了，浏览器会渲染visibility属性为hidden的元素，占据空间，意思就是页面上
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
display:none、visibility:hidden和opacity:0的区别
ConstXiong
04-09 1279
是否脱离文档流 display:none：使元素脱离文档流，不占据原来的空间，会引起页面的重排 visibility:hidden：不会脱离文档流，元素不可见仍然占据原来的位置 opacity:0：同 visibility:hidden 继承 display:none：子元素仍具有 display 属性，与父元素一起隐藏 visibility:hidden：子元素设置为 visib...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值