css基础-display 常用布局

CSS display 属性详解

属性设置元素是否被视为块级或行级盒子以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

一、基础显示模式

1. block

作用：

• 元素独占一行
• 可设置宽高和内外边距
• 默认宽度撑满父容器

应用场景：

• 布局容器（div/section/article）
• 段落文本（p）
• 列表项（li默认样式）

div {
  display: block;
  width: 80%;
  margin: 0 auto;
}
/* 创建通栏页眉 */
.header {
  display: block;
  width: 100%;
  height: 60px;
  background: #333;
}

1. inline

作用：

• 元素水平排列
• 不可设置宽高
• 宽度由内容决定

应用场景：

• 文字修饰元素（span/em/strong）
• 超链接（a）默认样式
• 行内文本元素

span {
  display: inline;
  color: red;
  /* width: 100px; 无效 */
}

3. inline-block

作用：

• 兼具块级与行内特性
• 可设置宽高
• 元素水平排列

应用场景：

• 导航菜单项
• 图标按钮
• 表单控件对齐

.nav-item {
  display: inline-block;
  width: 120px;
  padding: 10px;
}

二、现代布局模式

1. flex

快速了解CSS弹性布局

主要设置元素

作用：

• 创建弹性盒子布局
• 主轴/交叉轴排列控制
• 子元素弹性伸缩

应用场景：

• 响应式导航栏
• 卡片等分布局
• 垂直居中实现

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-container {
  display: flex;
  gap: 20px;
  justify-content: space-around;
  align-items: center;
}

1. grid

作用：

• 创建网格布局
• 二维布局控制
• 精确行列定义

应用场景：

• 仪表盘布局
• 图片画廊
• 复杂表单布局

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

三、特殊显示模式

1. none

作用：

• 元素完全隐藏
• 不占据文档流空间

应用场景：

• 动态显示/隐藏元素
• 响应式隐藏某些内容

.mobile-menu {
  display: none;
}
@media (max-width: 768px) {
  .mobile-menu {
    display: block;
  }
}

table 系列

/* 传统垂直居中方案 */
.vertical-center {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
}

3. list-item

作用：

• 显示为列表项
• 生成标记框（如圆点）

应用场景：

• 自定义列表样式
• 有序/无序列表改造

.custom-list {
  display: list-item;
  list-style-type: square;
  margin-left: 20px;
}

四、混合模式

1. inline-flex

特点：

• 行内级弹性容器
• 外部表现像inline
• 内部使用flex布局

.inline-flex-container {
  display: inline-flex;
  align-items: center;
}

2. inline-grid

特点：

• 行内级网格容器
• 外部表现像inline
• 内部使用grid布局

.inline-grid-container {
  display: inline-grid;
  grid-template-columns: repeat(3, 100px);
}

其他

1. contents

作用：

• 元素自身不生成盒子
• 子元素提升到父级层级

应用场景：

• 无障碍优化
• 布局结构调整

示例：

<!-- 移除中间容器层级 -->
<div class="wrapper" style="display: contents">
  <section>直接内容</section>
</div>

2. flow-root

作用：

• 创建BFC块级格式化上下文
• 解决浮动塌陷问题

应用场景：

• 清除浮动
• 防止外边距合并

📌 使用建议

优先使用现代布局：Flex/Grid > Float/Table

注意浏览器兼容性：

• Grid布局需要IE11+
• flow-root需要Chrome58+/Firefox53+

📚 综合对比表

合理选择显示模式：

• 需要水平排列：inline-block / flex
• 需要二维布局：grid
• 隐藏元素优先用opacity: 0 + visibility: hidden代替display: none
• 避免滥用!important：保持样式可维护性

通过合理组合使用这些display值，可以构建出各种复杂的现代网页布局 🚀