display属性决定元素布局方式，常用值包括：1. block用于独占一行的块级布局；2. inline实现文本内同行显示；3. inline-block兼具行内与块特性，可设宽高且同行排列；4. none使元素不渲染并脱离文档流；5. flex实现一维弹性布局，适用于导航与居中；6. grid支持二维网格布局，适合复杂页面结构；7. table类值模拟表格样式，用于对齐或等高布局；8. contents隐藏容器只渲染子元素；9. list-item实现列表项目效果；10. run-in根据上下文切换显示类型（少用）。合理选用可提升布局效率。
display 属性是 CSS 中控制元素布局行为的核心属性，它决定了元素在页面中的显示方式和盒模型类型。以下是常见的 display 值及其使用场景：
1. block（块级元素）
将元素显示为块级元素，独占一行，可以设置宽度、高度、内外边距。
常见使用场景：用于构建结构化布局，如
、
-
需要独占一行并自定义尺寸的容器 将内联元素转换为可设置宽高的块级元素
2. inline（内联元素）
元素在同一行内显示，不独占行，宽度和高度由内容决定，不能直接设置宽高。
常见使用场景：文本内的元素，如 、、 希望多个元素水平排列且不换行 不影响原有流式布局的小样式包裹
3. inline-block
兼具 inline 和 block 特性：同行显示，但可设置宽高和边距。
立即学习“前端免费学习笔记（深入）”；
常见使用场景：实现水平排列的按钮组或导航项 图片与文字对齐控制 替代 float 实现简单布局（如商品列表）
4. none
元素完全不显示，且不占据文档流空间。
常见使用场景：配合 JavaScript 动态显示/隐藏元素 响应式设计中不同屏幕下隐藏某些模块 条件性展示内容（如登录后才显示的菜单）
5. flex
启用弹性盒子布局，让子元素灵活分配父容器空间。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 
常见使用场景：一维布局：导航栏、居中对齐、等高列 响应式组件排列 取代传统浮动布局
6. grid
启用网格布局，支持二维（行和列）的复杂布局控制。
常见使用场景：页面整体布局（头部、侧边栏、主内容区） 卡片式布局、仪表盘界面 需要精确对齐和跨行跨列的场景
7. table / table-row / table-cell 等
模拟 HTML 表格的显示行为，无需使用
微信扫一扫 
支付宝扫一扫 
