06显示与尺寸

display 决定元素「怎么排队」：独占一行还是并排站？能不能设宽高？尺寸单位决定「量多大」：写死像素还是跟着容器走？本课搞定 display 三巨头、三种「消失」、尺寸约束，以及 px / % / em / vw 的选法。

约 20 分钟 6 个动手实验布局地基课

一、display 三巨头：block / inline / inline-block

每个元素出厂自带一种 display。block 独占一行、能设宽高； inline 像文字一样排队、宽高无效； inline-block 二合一——像文字排队，但能设宽高。先把三兄弟（外加「蒸发」的 none）摆在一起逐项对比：

display 四值对照表：宽高是否生效、是否换行、垂直 margin/padding 的行为
特性	`block`	`inline`	`inline-block`	`none`
换行	独占一行	一行排到装不下	一行排到装不下	整盒消失，不占位
width / height	✓ 生效	✗ 无效	✓ 生效	—（盒子都不渲染）
上下 margin / padding	✓ 生效	✗ 不撑开（会叠到文字上）	✓ 生效	—
默认宽	撑满父容器	由内容决定	由内容决定	—
代表元素	div / p / h1 / ul	span / a / strong	img / input（天生）	任何元素都可被设成 none

display 常用属性值逐项分析
属性值	效果	使用场景
block	独占一行，宽高与四个方向的 margin/padding 全部生效	段落、卡片、容器等纵向堆叠的结构块
inline	融入文字流并排排列，宽高无效，上下 margin/padding 不撑开行高	段落中需要局部变样的文字（span、a、strong）
inline-block	像文字一样排队，但宽高、上下边距全部生效	导航按钮、标签墙、一排小卡片
none	元素从渲染树中彻底移除，不占位、点不到、读屏读不到	配合 JS 切换显示隐藏、响应式隐藏模块
flex	变成弹性容器，孩子沿一根轴排队，对齐能力极强	一维布局：导航条、居中对齐、均分（布局课细讲）
grid	变成网格容器，行列二维铺格	二维布局：整页骨架、相册网格（布局课细讲）
inline-flex / inline-grid	容器本身像 inline-block 排队，内部仍是 flex / grid	需要「既是行内块又是弹性容器」的小组件

眼见为实——下面三种排队方式并排对比，金黄是 block、粉紫是 inline、绿是 inline-block：

三种排队方式对比：把 .inlk 的 width 改大，只有它和 block 会变；改 .inl 的宽高则纹丝不动

display 可以后天改造：给 span 加 display: block 它就独占一行；给 li 加 display: inline-block，竖列表立刻变横导航。标签只是出厂设置，CSS 说了才算。

二、三种「消失」：display:none / visibility:hidden / opacity:0

让元素消失有三种方式，差别在于「占不占位置」和「能不能被点到」。面试高频题，也是做模态框、过渡动画的理论基础：

三种隐藏方式的占位 / 事件 / 渲染差异
写法	还占位置吗	还能点到吗	能做过渡动画	读屏软件	渲染层面
`display: none`	✗ 彻底消失	✗	✗（跳变）	读不到	不参与布局也不绘制（触发回流）
`visibility: hidden`	✓ 留下空洞	✗	✓（渐隐）	读不到	参与布局但不绘制（只触发重绘）
`opacity: 0`	✓ 留下空洞	✓ 还能点！	✓（最顺滑）	读得到	正常布局和绘制，只是完全透明

三个盒子依次用三种方式隐藏：第一格直接蒸发，后面的兄弟立刻补位。试试把 .gone 的 display:none 注释掉

opacity: 0 的元素依然可以接收点击——隐形按钮挡住下面内容的事故就是这么来的。需要彻底禁用时配合 pointer-events: none。做淡入淡出动画首选 opacity（后面过渡章细讲）。

三、尺寸单位怎么选：px / % / em / vw

px 写死不变；% 相对父容器；em 相对自身字号； vw/vh 相对视口（浏览器窗口）宽高。选对单位，布局才能「随屏幕伸缩」。

常用尺寸单位速查
单位	相对谁	适用场景
`px`	谁都不相对，绝对像素	边框、间距等「精确小尺寸」
`%`	父容器	宽度自适应：宽度是 % 的天下
`em`	自身字号（16px 字号下 1em=16px）	随字号缩放的间距；注意嵌套会复利
`rem`	根元素 html 的字号	全站统一的响应式字号首选
`vw / vh`	视口宽 / 高的 1%	首屏大图铺满、满屏布局

width / height 的属性值逐项分析

宽度和高度本身能写什么值，也值得逐项过一遍——auto 和百分比的「相对谁」最容易搞混：

