笔记整理自
学堂在线的课程
Web前端攻城狮(2021春)-第三章css布局-赵文博老师
课程十分清晰，课件简明，适合初学者、以及有经验的开发者查漏补缺。
我学习到以下几点
html根元素脱离文档流
IFC
BFC
有以下疑惑 “css定位元素的位置有3种模式: 常规流、浮动、绝对定位。” 那固定定位算什么？
布局是什么
- 确定内容的大小和位置的算法
- 具体算法依据元素、容器、兄弟节点等信息来计算
布局相关的技术
css确定元素的位置有3种模式
- 常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
- 浮动
- 绝对定位
常规流
- 根元素、浮动和绝对定位的元素脱离常规流
- 其他元素都在常规流之内
- 常规流的盒子，在某种排版上下文中参与布局
- 行级排版上下文
- 块级排版上下文
- Table排版上下文
- Flex排版上下文
- Grid排版上下文
行级排版上下文(IFC)
Inline Formatting Context
- 只包含行级盒子的容器会创建一个IFC
如果一个块级盒子 它的内容只包含行级盒子没有块级的盒子 就会为里面的内容建立一个行级排版上下文 - IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- 图片、inline-block、单词在换行时是原子的，即默认不换行
- overflow-wrap: break-word; 让单词可以换行。但不是始终换行，只有在单词的长度超过容器的宽度才会换行
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定盒子在行内的垂直对齐
- 避开浮动元素
块级排版上下文(BFC)
Block Formatting Context
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- BFC的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内的盒子的margin不会和外面的合并
- BFC 不会和浮动元素重叠
也就是说流外的元素 比如浮动元素、绝对定位元素， 还有一些少数的流内的元素 inline-block、overflow：非visible会创建BFC；或者说它们都是流的容器 flowRoot（在流里面产生一个跟文档流不一样的流）
根元素会创建一个块级的排版上下文 正常的元素都在根元素的流(即文档流)里
绝对定位的元素 本身脱离了文档流 由绝对定位的规则来决定它的大小和位置 但是它里面的内容也是正常的按照流的规则去布局 所以浏览器就给绝对定位元素里的内容创建一个块级上下文 让绝对定位作为流的根节点 给它里的内容按照流的规则去布局
一个盒子的子盒子只能全部是块级 或者全部是行级
如果一个容器里元素有行级也有块级元素
下面这个span元素 有文字(行级)和div(块级)
浏览器把div前后两段文字都用一个匿名的块级盒子包裹起来
相当于 span里先有一个块级的盒子包含第一段文字 然后是一个块级的div 最后是一个块级盒子包含一段文字 这样span里都是块级 每一个块级盒子里都是文字 所以会创建一个行级的上下文去摆放文字 从上到下一共产生了3个行级排版上下文
