display:none与visibility的区别 - Focus-Fe - ITeye博客

`

zhangyaochun

浏览: 2614031 次
性别:
来自: 北京

最近访客更多访客>>

xiao0556

u012363178

yonysun

jacky2067

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

jertom： <div id="showInfo" ...
addEventListener等事件监听的参数细谈
乌托邦国王：引用[u][/u]
css3动画属性系列之transform细讲移动translate
hvang1988：能提供附件下载吗，找不到js库，google封了访问不了
Syntaxhighlighter---代码高亮插件介绍
sscsacdsadcsd：我的天那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑
wkjiangwk：试了，没用，你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入

display:none与visibility的区别

博客分类：

css基础

css visibility display

阅读更多

多可以用于页面元素的隐藏。

但是visibility:hidden会占地方。

补充一下visibility的可能的值

visible 默认值。元素可见
hidden 元素不可见
collapse 当在表格元素中使用时，此值可删除一行或一列，但是不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素，会呈现”hidden“
inherit 从父元素继承visibility属性的值。

注意：

所有主流浏览器多支持visibility属性
任何 IE的版本多不支持inherit和collapse

分享到：

常用HTML转义和JavaScript转义符 | Ajax系列之XMLHttpRequest对象

2011-10-18 19:05
浏览 2094
评论(0)
分类:Web前端
查看更多

评论

发表评论

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

相关推荐

javascript获取隐藏元素(display:none)的高度和宽度的方法: 为了获取display:none元素的尺寸，一个常见的方法是临时将该元素的display属性更改为visibility:hidden，从而使其获得尺寸信息，再通过计算其样式来获得高度和宽度。但是，这会导致元素暂时变为可见，可能会在页面上...

display:none和visibility:hidden的差别比较与演示代码: 前言：在使用css隐藏栏位或物件的时候，常常会使用到display:none和visibility:hidden这两个属性，但却很容易分不清楚这两个的差别，或是乾脆同时使用两种属性，来确保物件一定被隐藏，其实我们可以很简单的来...

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

css元素隐藏原理及display:none和visibility:hidden: 在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...

css display:none使用注意事项小结: 首先，关于JavaScript与display: none的交互性问题。当一个元素应用了display: none，该元素从渲染树中被移除，不会在页面上占据任何空间。这意味着，如果页面加载后没有使用JavaScript重新将display属性设置为block...

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

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

对比： display, visibility(有代码): 在网页设计和开发中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们用于控制元素在页面上的可见性和布局。这篇博客文章通过代码示例深入探讨了这两个属性的区别和用法。首先，`display` 属性主要用于...

IE/火狐/Chrome操作display:none对象所遇问题解答: 在网页开发中，CSS属性`display: none;`常用于控制页面上的元素是否显示，当设置为`none`时，该元素及其子元素不会出现在渲染的页面上。但是，不同的浏览器在处理`display: none;`时可能会有细微差别，导致在使用...

CSS隐藏元素 display visibility opacity的区别.docx: 2. `visibility:hidden`：与`display:none`不同，`visibility:hidden`的元素仍然占据原有的空间，周围的元素不会移动。尽管元素内容不可见，但元素本身是存在的，可以被点击。由于元素的尺寸保持不变，因此不会触发...

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

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

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

JS中style.display和style.visibility的区别实例说明.docx: JS 中 style.display 和 style.visibility 的区别实例说明在 JavaScript 中，style.display 和 style.visibility 是两种常用的控制元素显隐的方法，但是它们之间有着根本的区别。 style.display style.display ...

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

display与visiblity的区别.pdf: 3. `visibility:hidden`的元素无法响应事件，`display:none`的元素同样无法响应事件，但可以通过改变`display`值使其重新可交互。了解这两个属性的区别，可以帮助开发者更准确地调整网页元素的显示和布局，以达到...

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

CSS：Visibility和Display属性的比较.pdf: 常见的`display`值包括`none`（元素不可见且不占用任何空间）、`block`（元素表现为块级元素，通常独占一行）、以及`inline`（元素表现为行内元素，不独立占行）。设置`display`为`none`后，元素从页面布局中完全...

Global site tag (gtag.js) - Google Analytics