display、visibility、opacity的区别

我们常设置display：none、visibility：hidden、opacity：0来隐藏元素，但是在实际使用中会有问题

（1）元素隐藏时是否在DOM中存在？

display：不占据空间，会导致回流产生
visibility：占据空间，不会导致回流
opacity：占据空间，仅视觉上透明度为0

（2）隐藏元素绑定事件是否有效？

display、visibility绑定事件无效
opacity绑定事件有效

（3）该属性是否会被子元素继承？

display不会被子元素继承，给子元素设置block无效
visibility会被子元素继承，子元素设置visible有效
opacity会被子元素继承，子元素设置1无效

display、visibility、opacity的区别相关推荐

visibility，display，opacity的区别？
相同点: visibility和display都能实现元素的显示和隐藏 display: none; 隐藏元素 display: block; 显示元素 display: inline; 元素转换为行 ...
CSS隐藏元素的几种方式以及display、visibility、opacity的区别
CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display.visibility和opacity这三种了 display:none 设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏 ...
css元素隐藏不可获取,Css隐藏元素(display,visibility)的区别
Css隐藏元素(display,visibility)的区别 display display属性值 display 属性规定元素应该生成的框的类型. 属性值: block: /表现为一个块级元素(一般 ...
5.22 locahost仅是本地服务域名。★★★v-show引发refs不渲染， created和mounted，npm install xxx区别，display,visibility,opac区
1.新手会误将localhost域名作为开发域名一用到底. 今天做移动端本地前后联调时,误以为http://localhost:8080就是本地域名,这种说法是正确的,但是这是本地的修改后的域名,真实 ...
[css] 说说display:none和visibility:hidden的区别
[css] 说说display:none和visibility:hidden的区别 display:none dom对象不渲染. visibility:hidden 隐藏但是dom对象渲染. 个人简介 ...
display:none和visibility:hidden的区别
在使用CSS隐藏一些元素时,我们经常用到 display:none 和 visibility:hidden.两者差别如下: 1. 是否占据空间 display:none,该元素不占据任何空间,在文档渲 ...
display, visibility, overflow 三者的作用与区别
display, visibility, overflow 三者的作用与区别 display html可以将元素分类方式分为行内元素.块元素和行内块元素三种, 使用display属性能够将三者任意转换 ...
_blank 和 _self的区别以及display:none和visibility:hidden的区别
_blank 和 _self的区别 target=_blank会在当前窗口之外再打开一个新窗口来显示新的页面 target=_self在当前窗口打开新页面 display:none和visibili ...
iOS - UIView属性hidden, opaque, alpha, opacity的区别
iOS开发-之UIView属性hidden, opaque, alpha, opacity的区别一.alpha 液晶显示器是由一个个的像素点组成的,每个像素点都可以显示一个由RGBA颜色空间组成的一 ...
DIV display visibility
DIV display visibility 使用div的时候遇到这样的问题,但是,一直没有搞清楚.在NB的'baidu'上搜了一下发现了说到这个问题的地方,随手记录在这里,免得再搞错. 使用了div ...

display、visibility、opacity的区别

display、visibility、opacity的区别相关推荐

最新文章

热门文章