转载: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>
分享到:
相关推荐
`visibility:hidden` 和 `display:none` 的主要区别在于,前者隐藏元素的同时保留其占据的空间,而后者则完全从布局中移除元素。这种差异在处理页面布局时尤为关键。例如,如果一个元素的 `display` 被设置为 `none`...
总结一下,`display:none` 和 `visibility:hidden` 的主要区别在于: - `display:none` 会完全移除元素在布局中的存在,而 `visibility:hidden` 只是让元素变得不可见,但保留其在布局中的位置。 - `display:none` ...
### JavaScript 获取隐藏元素 (display: none) 的高度和宽度的方法 #### 一、问题背景与需求分析 在前端开发过程中,经常会遇到需要获取隐藏元素尺寸的情况。这些元素可能因为某些逻辑原因被设置为 `display: none...
在CSS中,`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态,但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值: 1. `block`:将元素转换为...
综上所述,我们可以得出结论:在form表单中,具有visibility=hidden或display=none属性的表单元素的数据都会被提交,而具有disabled=true属性的表单元素的数据则不会随表单一起提交。这在设计表单界面时非常有用,...
### Display与Visibility的区别 在网页布局与样式设计中,`display`与`visibility`属性是控制元素显示状态的两种常用方式。尽管它们都能达到隐藏或显示元素的目的,但两者之间存在本质的区别。本文将深入探讨这两种...
然而,使用`visibility:hidden`或`display:none`来隐藏内容并不一定被视为恶意行为,尤其是当这些属性用于创建交互效果或响应式设计时。搜索引擎通常能够识别并理解这些技术,只要不是用来欺骗,一般不会对网站排名...
- **回流与渲染**:与`display: none`不同,`visibility: hidden`不会引起浏览器的回流,因为它只是隐藏了元素内容,而元素的尺寸保持不变。 - **株连性**:虽然`visibility: hidden`会使元素本身不可见,但其子...
例如,当需要隐藏一个`flex`容器中的某个子元素时,可以设置`display: none`: ```css .hidden-item { display: none; } ``` 此外,还可以使用CSS的伪类选择器如`:hover`、`:focus`等,实现元素在特定状态下的...
此外,`:visible`选择器常与其他jQuery方法结合使用,如`hide()`、`show()`、`slideUp()`和`slideDown()`,来实现动态显示和隐藏元素的效果。下面是一个示例,演示如何在点击`<dt>`元素时,切换相邻的`<dd>`元素的...
当 `display` 设置为 `none` 时,元素不仅会被隐藏,而且不会占用任何空间,周围的元素会填补它原本应占据的位置。例如,以下代码中的 `<div>` 元素在页面上是不可见的,并且不会影响其他元素的布局: ```html ...
本文实例讲述了jQuery可见性过滤器:hidden和:visibility用法。...查找所有display不为none的元素,$(“tr:visible”) 例子: <tr id=onestyle><td>1</td><td>2</td></tr> <tr id=twostyle=visib
这里需要注意的是,`display: none`不仅会隐藏元素,还会使其不占据任何空间,这与`hidden`属性隐藏但占用空间的行为不同。因此,在某些情况下,可能需要根据实际需求来选择使用`hidden`还是`display: none`。 此外...
它有四个可能的值:`visible`(默认,元素可见)、`hidden`(元素不可见,但保留其占用的空间)、`collapse`(主要用于表格,移除元素但不影响布局)和`inherit`(继承父元素的`visibility`值)。当设置`visibility`...
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:...
这里的"可见"是指元素的`display`值不是`none`,并且`visibility`值不是`hidden`。这通常意味着元素占据着页面的空间,并且内容可以被用户看到。`:visible`选择器常常与其他选择器(如类选择器、ID选择器、元素选择...
通常,第二个图片会通过CSS设置为隐藏,例如`display:none`。 ```html <img id="hoverImage" src="hover_image.jpg" style="display:none;"> ``` 2. **CSS样式**: 接下来,你可以使用CSS来调整图片的布局和样式...