html中display有哪些属性值,css中display属性是什么及其各个值的作用和用法

当你查看别人写的css代码的时候，经常会看到display:block、none、inline、table等，那么在css中display属性到底是什么呢，都可以取什么值，每个值又有什么样的作用，到底怎么使用呢？虽然好奇害死猫，但是对于像我这样对网页技术非常感兴趣的人来说，估计都会想方设法把他给搞清楚，搞明白的，下面就和我一起来探索display属性的奥秘吧~~~！！

首先，display属性是什么？

本人英文不行，小学水平，只好拿着display这个单词去请教谷歌翻译大哥了，谷歌大哥果然没让我失望，我个人大概理解为：display属性很有可能是控制显示的。然后又到w3school查看了一下它给出的定义“display 属性规定元素应该生成的框的类型。”也就是说设置了display属性的元素会根据display的取值在浏览器中进行不同的显示。

那么display属性可以取哪些值，每个值的作用又是什么呢？

值                           作用

none                 此元素不会被显示。

block                此元素将显示为块级元素，此元素前后会带有换行符。也就是说其他元素不能在其后面并列显示。

inline               默认。此元素会被显示为内联元素，元素前后没有换行符。在元素后面删除换行符，多个元素可以在一行内并列显示。

inline-block         行内块元素。(CSS2.1 新增的值)

list-item            此元素会作为列表显示。

run-in               此元素会根据上下文作为块级元素或内联元素显示。

compact              CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

marker               CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

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 属性的值。

默认情况下，所有元素的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

关于display元素的用法，我们可以根据他每个值的作用和我们的实际需求来设置相对应的值也就是：“display”+“:”+“你需要的值”。好了，就先说到这里吧，这个只是个人查阅相关资料后的个人见解，如果有哪里说的不对的地方，欢迎访问村姑网留言指正，谢谢~~！！

(注：欢迎转载，转载请注明来源于“村姑网-www.cunguer.com”，谢谢~！)

《css中display属性是什么及其各个值的作用和用法》地址：www.cunguer.com/article/10.html，本文来自村姑网，您身边的IT专家

www.cunguer.com，转载请注明出处，您的支持是我们创作的源泉~！