`

display:none与visible:hidden的区别

 
阅读更多

http://www.cnblogs.com/nicholas_f/archive/2009/03/27/1423207.html

 

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

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。（在网页中不占用空间）

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。（看不到，但是在网页中还占用空间）

例子：

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

分享到：
| struts2使用jQuery Ajax简单配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    实例详解display:none与visible:hidden的区别

    display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见...

    jQuery的显示和隐藏方法与css隐藏的样式对比

    display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也...

    display和visibility的区别示例介绍

    display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible 当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。 display会将元素隐藏掉，并且位置不再被占据，而...

    jQuery可见性过滤器：hidden和：visibility用法实例

    本文实例讲述了jQuery可见性过滤器：hidden和：visibility用法。...查找所有display不为none的元素，$(“tr:visible”) 例子： &lt;tr id=onestyle&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt; &lt;tr id=twostyle=visib

    jQuery的中 is(‘:visible’) 解析及用法(必看)

    • 设置为 display:none • type=”hidden” 的表单元素 • Width 和 height 设置为 0 • 隐藏的父元素（同时隐藏所有子元素） 语法 $(“:visible”) $(document).ready(function() { $('#faq').find('dd').hide()...

    三星9305收索

    top:3px}#shouji{margin-right:14px}#u{display:none}#c-tips-container{display:none}.bdsug{position:absolute;width:418px;background:#fff;display:none;border:1px solid #817f82}.bdsug li{width:402px;color:...

    举例讲解jQuery中可见性过滤选择器的使用

    可见性过滤器 可见性过滤器根据元素的可见性和不可见性来选择相应的元素。...注意：:hidden 过滤器一般是包含的内容为：CSS 样式为display:none、input 表单类型为type=”hidden”和visibility:hid

    display和visibility的区别

    vilibility：hidden(隐藏)、visible(显示) style="vislbility:hidden" display：none(隐藏)、block(显示) style="display:none" 可以保存下面的代码看看效果。 具体步骤： 代码示例： &lt; span xss=removed&gt;&lt;/span&gt; ...

    JS中style.display和style.visibility的区别实例说明

    在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素...

    好看的下拉菜单

    .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block...

    jQuery 仿必应的首页效果

    display:none} .box{ width:956px; height:512px;} .s_box{position:absolute;z-index:9999px; width:38px;height:38px;border:1px #000 solid;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);} .s_box ...

    javascript与CSS复习(二)

    它有两个值：visible（默认的）和hidden（不可见的）， 例如： 代码如下: &lt;p&gt;Hello &lt;b&gt;John, how are you today?&lt;/p&gt; 浏览器中是：Hello John, how are you today? 接着我们把John所在b的visibility设置为hidden后，...

    CSS属性中Display与Visibility区别分析

    visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示， visible表示显示， hidden表示（仅）隐藏，不可恢复。 当visibility被设置为"hidden"的时候，元素虽然被隐藏了， 1、仍然...

    js将控件隐藏及display属性的使用介绍

    当style.display=”block”或style.visibility=”visible”时控件或见，当style.display=”none”或style.visibility=”hidden”时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时...

    JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。...document.getElementById("EleId").style.display="none"; do

    js将控件隐藏的方法及display属性介绍

    当style.display=”block”或style.visibility=”visible”时控件或见，当style.display=”none”或style.visibility=”hidden”时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时...

    js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的... 方法二： 代码如下: document.all[“panelsms”].style.display=”none”; document.all[“panelsms”].style.display=”inline”; 方法一隐藏后 页面的位置还被控件占用 只是不显

    js控制容器隐藏出现防止样式变化的两种方法

    方法二： 代码如下: document.getElementById(“控件ID”).style.display=”none”; document.getElementById(“控件ID”).style.display=”inline”; 方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net...

Magicbox
Global site tag (gtag.js) - Google Analytics