[ 深入CSS（下1）| 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天，以下是我根据课程内容整理的笔记。

课堂笔记

课程重点

1. CSS 盒模型 - 行级
2. CSS 盒模型 - 块级

笔记内容

块级Vs.行级

• Block Level Box

  • 不和其它盒子并列摆放

  • 适用所有的盒模型属性

• Inline Level Box

  • 和其它行级盒子一起放在一行或拆开成多行

  • 盒模型中的width、height不适用

块级元素	行级元素
生成块级盒子	生成行级盒子,内容分散在多个行盒(line box)中
body、article、div、main、section、.h1-6、p、ul、li等	span、em、strong、cite、code等
display:block	display:inline

display属性

block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中；可以设置宽高；作夠一个整体不会被拆散成多行
none	排版时完全被忽略

常规流Normal Flow

• 根元素、浮动和绝对定位的元素会脱离常规流

• 其它元素都在常规流之内(in-flow)

• 常规流中的盒子，在某种排版上下文中参与布局

(ps：排版包括 行级排版上下文、块级排版上下文、Table排版上下文、Flex排版上下文、Grid排版上下文)

行级排版上下文

• Inline Formatting Context (IFC)

• 只包含行级盒子的容器会创建一个IFC

• IFC内的排版规则

  • 盒子在一行内水平摆放

  • 一行放不下时，换行显示

  • text-align决定一行内盒子的水平对齐

  • vertical-align决定一个盒子在行内的垂直对齐

  • 避开浮动((float)元素*

块级排版上下文

• Block Formatting Context (BFC)

• 某些容器会创建一个BFC

  • 根元素

  • 浮动、绝对定位、inline-block

  • Flex子项和Grid子项

  • overflow值不是visible的块盒

  • display:flow-root;

BFC内的排版规则

• 盒子从上到下摆放

• 垂直margin合并

• BFC内盒子的margin不会与外面的合并

• BFC不会和浮动元素重叠

结语

通过本次课程的学习，真的收获到了许多，以前对一些比较模糊的知识点也逐渐的清晰了起来。