display与visibility属性

创建时间：一月 3th, 2008 Traffic(588)

一、Display

1、语法：display:block / inline / none / compact / marker / inline-table / list-item / run-in / table / table-caption / table-cell / table-column / table-column-group / table-footer-group / table-header-group / table-row / table-row-group

2、参数：

（1）block：块级对象的默认值，用于强制将对象转换为块级元素。

（2）inline：内联对象（行级元素）的默认值，用于强制将对象转换为行级元素。解决IE中margin双倍边距的问题用到的就是此属性。

（3）none：隐藏对象。与visibility属性的hidden值不同，此属性隐藏其所占据的空间，而visibility:hidden属性保留对象所占据空间。

（4）compact：分配对象为块对象或基于内容之上的内联对象。（CSS2）

（5）marker：指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before伪元素一起使用。（CSS2）

（6）inline-table：将表格显示为无前后换行的内联对象或内联容器。（CSS2）

（7）list-item：将块对象指定为列表项目，并可以添加可选项目标志。（CSS2）

（8）run-in：分配对象为块对象或基于内容之上的内联对象。（CSS2）

（9）table：将对象作为块级元素的表格显示。（CSS2）

（10）table-caption：将对象作为表格标题显示。（CSS2）

（11）table-cell：将对象作为表格单元格显示。（CSS2）

（12）table-column：将对象作为表格列显示。（CSS2）

（13）table-column-group：将对象作为表格列组显示。（CSS2）

（14）table-footer-group：将对象作为表格脚注组显示。（CSS2）

（15）table-header-group：将对象作为表格标题组显示。（CSS2）

（16）table-row：将对象作为表格行显示。（CSS2）

（17）table-row-group：将对象作为表格行组显示。（CSS2）

3、说明：

设置对象是否以及如何显示。

对应的脚本特性为：display

4、示例：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> #right { float:left; display:inline; margin:0 0 0 5px; width:128px; height:128px; border:1px #000 solid; } #sub_right { display:none; margin:10px 0 0 10px; float:left; border:1px #000 solid; } #select { clear:left; margin-left:5px; padding-top:5px; width:128px; } select { width:128px; } </style> <script type="text/javascript" language="javascript"> function sel(id) { switch(id) { case "1": document.getElementById("sub_right").style.display = "none"; break; case "2": document.getElementById("sub_right").style.display = "block"; break; case "3": document.getElementById("sub_right").style.display = "inline"; break; } } </script> </head> <body> <div id="right"><div id="sub_right">子对象</div>子对象后面的文字</div> <div id="select"><select onchange="sel(this.value)"><option value="1">onne</option><option value="2">block</option><option value="3">inline</option></select></div> </body> </html>

5、提示

（1）由示例可以看出设置display属性为none后，隐藏原对象是不占用原空间的。

（2）细心的朋友会看出block和inline在IE下的区别，这也是解决IE双倍边距BUG的方法。

二、Visibility

1、语法：visibility : inherit / visible / collapse / hidden

2、参数：

（1）inherit：默认值，继承上一个父对象的可见性。

（2）visible：对象可视。

（3）collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

（4）hidden：对象隐藏。

3、说明：

设置是否显示对象。与display属性不同，设置visibility的属性是hidden隐藏对象后，仍保留原对象的占位。

对应的脚本特性为：visibility。

4、示例：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> #right { float:left; display:inline; margin:0 0 0 5px; width:128px; height:128px; border:1px #000 solid; } #sub_right { visibility:inherit; display:inline; margin:10px 0 0 10px; float:left; border:1px #000 solid; } #select { clear:left; margin-left:5px; padding-top:5px; width:128px; } select { width:128px; } </style> <script type="text/javascript" language="javascript"> function sel(id) { switch(id) { case "1": document.getElementById("sub_right").style.visibility = "inherit"; break; case "2": document.getElementById("sub_right").style.visibility = "hidden"; break; case "3": document.getElementById("sub_right").style.visibility = "visible"; break; } } </script> </head> <body> <div id="right"><div id="sub_right">子对象</div>子对象后面的文字</div> <div id="select"><select onchange="sel(this.value)"><option value="1">inherit</option><option value="2">hidden</option><option value="3">visible</option></select></div> </body> </html>

5、提示：

（1）唯一需要注意的就是display:none隐藏对象后不占用原空间，而visibility:hidden后占用原空间。

Posted by: 近水社区

相关文章：

常用CSS属性（Traffic：465 | Posted By：近水社区）

相关模板：

暂无相关模板

上一篇：padding属性下一篇：width、height和overflow属性

Comments(0)

暂无留言。

display与visibility属性

Comments(0)

话题搜索

文章推荐

留言修改：