定义
display 属性规定元素应该生成的框的类型。
注意:这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。
属性值
值 | 说明 (索引中有详细介绍) |
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 属性的值。 |
其次: 行内元素、块状元素、行内块状元素的区别:
1.行内元素特征:(1)设置宽高无效
(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
(3)不会自动进行换行
2.块状元素特征:(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起,默认排列方式为从上至下
3.行内块状元素
行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。
行内块状元素特征:(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
1 块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
2 行内元素:span, strong, em, br, img , input, label, select, textarea, cite,