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 值,可以大幅提升布局效率和代码可维护性。

相关推荐
是小狐狸呀8 分钟前
elementUI-表单-下拉框数据选中后,视图不更新
前端·javascript·elementui
四岁半儿3 小时前
常用css
前端·css
你的人类朋友3 小时前
说说git的变基
前端·git·后端
姑苏洛言3 小时前
网页作品惊艳亮相!这个浪浪山小妖怪网站太治愈了!
前端
荷花微笑3 小时前
HBuilderX升级,Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass
uni-app·css3
字节逆旅4 小时前
nvm 安装pnpm的异常解决
前端·npm
Jerry4 小时前
Compose 从 View 系统迁移
前端
GIS之路4 小时前
2025年 两院院士 增选有效候选人名单公布
前端
四岁半儿4 小时前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js
烛阴4 小时前
告别繁琐的类型注解:TypeScript 类型推断完全指南
前端·javascript·typescript