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{ ...
随机推荐
- 初次使用百度地图API
因为项目需要,不得不使用百度地图的API,以前从未了解过API,这不是唬人,真的,所以对百度地图API充满了恐惧,但是到后面,已经麻木了.期间遇到过很多错误,每一个都弄得头大,借博客的名义把平时遇到的 ...
- 1、C#基础整理(进制转换的方法)
进制 二进制转换为十进制(展权相加法) 110101 =1*2^5+1*2^4+0*2^3+1*2^2+0*2^1+1*2^0 1. 写2 2. 标指数(从右到左) 3. 乘系数(一一对应) 4 ...
- 6、SQL基础整理(日期时间数据类型,转换函数)
日期时间数据类型 *系统常量: @@DATEFIRST(返回当前时间) DATEADD 增加时间 语法:DATEADD (datepart , number , date ) select DATEA ...
- JS运动基础(一)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- MySQL Cluster在线备份和恢复
备份方式 一般MySQL数据库都是用mysqldump命令进行数据备份,其生成的文件实际上是创建对象和导入对象的sql语句. 在MySQL Cluster集群上,可以在管理节点上使用start bac ...
- Sqlserver 角色那些事
固定服务器角色 描述 sysadmin 可以在SQLServer 中执行任何活动. serveradmin 可以设置服务器范围的配置选项,关闭服务器. setupadmin 可以管理链接服务器和启动过 ...
- 纯JavaScrip图表插件——Highcharts
简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.目前H ...
- db2 存储过程 语法 及结果集查询
第一次用存储过程,关于处理待办的,不知道怎么执行和传参数 给存储过程 ,其实就一句话很简单. @call PRC_MISSIONLIST_QUERY('27020214', '27040000', ' ...
- POJ 3264 区间最大最小值Sparse_Table算法
题目链接:http://poj.org/problem?id=3264 Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total ...
- dbcp基本配置和重连配置 -- mysql 8小时自动断开连接的问题
1. 引入dbcp (选择1.4) Java代码 com.alibaba.external jakarta.commons.dbcp 1.4 2. dbcp的基本配置 相关配置说明: initia ...