码迷,mamicode.com
首页 > Web开发 > 详细

css样式中元素隐藏的三种方式以及区别

时间:2020-06-12 14:12:14      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:三种方式   strong   --   dash   页面   事件   不可   isp   通过   

有以下三种方式来实现元素的隐藏:

① display: none;  不占据空间,更改该属性时会引起DOM树结构变化、页面重新布局——回流。

父元素被设置后已不在标准流中存在,自然不会被子元素继承。

无占位元素,原有的元素绑定的事件监听无效。

//元素显示:display: block;

------------------------------------------------------------------------------------------------------------------------------

② visibility: hidden; 元素隐藏、仍然占据空间。更改该属性时不会引起DOM树结构变化、不会引起页面重新布局,只会按照css代码重新渲染——重绘。

可以被子元素继承,可以通过设置visibility: visible;使得子元素显示。

元素无效、原有的元素绑定的事件监听无效。

//元素显示:visibility: visible;

------------------------------------------------------------------------------------------------------------------------------

③ opacity: 0;   元素隐藏、占空间。更改该属性时DOM树结构没有变化、不会引起页面重新布局,只可能会重新渲染——重绘。

可以被子元素继承,不可以通过设置opacity: 1;使得子元素显示。

元素不显示、原有的元素绑定的事件监听有效。

//元素显示:opacity: 1;

 

css样式中元素隐藏的三种方式以及区别

标签:三种方式   strong   --   dash   页面   事件   不可   isp   通过   

原文地址:https://www.cnblogs.com/xuwennn/p/13098804.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!