`

display:none与visible:hidden的区别

 
阅读更多

http://www.cnblogs.com/nicholas_f/archive/2009/03/27/1423207.html

 

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。（在网页中不占用空间）

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。（看不到，但是在网页中还占用空间）

例子：

<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
</body>
</html>

分享到：
| struts2使用jQuery Ajax简单配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    visiblity:hidden和display:none的差异

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

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

    总结一下，`display:none` 和 `visibility:hidden` 的主要区别在于： - `display:none` 会完全移除元素在布局中的存在，而 `visibility:hidden` 只是让元素变得不可见，但保留其在布局中的位置。 - `display:none` ...

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

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

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

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

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

    综上所述，我们可以得出结论：在form表单中，具有visibility=hidden或display=none属性的表单元素的数据都会被提交，而具有disabled=true属性的表单元素的数据则不会随表单一起提交。这在设计表单界面时非常有用，...

    display与visibility的区别

    ### Display与Visibility的区别 在网页布局与样式设计中，`display`与`visibility`属性是控制元素显示状态的两种常用方式。尽管它们都能达到隐藏或显示元素的目的，但两者之间存在本质的区别。本文将深入探讨这两种...

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

    然而，使用`visibility:hidden`或`display:none`来隐藏内容并不一定被视为恶意行为，尤其是当这些属性用于创建交互效果或响应式设计时。搜索引擎通常能够识别并理解这些技术，只要不是用来欺骗，一般不会对网站排名...

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

    - **回流与渲染**：与`display: none`不同，`visibility: hidden`不会引起浏览器的回流，因为它只是隐藏了元素内容，而元素的尺寸保持不变。 - **株连性**：虽然`visibility: hidden`会使元素本身不可见，但其子...

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

    例如，当需要隐藏一个`flex`容器中的某个子元素时，可以设置`display: none`： ```css .hidden-item { display: none; } ``` 此外，还可以使用CSS的伪类选择器如`:hover`、`:focus`等，实现元素在特定状态下的...

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

    此外，`:visible`选择器常与其他jQuery方法结合使用，如`hide()`、`show()`、`slideUp()`和`slideDown()`，来实现动态显示和隐藏元素的效果。下面是一个示例，演示如何在点击`&lt;dt&gt;`元素时，切换相邻的`&lt;dd&gt;`元素的...

    display和visibility的区别示例介绍

    当 `display` 设置为 `none` 时，元素不仅会被隐藏，而且不会占用任何空间，周围的元素会填补它原本应占据的位置。例如，以下代码中的 `&lt;div&gt;` 元素在页面上是不可见的，并且不会影响其他元素的布局： ```html ...

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

    本文实例讲述了jQuery可见性过滤器：hidden和：visibility用法。...查找所有display不为none的元素，$(“tr:visible”) 例子： &lt;tr id=onestyle&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt; &lt;tr id=twostyle=visib

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

    这里需要注意的是，`display: none`不仅会隐藏元素，还会使其不占据任何空间，这与`hidden`属性隐藏但占用空间的行为不同。因此，在某些情况下，可能需要根据实际需求来选择使用`hidden`还是`display: none`。 此外...

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

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

    三星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:...

    jQuery中:visible选择器用法实例

    这里的"可见"是指元素的`display`值不是`none`，并且`visibility`值不是`hidden`。这通常意味着元素占据着页面的空间，并且内容可以被用户看到。`:visible`选择器常常与其他选择器（如类选择器、ID选择器、元素选择...

    鼠标移动到图片上后切换为另一个图片

    通常，第二个图片会通过CSS设置为隐藏，例如`display:none`。 ```html &lt;img id="hoverImage" src="hover_image.jpg" style="display:none;"&gt; ``` 2. **CSS样式**： 接下来，你可以使用CSS来调整图片的布局和样式...

Magicbox
Global site tag (gtag.js) - Google Analytics