捉迷藏失败
🦊
Little Fox (小狐狸):
我要躲避狮子!
看我的... display: none;
哎呀?我怎么觉得自己完全消失了?连我的脚印都不见了!

我是一只羊。

我是一只用了 display: none 的狐狸。

我是另一只羊(我挤上来了)。

(小狐狸彻底消失了,没有留下任何痕迹!)

耶和华军队的队列
🧑‍🦱
Young David (少年大卫):
小狐狸,别乱跑。要战胜巨人,我们需要整齐的队列。
元素有三种基本的站位方式。

1. 勇士 (Block)

我是 Block 元素 (如 <div>, <p>, <h1>)
我独占一行,谁也别想站我旁边!

特点:像大能的勇士,独占一行,可以设置宽 (width) 高 (height)。

2. 百姓 (Inline)

我是一段文字,我是 Inline (如 <span>, <a>),我可以和别人挤在一起。 但我不能设置宽高! (你看,变大失败了)

特点:像普通的百姓,肩并肩站立,宽高设置无效 (大小随内容而定)。

3. 利未人 (Inline-Block)

我既能并排
又能设宽高

特点:结合了勇士的能力和百姓的谦卑。常用于按钮和导航!

隐秘的事

小狐狸,如果你只是想藏在草丛里,但占着位置,要用这个:

display: none

被提 (Vanishing)

就像从来没存在过一样。不占空间。

visibility: hidden

隐形 (Invisible)

看不见了,但还在那里占位置。你会撞到透明墙。

⚔️ 操练场 (Training Ground)

任务: 识别元素的身份。

问题:<div> 标签默认是什么类型的 Display?