display 属性有哪些值？

1. display 分类

CSS 中 display 用于控制元素生成的盒子类型，主要分以下几类：

  • 外部值（控制元素参与哪种布局上下文）：
    • block：块级盒子，独占一行，可设置宽高；
    • inline：行内盒子，与其它行内元素同行，宽高由内容决定；
    • inline-block：行内块盒子，对外表现为 inline（同行显示），对内表现为 block（可设宽高）。
  • 内部值（控制子元素的布局方式）：
    • flex、inline-flex：弹性盒布局；
    • grid、inline-grid：网格布局；
    • table、table-row、table-cell 等：表格布局。
  • 盒子行为值：
    • none：不生成盒子，从渲染树中完全移除；
    • contents：自身不生成盒子，子元素继承父级布局；
    • flow-root：创建 BFC。
  • 其它：
    • list-item：列表项盒子；
    • run-in（已基本废弃）；
    • inherit / initial / unset / revert：全局值。

2. 块级元素、内联元素与 inline-block 的区别

  • block 元素：
    • 独占一行；
    • 可设 width/height/padding/margin；
    • 默认宽度撑满父容器。
  • inline 元素：
    • 同行显示；
    • width/height 无效；
    • 水平 padding/margin 有效，垂直 padding/margin 不影响布局。
  • inline-block 元素：
    • 简单来说就是将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。
    • 比如我们可以给一个 link（a 元素）设置 inline-block 属性，使其既具有 block 的可设置宽度和高度特性又具有 inline 的同行特性。

补充：display: contents 是非常实用的现代值，可以让父元素"消失"而子元素继承祖父元素的布局——常用于 flex/grid 容器需要把孙子节点直接作为网格项时。