2022 铁人赛｜Day6 【CSS】三大典型 display

附上为何铁人赛文章会出现在这里的说明：2022 铁人赛｜Day1 报名失败，还是要开赛吧！

背景脉络

接触排版初期，总是苦恼于元素的换行、并排 ...

---

主题笔记

一、 什么是 display？

控制元素排列方式的 property。

display 有非常多的 values 可以套用，目前排版常见flex、grid、none，还有等等要介绍的block、inline、inline-block（完整 values 可参考W3School - CSS display property）

二、元素有自己预设的 display

预设为 block 的元素（Block Element 区块元素）预设为 inline 的元素（Inline Element行内元素）div, header, section, nav, p, h1~h6, ol, ul, li, form, tablespan, img, a, em, strong

三、三大典型 display

⬆️ 图片取自于ALPHA Camp课程讲义

.

block

独自佔用整个父层的宽度，不会和相邻的元素在同一行，宽高可随意调整

inline

紧邻相邻的元素，佔用的宽高由内容决定，无法随意调整
（所以若要对行内元素进行尺寸之类的操作，要先重新设定 display）

inline-block

同时具有 inline 与 block 特性，可以与相邻元素在同一行，初始宽高由内容决定，但可随意调整

整理表

-- | 佔满一行（宽）| 高 | 宽高可否手动调整？
------------- | -------------
block | ✅ | 跟随内容 | ✅
inline | ❌跟随内容 | 跟随内容 | ❌
inline-block | ❌跟随内容 | 跟随内容 | ✅

---

疑惑

。 img 为行内元素，但它的宽高可以调整，所以算是特例？（暂时理解为如此）

---

参考资料

ALPHA Camp课程讲义

---

以上是今天的分享，谢谢看完的你！