display-none-visibilty-hidden

最新推荐文章于 2025-04-25 08:00:00 发布
原创 最新推荐文章于 2025-04-25 08:00:00 发布 · 521 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #visibility #display #重排-重绘 #响应事件

本文对比了CSS中visibility和display属性的不同用法。visibility='hidden'用于仅隐藏元素但保留其位置，而display='none'则完全移除元素并释放其所占空间。两者都会影响页面布局及元素交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

visibility=”hidden”

  • visibility=”hidden”表示（仅）隐藏，不可恢复。当visibility被设置为”hidden”的时候，元素虽然被隐藏了，仍然占据它原来所在的位置。visibility会保留元素的位置。元素被隐藏之后，就不能再接收到其它事件了，也不能再接收响应到事件了，因此也就无法通过JS令其显示出来。
    同时，该属性不会引起页面的reflow和repaint(回流与重绘)；

display=”none”

  • display=”none”隐藏（元素消失），可恢复。当display被设置为”none”的时候，除了元素隐藏之外，与visibility=”hidden”完全相反。即会引起reflow和repaint的同时还会接受响应事件。
CSS权威指南第五版-第17章 变形
leyan1618的博客
02-20 2611
CSS权威指南第五版笔记 第17章 变形
【Web前端面试】葵花宝典（2022版本）—— CSS篇
qq_49002903的博客
06-08 4877
你还在担心面试不过嘛？面试题找不到，小编特意整理了30+道高频前端面试题，送给大家，希望大家都能顺利通过面试，拿下高薪，也可持续关注本面试题专栏。本篇文章主要写的是面试题中的CSS篇，之后会更新前端其他方面相关面试题。.....................
display:none和visibilty:hidden
weixin_43269800的博客
01-02 153
display:none; 隐藏元素（元素将在页面中完全消失）； visibility：hidden 使用visibility隐藏一个元 素，隐藏后其在文档中所占的位置会依然 保持，不会被其他元素覆盖。 ...
visibility: hidden；到底是干什么的？使用场景是什么？底层原理是什么？
长风破浪会有时的博客
11-01 1796
是一个非常有用的 CSS 属性，用于临时隐藏页面上的元素，同时保持页面的布局不变。通过合理使用，可以灵活地控制页面元素的显示状态，而不影响其他元素的位置和尺寸。与相比，在某些场景下提供了更多的灵活性和更好的用户体验。
display:none和visiblity:hidden的区别
qq_44222205的博客
08-10 481
相同 ： 1、两者都能隐藏元素。 不同： 1、display:none 不占页面空间，visiblity:hidden 占据原先页面空间。 这里必须说明的是，元素不占页面空间后，取该元素或其内部元素的宽高值永远是0。如果想隐藏又想取到宽高值，那就得用visiblity:hidden。 2、display:none 的子元素也一定无法显示，visiblity:hidden 的子元素可以设置显示。 display:none元素及其子元素都将隐藏，而visiblity:hidden元素的子元素却可以设置vis.
display:none和visibility:hidden的区别
小小马的博客
09-07 942
display:none 和 visibility:hidden的区别一、空间占据 dispaly:none 隐藏后的元素不占据任何空间 visibility:hidden 隐藏的元素空间依然存在 二、回流与重绘 display:none 隐藏产生重绘 ( repaint ) 和回流 ( relfow ) visibility:hidden 不会产生重绘和回流 三、株连性 一旦父元素使用 displ
display:none 和 visibility:hidden的区别
q1ngqingsky的博客
06-30 599
display:none及visibility:hidden 两者均是隐藏元素，但是还是有区别的区别：dispaly:none  隐藏元素后，不占据文档流--会产生回流和重绘visibility:hidden 隐藏元素，但却占据文档流--会重绘例如：<p>我是第一行元素</p> <p style='display:none'>我是第二行元素</p> ...
`visibility: hidden`和`display: none`区别
最新发布
m0_72030584的博客
04-25 699
`visibility: hidden`和`display: none`区别
前端面试--CSS篇
The_upside_of_down的博客
09-07 1867
前端面试--CSS篇介绍下BFC及其应用怎样让一个div水平垂直居中？介绍下重流和重绘，以及如何进行优化？分别比较opacity：0，visibility：hidden，display：none的优劣和适用场景？简述CSS盒模型简述rem及其转换原理简述伪类和伪元素行内元素的margin和paddingCSS中那些属性可以继承？CSS3新增伪类有哪些？用CSS创建一个三角形min-width/max-width和min-height/max-height属性间的覆盖规则？ 介绍下BFC及其应用 BFC块级格
CSS内联样式的使用，吐血整理
m0_57064830的博客
06-07 815
前言 本文主要是javascript和css方面的基础面试题，适合面试前以及平时复习食用。 基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。 什么？你问我要好的面试题文章，这不
display ， visibility
weixin_45820444的博客
08-15 966
display: none; 与 visibility: hidden; 的区别： 相同： 它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间； visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示； visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设
display:none和visibilty:hidden区别与联系
weixin_43635751的博客
05-15 396
display:none和visible:hidden 相同点：都能把网页上某个元素隐藏起来。 不用点： display:none 不为被隐藏的对象保留其物理空间， 即该对象在页面上彻底消失， 通俗来说就是看不见也摸不到。 渲染时不再占据任何空间， 会让元素完全从渲染树中消失 （DOM树）。 visible:hidden；使对象在网页上不可见，但该对象在网页上所占的空间没有改变， 通俗来说就是看不见但摸得到。 渲染元素继续占据空间，只是内容不可见，不能点击。 ...
display:none与visibility:hidden的区别是什么
sindlly的博客
09-22 932
display : 隐藏对应的元素但不挤占该元素原来的空间。visibility: 隐藏对应的元素并且挤占该元素原来的空间。   即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
opacity: 0、visibility: hidden、display: none 有啥区别
zhoukaibai的博客
05-18 1686
这三种方式的使用场景分别是：● opacity: 0：隐藏元素，但是需要占据原来的空间；需要注意的是，opacity 属性不仅影响元素的可见性，还影响其交互行为（例如点击事件的响应）● visibility: hidden：隐藏元素，但是需要占据原来的空间，并且保持元素布局不变；● display: none：隐藏元素，并且不需要占据原来的空间，也不影响其他元素的布局。
style="visibility: hidden"和 style=“display:none”区别
csdndenglu的专栏
05-22 1820
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。 当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例： ...
visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别
wx112728的博客
03-16 1890
1.作用不同 visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。 display:none; 将元素的显示设为无，在网页中不占任何位置。 2.定义不同 visibility 属性指定一个元素是否可见的 display 这个属性用于定义建立布局时元素生成的显示框类型 visibility:hidden;会触发重绘（repaint） display:none;会触发回流（reflow） 重绘不一定回流，回流一...
转：display:none与hidden区别
qq_33765174的博客
08-03 3978
转：今天做毕设时遇到了一个小问题，我做了一个tab导航栏，点击一个tab页其它tab页隐藏，这时候第一想法是使用display：none来控制显示隐藏，写了之后发现使用display会有一个问题，就是第二个tab页的轮播图是在页面渲染时获取第二个tab页中某个元素的宽度来做自适应效果，因为已经隐藏，宽度为0，所以导致轮播图的高度也为0，后来把display:none改为visibility：hid...
display:none与visible:hidden的区别
weixin_30848775的博客
03-27 320
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 例子： <html> <he...
v-show和v-if有什么区别？和visibilty的区别
07-11
- v-show：通过 CSS 的 display 属性来控制元素的显示和隐藏。元素始终会被渲染到 DOM 中，只是通过修改 display 的值来切换显示状态。 - v-if：通过真实的 DOM 元素的插入和删除来控制元素的显示和隐藏。如果条件为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值