width / height 常用属性值逐项分析（height 的百分比要求父级有确定高度）
属性值	效果	使用场景
auto	默认值。block 宽度撑满父容器、高度由内容撑开；inline-block 宽高都由内容决定	交给浏览器算的「自然尺寸」，布局的大多数时候
<length>（如 200px / 14em）	固定尺寸，雷打不动	头像、图标、按钮等需要精确控死的小元素
<percentage>（如 60%）	宽度相对父容器宽度；高度相对父容器高度（父级没写死高度时 height:% 会失效）	分栏、自适应宽度
vw / vh	相对视口宽 / 高，和父容器无关	满屏首屏、遮罩层
max-content	内容不换行时的「理想宽度」	让按钮、标签刚好包住一行文字
min-content	内容能压缩到的最小宽度	少用，了解即可
fit-content	auto 与 max-content 的折中：随内容伸缩但不超上限	居中的弹窗、自适应的标题块

拖动浏览器窗口宽度，只有 % 和 vw 的条会跟着变；改 .cs-u-em 的 font-size 看 em 如何跟着字号走

实战心法：宽度用 %（或不写），字号用 rem，边距用 px 或 em，满屏区块用 vw/vh。布局模块的响应式一章会把这套组合拳打完整。

四、max-width 与尺寸约束：响应式的守护神

width: 100% 让元素撑满，但在超宽屏幕上会「胖得离谱」； max-width 上限封顶——「跟随但不超过」，一行代码就是最经典的响应式方案。

第一个盒子永远撑满；第二个跟随但在 280px 封顶。把 max-width 改成 120px 看它立刻变窄

尺寸约束四兄弟

除了 max-width，还有三位兄弟管下限和高度，写法与用途一一对应：

min/max 约束属性逐项分析（约束值永远优先于 width/height）
属性	管什么	常用值	使用场景
`max-width`	宽度上限：再宽也不许超过	`px`、`em`、`none`（默认，无上限）	文字栏限宽护眼、图片不超出容器
`min-width`	宽度下限：再窄也不许低于	`px`、`auto`（默认）	按钮最小宽度、侧栏不被挤没
`max-height`	高度上限	`px`、`%`、`none`	评论区限高 + 内部滚动（常配 `overflow`，第 03 章布局课细讲）
`min-height`	高度下限	`px`、`vh`	页面再空也要撑满一屏：`min-height: 100vh`

顺便回顾：box-sizing 还在管事

第 05 课的 box-sizing 和本课直接相关：设了 width: 280px， padding 和 border 到底算不算在这 280 里，由它说了算。没写 box-sizing: border-box 的项目里，「设了 280 实际 300」的诡异加宽就是这么来的：

box-sizing 属性值回顾（详见第 05 课盒模型）
属性值	效果	使用场景
content-box	默认值。width 只管内容，padding / border 往外再加	历史遗留，基本不用主动写
border-box	width 一口价：内容 + padding + border 全包在内	现代项目标配：`* { box-sizing: border-box }`

img { max-width: 100%; height: auto } 值得背下来：图片永远不超出容器、高度按比例自动算——手机上看电脑版网页不出横向滚动条的秘密之一。

五、行内元素为什么设不了宽高

给 span 写 width: 200px 毫无反应——这不是 bug，是 inline 的设计：行内元素是「文字流的一部分」，尺寸完全由内容撑开。想让它有宽高，先升格成 inline-block。

同样的 200×60，inline 无动于衷，inline-block 立竿见影。把 .fixed-inb 的 display 删掉对比

inline 的上下 padding 虽然能写、也「看得到」背景色，但不会把行撑开，会和上下行的文字叠在一起。要正经做「带内边距的标签」就别用 inline。

六、预告：display 的进阶家族

display 还有两个改变命运的大招：flex 和 grid—— 现代布局的两大基石，专门用来替代 float / inline-block 的排队 hack。这里先混个脸熟，布局模块细讲。

flex 一行排队 / grid 三列铺格：把 1fr 1fr 1fr 改成 1fr 1fr 看网格变两列

七、本章小结

display 三巨头：block 独占一行有宽高、inline 排队无宽高、inline-block 排队且有宽高。
三种消失：display:none 蒸发、visibility:hidden 隐身、opacity:0 幽灵（占位可点）。
单位选择：宽度 %、字号 rem、边距 px/em、满屏 vw/vh、精确小尺寸 px。
max-width 实现「跟随但不超过」；img { max-width:100%; height:auto } 是响应式图片标配。
inline 元素设宽高无效，先升格 inline-block；inline 的上下 padding 不撑行。
display 还能一键变身 flex / grid——布局模块的入场券。

动手练习：做一排「标签墙」——用 inline-block 做五个带 padding 的彩色标签，再用 display:none 藏起一个、visibility:hidden 隐身一个，鼠标 hover 时把隐身的 visibility 改回 visible，观察「原位显形」和「挤开别人」的区别。