CSS-display与visibility

最新推荐文章于 2013-04-26 17:16:53 发布
最新推荐文章于 2013-04-26 17:16:53 发布
阅读量74 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： CSS XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dq201/article/details/83913666
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1>
<P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P>
<P>
<input type=button value="Inline" οnclick="oSpan.style.display='inline'"/>
<input type=button value="Block" οnclick="oSpan.style.display='block'"/>
<input type=button value="None" οnclick="oSpan.style.display='none'"/>
<input type=button value="Hidden" οnclick="oSpan.style.visibility='hidden'"/>
<input type=button value="Visible" οnclick="oSpan.style.visibility='visible'"/>
</P>
<UL>
<LI>将元素设为 block，会在该元素后换行。</LI>
<LI>将元素设为 inline，会消除元素换行。</LI>
<LI>将元素设为 none，隐藏该元素内容。并且该元素所在位置被其它内容填充。</LI>
<LI>将元素设为 Visibility:hidden，隐藏该元素内容。但在页面上保留该元素的空间。</LI>
<LI>将元素设为 Visibility:visible，元素可见。</LI>
</UL>
<ul>
<li>
visibility: visible<br/>
/* 元素可见，默认值 */<br/>
visibility: hidden
/* 元素不可见，但仍然为其保留相应的空间 */<br/>
visibility: collapse<br/>
/* 只对 table 对象起作用，能移除行或列但不会影响表格的布局。如果这个值用在 table 以外的对象上则表现为 hidden 。 */<br/>
visibility: inherit<br/>
/* 继承上级元素的 visibility 值。 */<br/>
</li>
</ul>
<ul>
<li>
display: none<br/>
/* 元素不可见，并且不为其保留相应的位置 */<br/>
display: block<br/>
/* 表现为一个块级元素（一般情况下独占一行） */<br/>
display: inline<br/>
/* 表现为一个行级元素（一般情况下不独占一行） */<br/>
</li>
</ul>
</body>
</html>

