首页 > 代码库 > （转）CSS的display属性

（转）CSS的display属性

2024-07-21 06:35:43   223人阅读

原文链接：http://www.cnblogs.com/xieon1986/articles/1424022.html

display属性中：
block:块状显示，在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。
inline:内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。

重点：
display属性的浏览器兼容表及用法详解

该CSS属性用来设定对象如何显示。

值：block | none | inline | inline-block | list-item | table-header -group | table-footer-group | inherit

可用值值的说明
block象块类型元素一样显示。
none缺省值。向行内元素类型一样显示。
inline-block象行内元素一样显示 ，但其内容象块类型元素一样显示。
list-item象块类型元素一样显示，并添加样式列表标记。
table-header-group显示在任何表格行和行组合之前，在头部标题之后。
table-footer-group显示在任何表格行和行组合之后，在底部标题前。

除了以下元素 ，所有元素的 display 的缺省值都为 inline：

元素display 属性值
ADDRESSblock
BLOCKQUOTEblock
BODYblock
CENTERblock
COLblock
COLGROUPblock
DDblock
DIRblock
DIVblock
DLblock
DTblock
FIELDSETblock
FORMblock
FRAMEnone
hnblock
HRblock
IFRAMEblock
LEGENDblock
LIlist-item
LISTINGblock
MARQUEEblock
MENUblock
OLblock
Pblock
PLAINTEXTblock
PREblock
TABLEblock
TBODYnone
TDblock
TFOOTnone
THblock
THEADnone
TRblock
ULblock
XMPblock

所 有可见的 html 对象为 block 或者 inline。举例来说，div 对象就是一个块类型元素 (block element)，而 span 对象则是一个行内元素 (inline element)。Block 元素另起一行，并可以包含其它 block 元素和 inline 元素。Inline 元素则不会另起一行 ，inline 元素包含其它 inline 元素或者数据。改变 display元素会影响周围的内容：

  • 将元素设为 block，会在该元素后换行。
  • 将元素设为 inline，会消除元素换行。
  • 将元素设为 none ，隐藏该元素内容。

对比 visibility 属性， display 值设为 none 时，会消除该元素占据的空间。

示例代码

div {display:none;}

下面的代码显示了 display 属性中block, inline, none的区别。

<html >

<head><title>不同display属性的代码示例</title></head>

<body>

<P ><SPAN id="oSpan" style="">This is a SPAN</SPAN> in a sentence.</P>

<P>

<input type=button value ="http://www.mamicode.com/Inline" onclick ="oSpan.style.display=‘inline‘">

<input type=button value="http://www.mamicode.com/Block" onclick ="oSpan.style.display=‘block‘">

<input type =button value="http://www.mamicode.com/None" onclick="oSpan.style .display=‘none‘">

</P>

</body>

</html >

演示示例

参考：
http://www.dhucst.com/supesite/html/33/t-233.html
http://www.blabla.cn/html_ref/css_attrs/display.html

（转）CSS的display属性


联系
我们