CSS属性 display 显示属性

最新推荐文章于 2022-03-12 11:31:31 发布

xkyle

最新推荐文章于 2022-03-12 11:31:31 发布

阅读量1.3k

点赞数

分类专栏： Html 文章标签： css button input div html

Html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

说明

演示示例 visibility 属性?

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

的缺省值都为 inline。

可用值	值的说明
block	象块类型元素一样显示。
none	缺省值。向行内元素类型一样显示。
inline-block	象行内元素一样显示，但其内容象块类型元素一样显示。
list-item	象块类型元素一样显示<script type="text/javascript">arw("+4d", ark4);</script>，并添加样式列表标记。
table-header-group	显示在任何表格行和行组合之前，在头部标题之后<script type="text/javascript">arw(")yI", ark1);</script>。
table-footer-group	显示在任何表格行和行组合之后，在底部标题前。

除了以下元素，所有元素的 display ？

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

元素	display 属性值
ADDRESS	block
BLOCKQUOTE	block
BODY	block
CENTER	block
COL	block
COLGROUP	block
DD	block
DIR	block
DIV	block
DL	block
DT	block
FIELDSET	block
FORM	block
FRAME	none
hn	block
HR	block
IFRAME	block
LEGEND	block
LI	list-item
LISTING	block
MARQUEE	block
MENU	block
OL	block
P	block
PLAINTEXT	block
PRE	block
TABLE	block
TBODY	none
TD	block
TFOOT	none
TH	block
THEAD	none
TR	block
UL	block
XMP	block

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

将元素设为 block，会在该元素后换行<script type="text/javascript">arw("(3B", ark0);</script>。
将元素设为 inline，会消除元素换行。
将元素设为 none，隐藏该元素内容。

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

示例代码

div {display<script type="text/javascript">arw("?4", ark5);</script>:none;}

下面的代码显示了 display 属性中block, inline<script type="text/javascript">arw("?G", ark5);</script>, none的区别<script type="text/javascript">arw("$P^", ark7);</script>。

<html>

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

<body>

<P><SPAN id="oSpan<script type="text/javascript">arw("@xyxjlA", ark7);</script>" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P>

<P>

<input type<script type="text/javascript">arw("?D", ark6);</script>=button value="Inline" οnclick="oSpan.style.display='inline'">

<input type=button value="Block" onclick<script type="text/javascript">arw("?3=o8^a7v", ark5);</script>="oSpan.style.display='block<script type="text/javascript">arw("@w=VhmnW3@xYyE", ark7);</script>'">

</P>

</body>

</html>

演示示例