[b]以上内容非原创，都是从别人的站点上东拼西凑，记录下来的。
在此感谢上述相关内容的原创者！[/b]
dq201
关注
专栏目录
CSS Display与Visibility的不同
09-27
在CSS布局中，`display`和`visibility`是两个非常重要的属性，它们分别负责控制元素的显示方式和可见性。虽然两者都能使元素在页面上不可见，但它们的机制和影响是不同的。 首先，`visibility`属性主要用于决定元素...
解决CSS中 display 与 visibility 的区别
10-31
CSS中display和visibility属性都是用于控制页面元素的显示与隐藏的，但是它们在实现方式和效果上有本质的区别。理解这两个属性的不同对于Web前端开发至关重要，尤其是在进行动态网页制作时，合理使用这些属性能够更...
HTML之CSS 布局 - display 属性
最新发布
11-02
`display` 属性是CSS中不可或缺的一部分，它对网页布局起着至关重要的作用。通过`display`属性，我们可以控制HTML元素的显示方式，从而实现各种复杂的布局效果。下面我们将深入探讨`display`属性的原理、用途及其...
CSS属性中Display与Visibility区别分析
09-25
在CSS中，`display`和`visibility`两个属性都是用于控制元素的可见性，但它们之间存在着本质的区别。首先，`visibility`属性主要用于决定元素是否可见，而不改变元素的布局。当`visibility`设置为`hidden`时，元素的...
struts标签中的styleId属性
duqiangcise
10-27 1772
在项目当中为了要适应火狐浏览器。在选择日期控件时必须要加入一个ID，因为在firefor中只认ID,必须是通过ID来获取其中的一个对象，才能把所选择的时间加入到 输入框中。项目中采用的是struts标签来做的（为了刷新时保留其中的值）。 大家可能知道通常的做法是（不采用struts标签）： 那么在struts中用property="sDate" 它直接翻译成的html为：...
js中的正则表达式(match,RegExp)
duqiangcise
10-06 1639
[b][size=xx-small][size=x-small]JS中正则表达式[/size][/size][/b] [code="java"] 一：正则表达式的创建方式 1.文字格式，使用方法如下： /pattern/flags(即：/模式/标记) 2.RegExp构造函数，使用方法如下： new RegExp("pattern"[,"flags"])(即：new RegExp(...
关于<option></option>标签的title属性问题
duqiangcise
10-21 700
[code="java"] New Document //由于标签的title属性在有些浏览器上不能够正常工作， //因此我们找了一个解决方法（在标签上做文章，具体方法如下:） new1 new2 new3 new4 [/code] ...
Javascript中tabIndex属性的应用
duqiangcise
10-27 600
[b][size=large]tabindex 属性 -- 代表使用"Tab"键的遍历顺序[/size][/b] [i] tabIndex 的用处很简单，就是利用tab键遍历页面的表单元素和链接，按照tabindex的大小决定遍历时的顺序。虽然微不足道，但这是任何一个WEB应用应当具备的亲用力，保证用户在没有鼠标的情况下（如WAP）仍然可以正常使用。 下面的例子，为了突现tabIndex控...
Input的size与maxlength属性的区别
duqiangcise
10-23 476
最近做项目用到input的size和maxlength属性，以前只顾用没有用心去看看这2个标签的区别，今天周末baidu了一下，有所理解。特记录于此！ [b] Name: Name2: [/b] maxlength="5",则input输入框中只能够输入5个字符 size="5"，表示input输入框只显示5个可见的字符，但你可以输入'无数'多字符内容 即：size属性规定输入字...
关于设置了setMaxAge(0)而浏览器未成功删除Cookie的注意事项
duqiangcise
04-26 421
最近做了个系统，其中涉及到对Cookie的操作。当用户登录时，设置一些数据到Cookie中，用户登出系统的时候删除写入浏览器中的对应Cookie。 问题就出在登出系统时，在firebug中看到需要删除的Cookie并没有删除掉。 最后经过自己的debug，终于找到了问题的所在。 直接上代码： [size=medium][b]登录时写Cookie：[/b][/size] [code...
导入css的4种方式和导入js的方式
duqiangcise
06-21 363
[b]导入css的4种方式：[/b] 方式一： 方式二： 方式三： 方式四： [b]导入js的方式：[/b] 具体使用方式见附件！ 附带记录一下java的小常识： [code="java"]boolean 1 占1bit，1/8byte，但因为内存的最小寻址单元是byte，所以占1byte（只有一位是0，其余7位是空的！）...
JS空字符串被任意字符分割后的长度
duqiangcise
10-12 361
在js中一个空字符串(不是null),无论被什么字符分割，其分割后的长度都是1，而不是我们想象的0.示例如下： [code="java"] document.write("".split(",").length+"");//长度是1 document.write(''.split("\\").length);//长度是1 [/code...
给数字从右边每三位添加一个逗号
duqiangcise
12-06 307
[code="java"] 给数字从右边每三位添加一个逗号 var str = '12345'; if(str.length > 3){ str = str.replace(/(?=(?:\d{3})+(?!\d))/g,','); } alert(str); 关闭窗口 [/code] [b]...
html中checkbox长度
duqiangcise
08-26 303
checkbox长度为undefinde如何解决 当checkbox的内容为一项时，用javascript获取它长度时为undefined的解决办法，非常简单 如下： 首先了解下CheckBox(多选框): 当页面中有多个CheckBox的时候，它是一个数组，而单个的时候，它就是一个对象。 可以直接用 document.getElementsByName("che...
定义js函数，并让其立即执行
duqiangcise
02-10 272
[b]见如下代码：[/b] [code="java"] New Document ( function(){ alert("run immediate!") } )(); [/code] [i][b]以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。 var ie = !+"\v1...
JavaScript中的undefined，null，NaN(Not A Number)和typeof区别
duqiangcise
05-19 262
[size=medium]JavaScript中的类型分为：undefined,null,number,string,boolean,function和其他Object引用类型。 undefined，null，NaN(Not A Number)和typeof undefined:表示一个对象没有被定义、或没有被初始化、或一个并不存在的对象属性。 null:表示无值。 typeof运算符...
DOM元素的事件捕获和冒泡
duqiangcise
12-24 174
[b]事件： 当HTML页面上发生一个事件时，每个层次上的DOM元素都有机会处理这个事件。 以下面的HTML代码为例： 百度 How are you! 该页面在浏览器上呈现的效果如下图(HTML页面呈现的效果)： 如果单击了页面中的a(锚)元素，那么,和元素全都应该得到响应这次单击的机会。因为这 3个元素同时都处于用户鼠标的指针之下。 允许多个元素...
attachEvent与addEventListener
duqiangcise
05-04 173
attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列） addEventListener方法 用于 Mozilla系列 举例: [code="java"]document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2...
innerText、outerText、innerHTML与outerHTML的区别 实例详解
duqiangcise
10-11 158
innerText、innerHTML与outerHTML、outerText的区别 实例详解 [size=x-small]1.x.innerHTML: 从对象的起始位置到终止位置的全部内容,包括Html标签。 2.x.innerText: 从对象的起始位置到终止位置的内容, 去除Html标签。 3.x.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。[/...
display和visibility属性的区别和应用
"display与visibility的区别" 在CSS中，display和visibility是两个经常被混淆的属性，它们都可以用来控制元素的可见性，但是它们的作用机制和效果却有很大的不同。 display display属性用于控制元素的显示类型，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值