<!-- display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: -->

<!-- display:none 不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失-->

<!-- visible:hidden 使对象在网页上不可见，但该对象在网页上所占的物理空间没有改变-->

<!-- 需要注意bootstrap中的class='hidden' 是相当于display:none 是不占物理空间的 -->

<!-- 需要注意Jquery中的hide() 是相当于display:none 是不占物理空间的 -->

<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none; 隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden; 隐藏区域</span><span style="background-color:Green">显示区域</span>
</body>
</html>

display:none和visibility:hidden区别的更多相关文章

  1. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

  2. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  3. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  4. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  5. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  6. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  7. display:none和visibility:hidden的区别[]

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

  8. display:none和visibility:hidden v-show和v-if的区别

    隐藏元素display:none 和 visibility:hidden的区别visibility:hidden可以隐藏某个元素,但是隐藏的元素仍要占据空间,仍要影响布局display:none不会占 ...

  9. display:none和visibility:hidden的区别？

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...

随机推荐

  1. jquery模板下载网站

    jquery模板下载网站 http://www.jqshare.com/

  2. vue练手小项目--眼镜在线试戴

    最近看到了一个眼镜在线试戴小项目使用纯js手写的,本人刚学习vue.js没多久,便试试用vue做做看了,还没完善. 其中包括初始图片加载,使用keywords查找,父子组件之间传递信息,子组件之间传递 ...

  3. pygame_polygon

    今天我们要在窗口上绘制简单的多边形 1.认识几个简单的常用的颜色: black=(0,0,0) while=(255,255,255) red=(255,0,0) green=(0,255,0) bl ...

  4. mySQL使用实践

    1.虚拟机安装mySQL 服务器, 宿主机分别使用navicat工具和java代码 访问mySQL,组网图如下: 2. 查看mySQL的服务器状态,如下: 3. 服务器上查看数据库和数据表内容如下: ...

  5. python 携带cookie访问网站（python接口测试post）

    最近在使用自己研究性能测试工具的时候想到,使用python向服务器不断发送数据以作为并发测试.大概情况如下: #coding=utf-8 import urllib2 import urllib im ...

  6. 知识树杂谈Android面试(3)

    一.Activity生命周期? a. Activity四种状态? Running.Paused(透明无焦点).Stopped.killed. b. OnStart() OnRusume区分? 是否可以 ...

  7. 页面固定DIV层CSS代码

    有时候为了用户体验更好些,网页设计师会把网站导航放在一个固定的DIV层里面,不随滚动条滚动.本方法是利用CSS,position:fixed属性来固定层,fixed是特殊的absolute,即fixe ...

  8. 要让CLR挂掉的话……

    http://rednaxelafx.iteye.com/blog/460893 (Disclaimer:如果需要转载请先与我联系. 作者:RednaxelaFX -> rednaxelafx. ...

  9. 调试 ms 源代码

    如果需要调试 WPF 源代码或框架源代码,那么需要使用 DotPeek. 首先需要下载 dotPeek ,可以到官网下载 dotPeek: Free .NET Decompiler & Ass ...

  10. hover与click样式冲突

    如果你的hover事件和click事件的样式不同,如元素背景本来是#fff,如果hover时背景是#ddd,点击时背景是#aaa,那么问题是当你点击后,鼠标再移动到这个元素时背景会变成#ddd,而你希 ...