visibility: hidden与display:none的区别
要想了解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" 属性来创建不占据页面空间的不可见元素。
原文:http://yunkus.com/article/div/273.html
转自:visibility: hidden与display:none的区别
visibility: hidden与display:none的区别相关推荐
- [css] 分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景
[css] 分析比较opacity: 0.visibility: hidden.display: none三者的优劣和适用场景 opacity 0: 单纯视觉效果,除了看不见,其他都正常. visib ...
- css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display:none;的区别 、遮罩层效果、 三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器 兄弟选择器 属性选择器 伪类选择器 其他伪类选择器 类元素选择器 直接选择器 否定选择器 伪元素 :after清除浮动 :before和:after 用来写小三角形 首字母 ...
- display:none和visibility:hidden两者的区别
使用css让元素不可见的方法有很多种,裁剪.定位到屏幕外边.透明度变换等都是可以的.但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden.很多公司的面 ...
- display:none和visibility:hidden的区别
在使用CSS隐藏一些元素时,我们经常用到 display:none 和 visibility:hidden.两者差别如下: 1. 是否占据空间 display:none,该元素不占据任何空间,在文档渲 ...
- 【记】jQuery中的选择器:visible对visibility:hidden的处理
首先先介绍visibility这个CSS属性. visibility用于表示该元素是否显示,其取值有: visible:设置对象可视. hidden:设置对象隐藏. collapse:主要用来隐藏表格 ...
- display(block,inline,none),visibility(visible,hidden)之间的关系及区别(不同)
这段时间一直对display属性的block,inline,none和visibility属性的visible,hidden一直很模糊,总觉得很难理解,通过下面这个实例,就可以很好的牢记这几者之间的区 ...
- [css] 说说display:none和visibility:hidden的区别
[css] 说说display:none和visibility:hidden的区别 display:none dom对象不渲染. visibility:hidden 隐藏但是dom对象渲染. 个人简介 ...
- _blank 和 _self的区别以及display:none和visibility:hidden的区别
_blank 和 _self的区别 target=_blank会在当前窗口之外再打开一个新窗口来显示新的页面 target=_self在当前窗口打开新页 面 display:none和visibili ...
- display:none和visibility:hidden和透明度的区别
**当想实现一个区域或者内容的消失(隐藏)**,我们有多种代码可以实现.但是根据要求和用户体验,应该选择最合适的方法实现.代码中最常用的代码包括:display:none; visibility:hi ...
最新文章
- 数论基础--矩阵快速幂 及其例题
- 操作系统原理第九章:虚拟内存
- [svc]visio绘制模具
- uni-app 用户地理位置授权
- Docker添加或者更改容器的端口映射
- java if两个条件_java(3) if结构
- 7 CO配置-控制-一般控制-维护版本
- 安卓学习笔记08:常用布局 - 线性布局
- Java中继承和面向接口的编程
- 工程介绍好处费性质_中间人拿工程好处费是否违法
- Python和Matlab小波分析
- matlab支持向量回归,支持向量回归 MATLAB代码
- Matconvnet完全安装及踩坑实录
- 网络安全专栏——telnet远程登录数据包捕获个性化登录账号及密码(图文丰富 保姆级 有几种错误解决方案 为什么不用输入telnet密码就能登录 )
- 保存网页html 有什么,保存网页时HTML和MHTML区别在哪里
- iPhoneX、iPhoneXS、iPhoneXR、iPhoneXSMax屏幕适配尺寸@media
- 减轻学生过重课业负担的规定
- 51单片机与蜂鸣器实现摩斯密码转换。
- 计算机应用在航天,国产CPU的航天计算机应用
- excel逼死强迫症