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 ...
随机推荐
- 《BI那点儿事》数据流转换——模糊查找转换
BI项目中经常会有一些提取,转换,数据处理(ELT)的工作,其中最主要的是处理过赃数据.假设在项目中我们向数据库中注入了测试数据,但是通过一个外键从另外一个表中载入数据的时候没有对应的数据,那么这一行 ...
- Windows2012安装IIS和FTP
Windows2012安装IIS和FTP 1.打开Windows 2012的服务器管理器,选择 管理→添加角色和功能 2.进入 添加角色和功能向导,选择 “Web服务器(IIS)” 3.根据情况选 ...
- myeclipse中disable maven nature
1.直接原因:出现这个问题,一般都是因为手抖误操作. 但是出现了问题,还不知道从何查起. 可能出现的场景是eclipse安装Maven插件后,右键项目却找不到Maven按钮,继而无法编译项目. 2.实 ...
- b.Connector配置解析
前面讲解到Tomcat中使用Digester框架进行server.xml到javaBean对象的映射,这篇文章以Connector的SSL通道为例,来讲解Connector的属性是如何注入的. 先看一 ...
- MyBatis/Ibatis中#和$的区别
1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111&qu ...
- Xcode 8 的 Debug 新特性
Contents OverView Static Analyzer Localizability Instance Cleanup Nullablility Runtime Issue View De ...
- Objective－C（ block的使用）
block block用来保存一段代码 block的标志:^ block跟函数很像:可以保存代码.有返回值.有形参.调用方式跟调用方法一样 block内部可以访问外面的变量 默认情况下,block内部 ...
- 介绍开源的.net通信框架NetworkComms框架之九 合并DLL
原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架 作者是英国人 以前是收费的 目前作者已经开源 许可是 ...
- hdu 4642 Fliping game
http://acm.hdu.edu.cn/showproblem.php?pid=4642 对于给定的矩阵 操作步数的奇偶性是确定的 奇数步Alice赢 否则Bob赢 从左上角向右下角遍历遇到1就进 ...
- 【个人使用.Net类库】（4）验证码类
验证码是现在管理系统常用的一种保护用户帐户信息的一种功能. 验证码可以有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试,虽然这可能是我们登录麻烦一点,但是对用户的密码安全来 ...