HTML display 属性 和 行内元素、块状元素、行内块状元素的区别_块级元素

 

 

 

定义


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,


作者:​​咸瑜​​​