display

定义

display 属性规定元素应该生成的框的类型。

注意：这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。

语法

display:inline|block|A|;

注意：A是其他值，共计10余种，见下表所示。

属性值

值	说明（索引中有详细介绍）
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
block	此元素将显示为块级元素。
content	盒子文本正常绘制，而围绕在盒子中的框并不会生成。
flex	此元素将显示为弹性盒容器。
grid	此元素将显示为栅格容器。
inline-block	此元素将显示为行内块元素。
inline-flex	此元素将显示为行内弹性盒容器。
inline-grid	此元素将显示为行内栅格容器。
inline-table	此元素会作为内联表格来显示（类似），表格前后没有换行符。
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
table	此元素会作为块级表格来显示（类似 table元素），表格前后带有换行符。
table-caption	此元素会作为一个表格标题显示（类似 caption 元素）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 colgroup 元素）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 thead 元素）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 tfoot 元素）。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 tbody 元素）。
table-cell	此元素会作为一个表格单元格显示（类似 td 元素）
table-column	此元素会作为一个单元格列显示（类似 col 元素）
table-row	此元素会作为一个表格行显示（类似 tr 元素）。
none	此元素不会被显示。
initial	设置该属性为默认元素。
inherit	规定应该从父元素继承 display 属性的值。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>
    <style>
        p {
            /*p元素将显示为内联，两元素合为一行显示。*/
            display:inline;
        }
    </style>
</head>
<body>
   <p>未设置" display:inline"：我要和下面的p分两行呈现～</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci autem dignissimos dolore est eveniet facere, harum illo illum incidunt minima natus nisi nobis, non quibusdam quo repudiandae sit tempore voluptatum!</p>
</body>
</html>

未设置" display:inline"：我要和下面的p分两行呈现～

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci autem dignissimos dolore est eveniet facere, harum illo illum incidunt minima natus nisi nobis, non quibusdam quo repudiandae sit tempore voluptatum!

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari	Chrome	FireFox	IE
3.1	4.0	3.0	8.0