CSS系列文章目录
CSS 之 display 布局属性详解 CSS 之 position 定位属性详解一文搞懂 flex 布局 【弹性盒布局】
文章目录
CSS系列文章目录一、总览1.1 属性值1.2 语法
二、外部表现类2.1 display: block2.2 display: inline
三、内部表现类3.1 display: flex3.2 display:grid3.3 display:table3.4 display:flow-root3.5 display:flow（实验属性）3.6 display:ruby（实验属性）
四、列表元素类4.1、display:list-item
五、内部结构类六、元素显示类6.1、display:none6.2 display:contents
七、预组合类7.1、display:inline-block7.2、display:inline-table7.3、display:inline-flex7.4、display:inline-grid
八、总结
一、总览
CSS display 属性设置元素是否被视为块级或行级盒子以及用于子元素的布局，例如流式布局、网格布局或弹性布局。
其属性值共计有 18 种，按照类别可以分为以下 六 类：
外部表现类（display-outside）：block、inline。内部表现类（display-inside）：flex、grid、table、flow、flow-root、ruby。列表元素类（display-listitem）：list-item。内部结构类（display-internal）：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。元素显示类（display-box）：none、contents。预组合类（display-legacy）：inline-block、inline-table、inline-flex、inline-grid。
1.1 属性值
1.2 语法
CSS display 规定使用的关键字。
/* 预组合值 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* 生成盒子 */
display: none;
display: contents;
/* 多关键字语法 */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;
/* 其他值 */
display: table;
display: table-row; /* 所有的 table 元素 都有等效的 CSS display 值 */
display: list-item;
/* 全局值 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
二、外部表现类
这些关键字规定元素的外部显示类型，实际上就是其在流式布局中的角色：
block 该元素生成一个块级盒子，在正常的流中，该元素之前和之后产生换行。
inline 该元素生成一个或多个行级盒子，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。
备注： 在支持多关键字语法的浏览器中，当 display 属性仅有一个外部值（例如 display: block 或 display: inline）时，内部值会被设置为 flow（例如 display: block flow 和 display: inline flow）。
🎯为了保证布局在旧浏览器生效，你可以使用单值语法，例如，对于 display: inline flex，可以设置以下回退
.container {
display: inline-flex;
display: inline flex;
}
2.1 display: block
该属性值用于设置元素的外显类型为块级元素，在页面布局中，占据一整行的空间，在元素前后进行换行。该类型的元素可以设置✅ width、height、padding、margin 等属性。
这是一段文本
这是第二段文本
2.2 display: inline
该属性值用于设置元素的外显类型为 行内元素 ，在页面布局中，可与其他行内元素位于同一行。
🚫设置 width、height ，以及竖直方向的 margin（top、bottom） 属性是 无效的。✅设置水平方向的 padding、margin（left、right） 是 有效 的。✅设置竖直方向的 padding（top、bottom） 时，在元素空间上是 有效 的，但这并不会影响与同一行的行内元素的对齐。
这是一段块级元素文本
这是一段行内元素文本
这是第二段行内元素文本
三、内部表现类
这些关键字规定了元素的内部显示类型，其定义了该内容布局时的格式上下文的类型（假设它是一个非替换元素）：
备注： 在支持多关键字语法的浏览器中，当 display 属性仅有一个内部值（例如 display: flex 或 display: grid）时，外部值会被设置为 block（例如 display: block flex 和 display: block grid）。
3.1 display: flex
该元素的行为类似块级元素并且根据 弹性盒模型 布局它的内容。
详情请移步：一文搞懂flex布局 【弹性盒布局】
3.2 display:grid
该元素的行为类似块级元素并且根据 网格模型 布局它的内容。 该类型的元素将内部分为行和列，划分成一个个单元格，并通过一系列相关属性控制单元格的布局和大小。
该属性值的主要应用场景为：多行多列元素水平且垂直对齐。
demo 示例：
3.3 display:table
该元素的行为类似于 HTML 中的
| 、 | 。详细内容请查看：table 布局。
table-column-group 该属性值用于设置元素为表格的列组，类似于HTML的 table-column 该属性值用于设置元素为表格的列，类似于HTML的 table-caption 该属性值用于设置元素为表格的标题，类似于HTML的 ruby-base（实验属性）该属性值用于设置元素为ruby 布局的基本文本，类似于HTML的 ruby-text（实验属性）该属性值用于设置元素为ruby 布局的注音文本，类似于HTML的 ruby-base-container（实验属性）该属性值目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。 ruby-text-container（实验属性）该属性值类似于HTML的 六、元素显示类 该类型的属性值用于设置 元素及其后代元素 在页面上的 显示 问题。 6.1、display:none 该属性值用于设置元素及其后代元素在页面上不显示，并且不占据页面空间，但是元素的dom结构是存在的，只是不显示。Vue中的v-show语法糖就是基于该属性实现的。 如果想让元素占据空间，但是不显示，应该使用visibility或者opacity属性实现。 demo示例： 这是第二个div 结果只显示第二个div，第一个被隐藏了。 6.2 display:contents 🚫该属性值用于设置元素本身不显示，但其内部文本、伪元素和后代元素正常显示。但是该属性并 不建议使用，不符合大部分浏览器的规范要求。 demo示例： 这是第二个div 这是第二个div的子元素 七、预组合类 该类型的属性值用于设置元素 同时具有两种属性值 的效果，效果类似于两者的结合。 7.1、display:inline-block 该属性值用于设置元素类型为 行内块元素 ，既可以像 inline 元素与其他行内元素放在 同一行，又可以像 block 元素一样设置 宽高、边距 等属性。 7.2、display:inline-table 该属性值用于设置元素类型为 行内表格元素 ，既可以设置元素内部为表格布局，又可以像inline 元素与其他行内元素放在同一行。 除了与其他行内元素放在同一行之外，其余特性与 table 属性值相同。 7.3、display:inline-flex 该属性值用于设置元素类型为 行内flex元素，既可以设置元素内部为 flex 布局，又可以像inline 元素与其他行内元素放在同一行。 除了与其他行内元素放在同一行之外，其余特性与 flex 属性值相同。 7.4、display:inline-grid 该属性值用于设置元素类型为 行内网格元素，既可以设置元素内部为 grid 网格布局，又可以像 inline 元素与其他行内元素放在同一行。 除了与其他行内元素放在同一行之外，其余特性与 grid 属性值相同。 demo示例： 这是设置inline-blick的div 这是设置inline-table的div
这是设置inline-flex的div 这是设置inline-grid的div 八、总结 这些都是css的排版布局最核心语法，掌握了你就可以自行设计精美web页面了。ε=(´ο｀*)))唉，有到年底了，明天2025年，加油~~ |
|---|