个人博客地址 www.codermjjh.cn/ 大家走过路过不要错过
元素的隐藏
- 方法一: display设置为none
- 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
- 方法二: visibility设置为hidden
- 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
- 默认为visible, 元素是可见的;
- 方法三: rgba设置颜色, 将a的值设置为0
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
- 方法四: opacity设置透明度, 设置为0
- 设置整个元素的透明度, 会影响所有的子元素;
隐藏元素的方法有哪些
| 属性 | 作用 | 影响 |
|---|---|---|
| display: nono | 不会渲染，不会占据页面位置，不会响应监听事件 | |
| visibility: hidden | 会在页面中占据空间，不会响应监听事件 | |
| opacity: 0 | 将元素透明的设置为0 | 在页面中占据空间，会响应监听事件 |
| position: absolute | 通过绝对定位将元素移除可视范围 | 会渲染，会占据空间，会响应，但是不在操作范围内 |
| z-index: 负值 | 用其他元素来遮住元素 | 会渲染，会占据空间，会响应；但是不在操作范围内 |
| clip/clip-path | 使用元素裁剪的方式实现隐藏 | 会占据空间，但是不会响应监听事件 |
| transform: scale(0,0) | 将元素缩放为0，来实现元素的隐藏 | 会占据空间，但是不会响应监听事件 |
