一、总览
CSS的 display 属性用于设置元素的显示类型,或设置其子元素的布局类型。 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、block
该属性值用于设置元素的外显类型为块级元素,在页面布局中,占据一整行的空间,在元素前后进行换行。该类型的元素可以设置width、height、padding、margin等属性。
.d {
display: block;
width: 200px;
height: 100px;
background: pink;
}
这是一段文本
这是第二段文本
页面表现:
2、inline
该属性值用于设置元素的外显类型为行内元素,在页面布局中,可与其他行内元素位于同一行。该类型的元素设置width、height,以及竖直方向的margin(top、bottom)属性无效,设置水平方向的padding、margin(left、right)是有效的,设置竖直方向的padding(top、bottom)时,在元素空间上是有效的,但这并不会影响与同一行的行内元素的对齐。
.d1 {
display: inline;
width: 200px;
height: 100px;
margin: 10px 20px;
padding: 20px 10px;
background: pink;
}
这是一段块级元素文本
这是一段行内元素文本
这是第二段行内元素文本
页面表现:
三、内部表现类
这类属性值的效果是规定元素的内部显示类型,即定义元素内部子元素的布局方式。
1、flex
该属性值用于设置元素的内部显示类型为弹性布局,其外显类型为块级元素。该类型的元素可以通过一系列相关属性控制子元素在标准轴线上的布局方式和占位空间。更多内容可查看:flex布局。
该属性值的主要应用场景为:多个块级元素水平居中对齐等。
.d1 {
display: flex;
align-items: center;
justify-content: center;
background: #ccc;
}
.d1>div {
width: 150px;
height: 150px;
margin-right: 10px;
background: pink;
}
页面表现:
2、grid
该属性值用于设置元素内部的显示类型为网格布局,其外显类型为块级元素。该类型的元素将内部分为行和列,划分成一个个单元格,并通过一系列相关属性控制单元格的布局和大小。更多内容可查看:grid布局。
该属性值的主要应用场景为:多行多列元素水平且垂直对齐。
.d2 {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/* 设置行间距和列间距为20px */
gap: 20px;
}
.d2>div {
background: pink;
text-align: center;
}
.d2>div:nth-child(2n){
background: yellow;
}
页面表现:
3、table
该属性值用于设置元素为块级元素,且内部的显示类型为表格布局,具体行为类似于HTML中的
、 | 。详细内容请查看:table 布局。 6、table-column-group 该属性值用于设置元素为表格的列组,类似于HTML的 7、table-column 该属性值用于设置元素为表格的列,类似于HTML的 8、table-caption 该属性值用于设置元素为表格的标题,类似于HTML的 9、ruby-base(实验属性) 该属性值用于设置元素为ruby 布局的基本文本,类似于HTML的 该属性值目前处于实验阶段,还未被所有的浏览器完全支持,目前只有Firefox和IE浏览器支持该属性,因此不建议使用。 10、ruby-text(实验属性) 该属性值用于设置元素为ruby 布局的注音文本,类似于HTML的 该属性值目前处于实验阶段,还未被所有的浏览器完全支持,目前只有Firefox和IE浏览器支持该属性,因此不建议使用。 11、ruby-base-container(实验属性) 该属性值目前处于实验阶段,还未被所有的浏览器完全支持,目前只有Firefox和IE浏览器支持该属性,因此不建议使用。 12、ruby-text-container(实验属性) 该属性值类似于HTML的 该属性值目前处于实验阶段,还未被所有的浏览器完全支持,目前只有Firefox和IE浏览器支持该属性,因此不建议使用。 六、元素显示类 该类型的属性值用于设置元素及其后代元素在页面上的显示问题。 1、none 该属性值用于设置元素及其后代元素在页面上不显示,并且不占据页面空间,但是元素的dom结构是存在的,只是不显示。Vue中的v-show语法糖就是基于该属性实现的。 如果想让元素占据空间,但是不显示,应该使用visibility或者opacity属性实现。 demo示例:
这是第二个div
页面效果: 2、contents 该属性值用于设置元素本身不显示,但其内部文本、伪元素和后代元素正常显示。但是该属性并不建议使用,不符合大部分浏览器的规范要求。 demo示例: 这是第二个div
这是第二个div的子元素
页面效果: 七、预组合类 该类型的属性值用于设置元素同时具有两种属性值的效果,效果类似于两者的结合。 1、inline-block 该属性值用于设置元素类型为行内块元素,既可以像inline元素与其他行内元素放在同一行,又可以像block元素一样设置宽高、边距等属性。 2、inline-table 该属性值用于设置元素类型为行内表格元素,既可以设置元素内部为表格布局,又可以像inline元素与其他行内元素放在同一行。 除了与其他行内元素放在同一行之外,其余特性与table属性值相同。 3、inline-flex 该属性值用于设置元素类型为行内flex元素,既可以设置元素内部为flex布局,又可以像inline元素与其他行内元素放在同一行。 除了与其他行内元素放在同一行之外,其余特性与flex属性值相同。 4、inline-grid 该属性值用于设置元素类型为行内网格元素,既可以设置元素内部为grid网格布局,又可以像inline元素与其他行内元素放在同一行。 除了与其他行内元素放在同一行之外,其余特性与grid属性值相同。 demo示例: .div1 { display: inline-block; width: 150px; height: 50px; background: red; } .div2 { display: inline-table; width: 150px; height: 50px; background: yellow; } .row { display: table-row; } .cell { display: table-cell; } .div3 { display: inline-flex; width: 150px; height: 50px; background: pink; } .div4 { display: inline-grid; width: 150px; height: 50px; background: green; }
这是设置inline-blick的div
这是设置inline-table的div
这是设置inline-flex的div
这是设置inline-grid的div
页面效果: 八、双值语法 dispaly属性也支持部分双值语法,但目前不常用,效果与预组合类相同,更建议使用预定类。更多内容请查看:display的双值语法。 1、inline flex 等同于 inline-flex。 2、inline table 等同于 inline-table。 3、inline grid 等同于 inline-grid。 其他。。。 推荐文章 评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。 本文由 用户 于 2024-04-17 发布在 夸智网,如有疑问,请联系我们。 |
---|
发表评论