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,

本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/14821150.html

原文地址:https://www.cnblogs.com/bi-hu/p/14821150.html