CSS中隐藏页面元素
一、什么是DOM
- DOM(Document Object Model),通过DOM,可以改变网页内容 , 结构 和 样式
- DOM树
- 文档 : 页面是文档 , DOM 中用 document 表示
- 元素 : 标签就是元素 , DOM 中用element表示
- 节点 : 所有内容( 标签 , 属性 , 文本 , 注释) ,DOM中用 node 表示
DOM 把以上内容看成对象
二、 影藏元素的方法
| display: none | visibility: hidden | opacity: 0 | |
|---|---|---|---|
| 页面中 | 不存在 | 存在 | 存在 |
| 回流 | 会 | 不会 | 不会 |
| 重绘 | 会 | 会 | 不一定 |
| 自身绑定事件 | 不触发 | 不触发 | 可触发 |
| transition | 不支持 | 支持 | 支持 |
| 子元素可复原 | 不能 | 能 | 不能 |
| 被遮挡的元素可触发事件 | 能 | 能 | 不能 |
三、其他方法
设置height、width属性为0
将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素
特点：元素不可见，不占据页面空间，无法响应点击事件
position:absolute
特点：元素不可见，不影响页面布局
clip-path
特点：元素不可见，占据页面空间，无法响应点击事件
