本文介绍: display的属性值有：block、inline、flex、grid、table、flow、flow–root、ruby、list–item、table–row、table–cell、table–column、table–caption、table–row–group、table–header–group、table-footer-group、table-column–group、ruby–base、ruby–text、ruby–base–container、ruby-text–container等等。
一、总览
CSS的 display 属性用于设置元素的显示类型，或设置其子元素的布局类型。 display属性值的适用性取决于元素的类型和上下文。某些属性值只适用于特定类型的元素，使用时需注意兼容性和语义化。
二、外部表现类
该类属性值的效果是规定元素的外部显示类型，也就是在页面布局中的元素类型：块级元素或内联元素。
1、block
该属性值用于设置元素的外显类型为块级元素，在页面布局中，占据一整行的空间，在元素前后进行换行。该类型的元素可以设置width、height、padding、margin等属性。
页面表现：
2、inline
该属性值用于设置元素的外显类型为行内元素，在页面布局中，可与其他行内元素位于同一行。该类型的元素设置width、height，以及竖直方向的margin（top、bottom）属性无效，设置水平方向的padding、margin（left、right）是有效的，设置竖直方向的padding（top、bottom）时，在元素空间上是有效的，但这并不会影响与同一行的行内元素的对齐。
页面表现：
三、内部表现类
1、flex
页面表现：
2、grid
页面表现：
3、table
demo示例：
页面效果：
4、flow–root
demo示例：
页面效果：
5、flow（实验属性）
6、ruby（实验属性）
demo示例：
页面效果：
四、列表元素类
1、list-item
demo示例：
页面效果：
五、内部结构类
1、table-row-group
2、table-header-group
3、table-footer-group
4、table-row
5、table-cell
6、table-column-group
7、table-column
8、table-caption
9、ruby-base（实验属性）
10、ruby-text（实验属性）
11、ruby-base–container（实验属性）
12、ruby-text-container（实验属性）
六、元素显示类
1、none
demo示例：
页面效果：
2、contents
demo示例：
页面效果：
七、预组合类
1、inline-block
2、inline-table
3、inline-flex
4、inline-grid
demo示例：
页面效果：
八、双值语法
1、inline flex
2、inline table
3、inline grid
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
