微信公众号
扫描关注微信公众号
博客大厅

CSS 中 display 有哪些值?

原创 来源:博客站 阅读 0 02月20日 14:27 听全文

在 CSS 中,display 属性用于控制一个元素的显示类型。display 属性有多个值,每个值都有不同的布局和行为。以下是一些常见的 display 值及其简要描述:

block:

元素显示为块级元素,占据其父容器的整个宽度(除非设置了宽度)。 每个块级元素都从新的一行开始,并结束于新的一行。

inline:

元素显示为内联元素,不会占据整行,只占据其内容所需的宽度。 内联元素在一行中从左到右排列,直到一行被填满,然后换到下一行。

inline-block:

结合了块级元素和内联元素的特点。 元素不会占据整行,但可以设置宽度和高度。

none:

元素及其子元素都不会被显示。 元素不占据任何空间,仿佛从文档流中完全移除。

flex:

元素成为弹性容器,其子元素成为弹性项目。 允许子元素在主轴和交叉轴上灵活排列和伸缩。

inline-flex:

类似于 flex,但容器本身表现为内联元素。 可以设置宽度和高度,但不会独占整行。

grid:

元素成为网格容器,其子元素成为网格项。 允许在二维布局中精确控制子元素的排列。

inline-grid:

类似于 grid,但容器本身表现为内联元素。

table:

元素显示为块级表格,类似于

元素。 子元素(使用 display: table-row、display: table-cell 等)表现为表格行和单元格。

table-row:

元素显示为表格行,类似于

元素。

table-cell:

元素显示为表格单元格,类似于

和 使用)。

table-column-group:

元素显示为表格列组,类似于

元素。

table-header-group:

元素显示为表格头部组,类似于

元素。

table-footer-group:

元素显示为表格尾部组,类似于

元素。

table-body:

元素显示为表格主体,类似于

元素。

list-item:

元素显示为列表项,类似于

  • 元素。 通常会生成一个项目符号或编号。

    run-in:

    元素根据上下文决定其显示方式,通常与下一个块级元素结合显示。 该值在 CSS2.1 中被废弃,并且在现代浏览器中的支持不一致。

    flow-root:

    创建一个新的块格式化上下文(BFC),类似于 float 或 overflow: hidden,但不影响元素的 display 类型。 用于控制布局中的浮动和清除。

    contents:

    元素本身不生成任何框,但其子元素和伪元素正常显示。 类似于将元素的内容“移出”其框,但仍保留在文档流中。

    这些 display 值涵盖了从简单的块级和内联布局到复杂的网格和弹性布局的各种情况。通过合理使用这些值,可以实现丰富多样的页面布局和用户体验。

    学在每日,进无止境!更多精彩内容请关注微信公众号。
    原文出处: 内容由AI生成仅供参考,请勿使用于商业用途。如若转载请注明原文及出处。
    出处地址:http://www.07sucai.com/tech/438.html
    版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。
    >
  • 元素。

    table-caption:

    元素显示为表格标题,类似于

    元素。

    table-column:

    元素显示为表格列(需要结合