display:none和visibility:hidden

简介: display:none和visibility:hidden

作用

用来隐藏页面的元素。

区别

display:none
被隐藏的元素彻底消失,不占物理位置。使用display:block让其重新显示。
visibility:hidden
仅看不见,仍占据物理空间,但是不能被浏览器发现,不能触发事件。

例:

隐藏元素均未隐藏

<span style=" background-color:yellow"> display:none  </span>
<span style=" background-color:green">我前面是display</span>
<br />
<span style=" background-color:yellow">visibility:hidden;</span>
<span style="background-color:green">我前面是visibility</span>

image.png

隐藏元素加入隐藏属性

<span style="  display:none ;background-color:yellow"> display:none  </span>
<span style=" background-color:green">我前面是display</span>
<br />
<span style="visibility:hidden; background-color:yellow">visibility:hidden</span>
<span style="background-color:green">我前面是visibility</span>

image.png

其他隐藏元素的方法

  1. opacity:0;透明度为0
    仅仅不可见,但仍可被浏览器发现,也就能触发各种事件。
  2. filter: opacity(0);
    同1
  3. transform: scale(0)
    水平竖直方向缩小
  4. width: 0; height: 0;
  5. margin-left: -100%


相关文章
|
2月前
|
前端开发 JavaScript
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
在CSS中,`opacity: 0`、`visibility: hidden` 和 `display: none` 都能隐藏元素,但各有千秋。`opacity: 0` 使元素透明但仍占布局空间;`visibility: hidden` 同样保留空间但使元素完全不可见;而 `display: none` 则彻底移除元素及其所占空间。根据具体需求选择合适方式可优化页面表现与性能。
|
容器
【已解决】text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
1144 0
|
前端开发
display:box、display:flex实现多行文本垂直居中
display:box、display:flex实现多行文本垂直居中
273 0
display:box、display:flex实现多行文本垂直居中
|
Web App开发 前端开发 JavaScript
如何不使用 overflow: hidden 实现 overflow: hidden
如何不使用 overflow: hidden 实现 overflow: hidden
167 0
如何不使用 overflow: hidden 实现 overflow: hidden
|
前端开发 容器
CSS - float & overflow: hidden
CSS - float & overflow: hidden
181 0
|
网络协议
|
网络协议