CSS样式“display:none”与“visibility:hidden”区别
CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏，但是具体的效果是有差别的！下面通过两个小实验来说明这种差异。
实验代码：
<!DOCTYPE html>
<html>
<head>
<title>none</title>
<meta charset="utf-8">
<style type="text/css">
div {
height: 200px;
width: 200px;
text-align: center;
margin: 20px;
}
#div1 {
background-color: #E33;
}
#div2 {
background-color: #33E;
}
</style>
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn').onclick = function(){
document.getElementById('div1').style.display = 'none';
};
}
</script>
</head>
<body>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<button id="btn">hide</button>
</body>
</html>
实验一：使用样式“display:none”隐藏元素。
如上述代码所示，点击按钮时，会为Id为“div1”的div元素添加样式“display:none”。下面开始实验。
左图为点击“hide”按钮之前，页面的显示效果，右图为点击按钮之后的页面效果。
结论一：样式“display:none”会完全隐藏元素，不再占据页面空间！
实验二：使用样式“visibility:hidden”隐藏元素。
首先将上述代码片段修改如下：
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn').onclick = function(){
document.getElementById('div1').style.visibility = 'hidden';
};
}
</script>
下面开始实验，左右两图分别是点击“hide”按钮之前和之后的页面显示效果。
结论二：样式“visibility:hidden”仅仅是隐藏了元素的显示效果，但是仍然占据页面空间！
CSS样式“display:none”与“visibility:hidden”区别的更多相关文章
- CSS样式display:none和visibility:hidden的区别
同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...
- CSS display:none和visibility:hidden区别
你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...
- 个人收集（转载）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和visibility:hidden区别
<!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...
- display:none和visibility:hidden两者的区别
display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...
- display:none;与visibility:hidden;的区别
visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...
- css元素隐藏（display:none和visibility:hidden）
在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css display:none 当使用该样式的时候,HTML元素的宽高等 ...
- CSS魔法堂：display:none与visibility:hidden的恩怨情仇
前言 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...
随机推荐
- java使用split切割字符串的时候，注意转义字符
今天在做项目的时候发现一个奇怪的问题 File file = new File("d:\\a.txt"); BufferedReader br = new BufferedRead ...
- CSS使用总结
1.visibility和display的区别: visibility:visible; 显示visibility:hidden; 隐藏,但是保留元素所占的空间display:block; ...
- Source Insight简介及下载破解
对于长期混迹于.net平台的开发人员来说,研究C源码不是很常见,但是有时候我们不得不涉及c的研究,因为许多优秀的开源软件是用C/C++写就.查看C源码的利器除了VS外,还有另一个,那就是Source ...
- 51nod 1163 最高的奖励(贪心+优先队列)
题目链接:51nod 1163 最高的奖励 看着这题我立马就想到昨天也做了一道贪心加优先队列的题了奥. 按任务最晚结束时间从小到大排序,依次选择任务,如果该任务最晚结束时间比当前时间点晚,则将该任务的 ...
- 使用 Java Service Wrapper 启动java后台进程服务
Java Service Wrapper (http://wrapper.tanukisoftware.com/doc/english/product-overview.html)可以很方便得在各个平 ...
- Linux设备驱动中的并发控制
1.并发是指多个执行单元同时.并行的执行.并发的执行单元对共享资源的访问很容易导致竞态. 在 Linux 内核中,主要的竞态发生于如下几种情况: ①对称多处理器(SMP)的多个 CPU ②单CPU内进 ...
- WinForm多线程学习文档
基础篇 怎样创建一个线程 受托管的线程与 Windows线程 前台线程与后台线程 名为BeginXXX和EndXXX的方法是做什么用的 异步和多线程有什么关联 WinForm多线程编程篇 我的多线程W ...
- linux下用phpize给PHP动态添加扩展
使用php的常见问题是编译php时忘记添加某扩展,后来想添加扩展,但是因为安装php后又装了一些东西如PEAR等,不想删除目录重装,这里就需要用到phpize了. 如我想增加bcmath扩展的支持,这 ...
- CentOS6.4安装Hadoop2.0.5 alpha - Single Node Cluster
1.安装JDK7 rpm到/usr/java/jdk1.7.0_40,并建立软链接/usr/java/default到/usr/java/jdk1.7.0_40 [root@server-308 ~] ...
- IOC-AOP
IOC,依赖倒置的意思,所谓依赖,从程序的角度看,就是比如A要调用B的方法,那么A就依赖于B,反正A要用到B,则A依赖于B.所谓倒置,你必须理解如果不倒置,会怎么着,因为A必须要有B,才可以调用B,如 ...