display-20131022-CSDN博客

本文链接：https://blog.csdn.net/xjwolaile/article/details/84491536

这里向大家描述一下HTML DOM display属性的定义和用法，HTML DOM display属性主要用来设置元素如何显示，比如当此属性值为none时，表示此元素不会被显示，而block则表示此元素将显示为块级元素，这个元素前后会带有换行符。

HTML DOM display属性定义和用法

此属性主要用来设置元素如何显示。

语法：

Object.style.display=value

属性列表

none 此元素不会被显示
block 此元素将显示为块级元素，此元素前后会带有换行符
inline 默认，此元素会被显示为内联元素，元素前后没有换行符
inline-block 行内块元素
list-item 此元素会作为列表显示
run-in 此元素会根据上下文作为块级元素或内联元素显示
compact CSS 中有值 compact，不过由于缺乏广泛支持
marker CSS 中有值 marker，不过由于缺乏广泛支持
table 此元素会作为块级表格来显示表格前后带有换行符
inline-table 此元素会作为内联表格来显示表格前后没有换行符
table-row-group 此元素会作为一个或多个行的分组来显示
table-header-group 此元素会作为一个或多个行的分组来显示
table-footer-group 此元素会作为一个或多个行的分组来显示
table-row 此元素会作为一个表格行显示
table-column-group 此元素会作为一个或多个列的分组来显示
table-column 此元素会作为一个单元格列显示
table-cell 此元素会作为一个表格单元格显示
table-caption 此元素会作为一个表格标题显示
inherit 规定应该从父元素继承 display 属性的值


<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>

<span>本例中的样式表把 span 元素设置为块级元素。</span>
<span>两个 span 元素之间产生了一个换行行为。</span>

</body>
</html>


<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>

<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来！</p>

<div>div 元素的内容不会显示出来！</div>
</body>
</html>


<html>
    <head>
        <title>inlineBlock</title>
        <style type = "text/css">
        div {
            background: orange;    
        }

        span {
            background: red;    
        }
        </style>
    </head>
    <body>
        <div>
          我是div
        </div>
        <span>
        我是span
        </span>

    </body>
</html>