CSS display有几种属性值

在 CSS 中,display 属性是控制元素布局和渲染方式的核心属性之一。它有多种属性值,每个值都决定了元素在文档流中的表现形式。以下是 display 的主要属性值分类及说明:

1. 块级和行内布局

块级元素 (block)
  • 特性:独占一行,可设置宽高,宽度默认占满父容器。
  • 示例<div>, <p>, <h1>, <ul> 等。
行内元素 (inline)
  • 特性 :不会换行,宽度由内容决定,无法设置宽高(仅受 paddingmargin 水平方向影响)。
  • 示例<span>, <a>, <img>, <input> 等。
行内块元素 (inline-block)
  • 特性:不换行,但可设置宽高,像单行内的块级元素。
  • 示例:按钮、输入框常使用此值。

2. 弹性布局 (flex) 和网格布局 (grid)

Flexbox (display: flex / inline-flex)
  • 特性:一维布局模型,适合按行或列排列子元素。
  • 应用:导航栏、卡片布局、自适应组件。
Grid (display: grid / inline-grid)
  • 特性:二维布局模型,同时处理行和列。
  • 应用:复杂网格、响应式布局。

3. 表格布局

表格相关值
  • table:类似 <table> 标签。
  • table-row:类似 <tr> 标签。
  • table-cell:类似 <td> 标签。
  • 应用 :老式表格布局(现代优先使用 flex/grid)。

4. 隐藏元素

none
  • 特性:元素完全从文档流中移除,不占据空间。
  • 对比visibility: hidden 仍占据空间,但不可见。

5. 多列布局

column 相关值
  • inline-column:实验性值,类似 column 但为行内模式。
  • 应用 :报纸式多列文本布局(需配合 column-count 等属性)。

6. 其他布局模式

浮动和绝对定位
  • flow-root:创建 BFC(块级格式化上下文),清除浮动影响。
  • 应用:父元素包含浮动子元素时防止高度塌陷。
混合值
  • run-in:根据上下文变为块级或行内元素(兼容性差,少用)。

7. 实验性和特殊值

  • contents:元素本身不渲染,仅渲染子元素(兼容性有限)。
  • ruby, ruby-base, ruby-text:用于日语注音(小文字)排版。

示例代码

css

复制代码
.block {
  display: block; /* 块级元素 */
}

.inline {
  display: inline; /* 行内元素 */
}

.flex-container {
  display: flex; /* Flexbox 容器 */
}

.grid-container {
  display: grid; /* Grid 容器 */
}

.hidden {
  display: none; /* 完全隐藏元素 */
}

.clear-float {
  display: flow-root; /* 清除浮动 */
}

总结

分类 属性值 核心作用
基础布局 block, inline, inline-block 控制元素的基本显示模式
弹性布局 flex, inline-flex 一维灵活布局
网格布局 grid, inline-grid 二维网格布局
表格布局 table, table-row, table-cell 模拟表格结构
隐藏元素 none 完全移除元素
特殊布局 flow-root, contents 处理浮动、子元素渲染

现代 CSS 中,flexgrid 是构建复杂布局的首选方式,而传统的表格布局和浮动已逐渐被淘汰。根据具体需求选择合适的 display 值,可以大幅提升布局效率和代码可维护性。

相关推荐
爱分享的程序员25 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘30 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出32 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的32 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解34 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵38 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im38 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man39 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构