CSS中:display:none与visible:hidden的区别
display:none视为不存在且不加载,即,不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失。
visibility:hidden隐藏,但在浏览时保留位置,即,使对象在网页上不可见,但该对象在网页上所占的空间没有改变。
使用 display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;
而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。也即是说它仍具有高度、宽度等属性值。
代码演示:
表格初始状态:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table id="table1" style="border: 2px dashed red;background-color: #e2e2e2;padding: 5px">
<tr>
<td>A1
</td>
<td>A2
</td>
</tr>
<tr>
<td>B1
</td>
<td>B2
</td>
</tr>
</table>
</body>
</html>
效果如下:
在表格第二行的 tr 加上 style="display:none"后:
在表格第二行的 tr 加上 style="visibility:hidden"后:
CSS中:display:none与visible:hidden的区别的更多相关文章
- 个人收集(转载)CSS中 display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...
- css中display:none与visibility: hidden的区别
display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...
- display:none与visible:hidden的区别 slideDown与
display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被 ...
- Readonly和disabled的区别 display:none和visible:hidden的区别
怎样使input中的内容为只读,也就是说不让用户更改里面的内容. <input type="text" name="input1" value=" ...
- display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
- CSS样式display:none和visibility:hidden的区别
同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...
- 【javascript】jq之display:none与visible:hidden
今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给目标元素附加一个"display: none"属性,那么如果在类似于下面的布局中 ...
- jq之display:none与visible:hidden
http://www.cnblogs.com/linxiong945/p/4075146.html 今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给 ...
- display:none与visible:hidden区别
if(list.style.display=='none'){ list.style.display='block'; }else{ ...
随机推荐
- Jul_31 PYTHON REGULAR EXPRESSIONS
1.Special Symbols and Characters 1.1 single regex 1 . ,Match any character(except \n) ^ ,Match start ...
- PHP使用mysqli操作MySQL数据库
PHP的 mysqli 扩展提供了其先行版本的所有功能,此外,由于 MySQL 已经是一个 具有完整特性的数据库服务器 , 这为PHP 又添加了一些新特性 . 而 mysqli 恰恰也支持了 这些新特 ...
- PHP图像处理之画图
PHP图像处理 画图 验证码,统计图 安装GD库-----LAMP 安装后在D:\APMServ5.2.6\PHP\ext文件中有php_gd2.dll文件 ...
- 程序员是怎么炼成的---OC题集--练习答案与题目(2)
1.objective-c中有垃圾回收机制吗? 没有像java.C#一样的垃圾回收机制,但是有ARC自动引用计数器技术,根据对象的引用技术来判断对象是否还在使用,如果RC=0,则系统就会销毁对象,实 ...
- CentOS 7.0禁用iptables防火墙
CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. firewall: systemctl start firewalld.service#启动firewal ...
- Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计
Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计 Android Ripple Effect波纹荡漾效果,是Android Materia ...
- 【转】Entity Systems
“Favour composition over inheritance” If you haven’t already read my previous post on the problems o ...
- 第一个Sprint冲刺第七天
讨论成员:邵家文.李新.朱浩龙.陈俊金 讨论问题:怎样添加功能 讨论地点:宿舍 遇到问题:编写代码的思路不完整,很混乱 工作进度: 队员工作照:
- 第一个Sprint冲刺第二天
讨论成员:邵家文.朱浩龙.陈俊金.李新 讨论地点:宿舍 讨论内容:安卓开发技术,与后续需要加强的内容 计时功能完成度:刚开始讨论实现的技术
- sdut 2153 Clockwise (2010年山东省第一届ACM大学生程序设计竞赛)
题目大意: n个点,第i个点和第i+1个点可以构成向量,问最少删除多少个点可以让构成的向量顺时针旋转或者逆时针旋转. 分析: dp很好想,dp[j][i]表示以向量ji(第j个点到第i个点构成的向量) ...