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{ ...
随机推荐
- Java 集合深入理解(7):ArrayList
点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情有点美丽,学学 ArrayList 放松下吧! 什么是 ArrayList ArrayList 是 Java 集合 ...
- c#使用正则表达式替换html标签
/// <summary> /// 去除HTML标记(用正则彻底去除HTML\CSS\script代码 ) /// </summary> /// <param name= ...
- linux下查看所有用户以及用户组
groups 查看当前登录用户的组内成员groups gliethttp 查看gliethttp用户所在的组,以及组内成员whoami 查看当前登录用户名 /etc/group文件包含所有组/etc/ ...
- dedecms织梦
dedecms的安装,其修改连接数据库文件是:common.inc.php
- iptables导致数据包过多时连接失败
前几天做服务器压力测试,本地10个线程不停的去向服务器建立连接,然后请求数据,然后连接再关闭,程序每运行几万次之后就会发现客户端程序没办法connect服务器,connect超时. 一开始怀疑是自己服 ...
- MySQL数据库性能优化的关键参数(转)
我们在进行数据库管理和开发中经常会遇到性能问题,这就涉及到MySQL的性能优化.通过在网络上查找资料和笔者自己的尝试,我认为以下系统参数是比较关键的: 关键参数一:back_log 要求 MySQL ...
- Linux netlink机制
netlink 是一种特殊的 socket,它是 Linux 所特有的,类似于 BSD 中的AF_ROUTE 但又远比它的功能强大,目前在最新的 Linux 内核(2.6.14)中使用netlink ...
- HTTP 2.0 与 tomcat
tomcat 支持http2.0吗? 首先,HTTP2.0协议一级公布,只是推广和各个中间件软件的适配需要时间. stackoverflow里“Tomcat support for HTTP/2.0? ...
- win7 一些快捷系统工具命令
1.cleanmgr: 打开磁盘清理工具 2.compmgmt.msc: 计算机管理 3.conf: 启动系统配置实用程序 4.charmap: 启动字符映射表 5.calc: 启动计算器 6.chk ...
- ZOJ 1037 Gridland
原题链接 题目大意:给出一个格子图,求走完所有节点的最短路径距离. 解法:简单啊,如果都是奇数,可以走一次斜边,其他情况就是长*宽. 参考代码: #include <stdio.h> in ...