正在加载...

CSS Display

display 回答一个安静的问题：这个盒子如何加入页面？有的像全宽块一样堆叠；有的坐在句子里；有的可以从布局中完全移除。本课梳理日常取值——并把深入的 inline-block 练习留给下一节。

display 工具箱

📊 display 一览

取值 日常作用
block 从自己的行开始；常常占满该行宽度
inline 生活在文本行中；width/height 通常被忽略
inline-block 像文本一样坐在一行，但接受 width/height/padding 像盒子
none 从布局中移除元素（空间塌缩）
flex / grid 强大的布局模式——后面的课，不在这里

默认 HTML 已经为许多标签选择了 display（div 是 block，span 是 inline，button 常常接近 inline-block）。当流需要另一种工作时，CSS 允许你覆盖它。

Block——自己的行，宽敞的盒子

Block 盒子从新行开始，通常占满可用宽度。标题、段落和 div 默认如此。

强制 block

css
CSS Code 
.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}

Inline——在句子里

Inline 盒子坐在文本流中，并随文字换行。在纯 inline 上设置 width 或 height 通常没用——所以人们会改用 block 或 inline-block。

强制 inline

css
CSS Code 
.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}

Inline-block——短预览

inline-block 在有空间时把邻居留在同一行，同时仍尊重 width、height 和 padding。下一课会仔细练习；这里只需认出这个混合体。

inline-block 一瞥

css
CSS Code 
.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}

None——离开布局

display: none 隐藏元素并塌缩其空间。布局和许多辅助工具都把它当作不存在。比起散落规则，更偏好用类切换。

用 none 隐藏

css
CSS Code 
.is-hidden {
display: none;
}

visibility: hidden 是另一回事——盒子仍可能占位。本课用 display: none 做真正的布局移除。这里不深入 visibility。

安静的 display 习惯

为流的原因改变 display——不是为了按钮外观（上一课），也不是每个布局问题的捷径（flex/grid 以后）。用类命名有意的状态。

显示与隐藏类

css
CSS Code 
.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}

.panel.is-hidden {
display: none;
}

比较三种模式

css
CSS Code 
.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }

自己试试

  1. 把 span 强制为 display: block 并给 width + padding。
  2. 把短 div（或标题）强制为 display: inline，看它坐在句子里。
  3. 添加带 inline-block 的 .chip——注意 width/padding 有效。
  4. 用 .is-hidden { display: none; } 隐藏面板并切换类。
  5. 写一句话：标签何时用 block，何时用 inline？

常见错误

  • 期望 width / height 在纯 inline 上生效
  • 只想淡化外观却用 display: none——并忘记空间会塌缩
  • 把本课当成按钮 hover 外观（那是 Buttons）
  • 在这里倾倒 Flexbox/Grid 配方，而不是学四个基本取值
  • 把「从布局隐藏」与下一节更深的 inline-block 混淆

小结

  • display 控制盒子如何加入页面流
  • block 占自己的行；inline 生活在文本中
  • inline-block 是混合体——后面练习
  • none 从布局中移除元素及其空间
  • 为流的工作改变 display；把花哨布局留给后面的课

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 35 的 35
Css 教程