要想了解visibility: hidden与display:none的区别,我们还是先来看看他们各自的定义及用法。
visibility属性
定义:
visibility 属性规定元素是否可见
说明:
这个属性指定是否显示一个元素生成的元素框,它是仍然占据基本空间的,只是不可见而已。值设置成collapse在表格中用于从表格布局中删除列或行。
可能的值
visible | 默认值。元素是可见的。 |
hidden | 元素是不可见的。 |
collapse | 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 |
inherit | 规定应该从父元素继承 visibility 属性的值。 |
浏览器支持:所 有主流浏览器都支持 visibility 属性 任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "collapse" 属性值。不过也没关系,可以忽略IE,现在IE都不叫IE了,叫Edge了。虽然它来得有点晚,但是总算来了。
display属性
定义:
display 属性规定元素应该生成的框的类型。
可能的值
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
inherit | 规定应该从父元素继承 display 属性的值。 |
浏览器支持:所有主流浏览器都支持 display 属性。
总结:如果想不可见的元素占据页面上的空间,那么请使用 "visibility" 属性来创建占据页面空间的不可见元素。如果想不可见的元素不占据页面上的空间,那么请使用 "display" 属性来创建不占据页面空间的不可见元素。
相关推荐
visiblity:hidden和display:none属性之间的差异
前言: 在使用css隐藏栏位或物件的时候, 常常会使用到display:none和visibility:hidden这两个属性, 但却很容易分不清楚这两个的差别, 或是乾脆同时使用两种属性,来确保物件一定被隐藏, 其实我们可以很简单的来...
CSS隐藏元素 display visibility opacity的区别 display:none和visibility:hidden的区别 对比总结: height:0和overflow:hidden的组合
在CSS中,让元素隐藏指屏幕范围内肉眼不可见的方法很多,只不过有的依然保留空间,而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理,感兴趣的你可不要错过了哈
display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible 当display为none,visibility为hidden时,元素都会不见。不过其还有不同之处。 display会将元素隐藏掉,并且位置不再被占据,而...
复制代码代码如下:{ display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } { position: relative; ...
查找display:none的tr元素,$(“tr:hidden”) :visible 匹配所有可见元素 查找所有display不为none的元素,$(“tr:visible”) 例子: <tr id=onestyle><td>1</td><td>2</td></tr> <tr id=twostyle=visib
之间的一些区别,当html元素被设置为display:none;后,浏览器不会解析该元素,“none”就是没有,消失了,所以他不会再文档流中占位。而visibility:hidden;仅仅是视觉上消失了,“hidden”也就是隐藏了,但是它所在...
display:none和visibility:hidden的区别 1.visibility:hidden 将元素隐藏,空间不释放 使用后仅仅视觉上看不见 所占据空间仍然存在 2.display:none 将元素显示设为无 空间释放 各种属性丢失 opacity的兼容...
inlineblockinline-blocknone把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留。 那么,display:inline、display:block和display:inline-block有什么区别呢? 复制代码代码...
在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素...
visibility隐藏的对象还保留对象显示时所占的物理空间,display则不保留。 vilibility:hidden(隐藏)、visible(显示) style="vislbility:hidden" display:none(隐藏)、block(显示) style="display:none" 可以保存...
1、display:none 这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略; 屏幕阅读器会忽略被隐藏的文字。 2、visibility: hidden 这种方法隐藏了文字却仍然占据物理空间。 更好的方法: overflow:hidden ....
可见性过滤器 可见性过滤器根据元素的可见性和不可见性来选择相应的元素。...注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none、input 表单类型为type=”hidden”和visibility:hid
/* reset */ ...padding:0;...visibility:hidden;width:0;height:0;}.container, .clearfix {display:inline-block;}* html .container,* html .clearfix {height:1%;}.container, .clearfix {display:block;}
简单切换 受 Gumby 框架切换/开关插件启发的简单 jQuery 插件。 它允许您通过在触发器元素中指定... 这意味着在您的样式表中,您需要使用visibility: hidden或display: none来隐藏目标元素,并创建一个具有visibility:
与visibility: hidden;的区别 2.外边距折叠(collapsing margins) 3.z-index是什么?在position的值什么时候可以触发? …… 三.JS高频面试题 1.介绍JS有哪些内置对象? 2.如何最小化重绘(repaint)和回流(reflow)?3....
以下代码可以这么解释: 复制代码代码如下: .clearfix:after { <...注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已; line-height: 0; <—-行高为0; height: 0; <—
clearfix的定义: 复制代码代码如下: .clearfix:after {}{ content: ...注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;*/ line-height: 0; /**//*行高为0;*/ height: 0; /**/