CSS属性 display 显示属性

本文详细介绍了CSS中的display属性,包括其各种值如block、inline、none等的意义及使用场景。并通过实例展示了这些值如何影响页面布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

说明

演示示例 visibility 属性?

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

的缺省值都为 inline。

值: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 ?

除了以下元素,所有元素的 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="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P>

<P>

<input type=button value="Inline" onclick="oSpan.style.display='inline'">

<input type=button value="Block" onclick="oSpan.style.display='block'">

<input type=button value="None" onclick="oSpan.style.display='none'">

</P>

</body>

</html>

演示示例

继承

适用于

演示示例 该CSS属性用来设定对象如何显示。对象则是一个行内元素

所有元素

 
作者或编者:布啦布啦   最近更新日期:2007-05-01
参考来源:www.BlaBla.cn 布啦布啦网页教程与代码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值