`
maomaozgc
  • 浏览: 333882 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

display:none和visible:hidden之间的区别

 
阅读更多
display:none和visible:hidden都是把网页上某个元素隐藏起来的功能,
但两者有所区别,经过亲自实验,我发现使用visible:hidden属性会使对象不可见,
但该对象在网页所占的空间没有改变(看不见但摸得到),等于留出了一块空白区域,
而display:none属性会使这个对象彻底消失(看不见也摸不到)。
分享到:
评论

相关推荐

    visiblity:hidden和display:none的差异

    `visibility:hidden` 和 `display:none` 的主要区别在于,前者隐藏元素的同时保留其占据的空间,而后者则完全从布局中移除元素。这种差异在处理页面布局时尤为关键。例如,如果一个元素的 `display` 被设置为 `none`...

    实例详解display:none与visible:hidden的区别

    总的来说,理解 `display:none` 和 `visibility:hidden` 的区别对于优化网页性能和用户体验至关重要。正确使用它们可以让你更好地控制网页元素的可见性和布局,提升网站的可访问性和可用性。在实际工作中,应根据...

    javascript获取隐藏元素(display-none)的高度和宽度的方法.docx

    ### JavaScript 获取隐藏元素 (display: none) 的高度和宽度的方法 #### 一、问题背景与需求分析 在前端开发过程中,经常会遇到需要获取隐藏元素尺寸的情况。这些元素可能因为某些逻辑原因被设置为 `display: none...

    css中display和visibility的用法和区别介绍

    在CSS中,`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态,但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值: 1. `block`:将元素转换为...

    CSS:Visibility 和 Display 属性的比较.pdf

    `visibility`属性有四个可选值:`visible`(默认值,元素可见)、`hidden`(元素不可见但保留空间)、`collapse`(仅对表格元素有效,移除元素但不影响布局)和`inherit`(继承父元素的`visibility`值)。...

    display与visibility的区别

    测试 "hidden" 和 "visible" 的变化 设置 visibility 时元素的位置不变,但是不能点击。 (this)" style="color:blue;position:relative;cursor:hand;"> 蓝色文本 点击查看效果。 ``` 在这个例子中: - 第一...

    form表单中什么隐藏属性可以随表单提交

    visibility属性通常有两个值:visible(可见)和hidden(隐藏)。当一个表单元素的visibility属性被设置为hidden时,该元素虽然在页面上不会显示,但仍然占据了它原来的空间,并且它的数据会被包含在表单提交中。这...

    CSS:Visibility和Display属性的比较.pdf

    它有四个可能的值:`visible`(默认,元素可见)、`hidden`(元素不可见,但保留其占用的空间)、`collapse`(主要用于表格,移除元素但不影响布局)和`inherit`(继承父元素的`visibility`值)。当设置`visibility`...

    display和visibility的区别示例介绍

    在网页布局和样式设计中,`display` 和 `visibility` 是两个非常重要的CSS属性,它们都能用来控制元素的可见性,但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别,并通过示例来具体说明。 首先,`...

    谈谈CSS隐藏元素(display,visibility)的区别

    在CSS中,隐藏元素主要有两种方法:`display: none` 和 `visibility: hidden`,它们在隐藏元素的同时,对页面布局和交互性有着不同的影响。此外,还有一些其他的技术,如设置`height: 0`结合`overflow: hidden`或者...

    jQuery可见性过滤器:hidden和:visibility用法实例

    本文实例讲述了jQuery可见性过滤器:hidden和:visibility用法。分享给大家供大家参考。具体分析如下: :hidden 匹配所有不可见元素,如果使用css的visibility属性让元素不显示但是占位,则不属于hidden了 查找...

    前端大厂最新面试题-2020作业帮前端社招面经.docx

    * display: none 和 visibility: hidden 区别:display: none 和 visibility: hidden 都可以隐藏元素,但是它们之间有所区别。display: none 会将元素从文档流中移除,而 visibility: hidden 只是将元素隐藏不会影响...

    jQuery的中 is(‘:visible’) 解析及用法(必看)

    `:visible`选择器的基本原理是检查元素的CSS属性,如`display`和`visibility`,以及其尺寸和父元素的状态,来确定元素是否可见。以下是一些使元素被视为不可见的情况: 1. **设置为 `display:none`**:当一个元素的...

    【案例】元素的显示与隐藏的运用--元素遮罩

    通过CSS的`display`、`visibility`、`opacity`、`position`和`background-color`等属性,以及JavaScript的动态操作,可以创造出丰富多样的用户界面效果。熟练掌握这些技巧,对于提升网页的交互性和美观性至关重要。...

    微信小程序中hidden不生效原因的解决办法

    因此,在某些情况下,可能需要根据实际需求来选择使用`hidden`还是`display: none`。 此外,还有一种可能的情况是,当元素内部有其他设置了`z-index`的子元素时,`hidden`可能也会失效。在这种情况下,需要检查并...

    《HTML5网页设计》练习4.pdf

    5. `overflow`属性的常用值有`visible`、`hidden`、`auto`和`scroll`。 6. `position`属性的常用值有`static`、`relative`、`absolute`和`fixed`。 7. 边框样式属性包括`solid`(实线)、`dashed`(虚线)、`dotted`...

    三星9305收索

    top:3px}#shouji{margin-right:14px}#u{display:none}#c-tips-container{display:none}.bdsug{position:absolute;width:418px;background:#fff;display:none;border:1px solid #817f82}.bdsug li{width:402px;color:...

Global site tag (gtag.js) - Google Analytics