这是我参与「第五届青训营 」笔记创作活动的第3天。以下是我在观看学习视频的同时进行的笔记记录，今天学习了好多新知识，感觉好充实！同时也希望大佬们进行补充和改正，大家一起加油努力呀!
本节课的重点内容
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级
本节课知识点介绍
块级元素
生成块级盒子
- body
- article
- div
- main
- section
- h1-6
- p
- ul
- li
- display
行级元素
生成行级盒子
内容分散在多个行盒(line box)中
- span
- em
- strong
- cite
- code
display属性:
- block块级盒子
- inline行级盒子
inline-block本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行。
行级排版上下文
只包含行级盒子的容器会创建一个IFC
IFC的排版规则
- 盒子在一行内水平拜访
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动元素
块级排版上下文
某些容器会创建一个BFC
BFC内排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会和外面的合并
- BFC不会和浮动元素重叠
常见属性
display:flex弹性布局
display规定生成的盒子类型
flex-grow
这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。
position属性
- static默认值，非定位元素
- relative相对自身原本位置偏移，不脱离文档流（相对于自己本应该在的位置进行偏移，使用top、left、bottom、right设置偏移长度）
- absolute绝对定位，相对非static祖先元素定位
- fixed相对于视口绝对定位
实践练习例子
个人总结
今天学习了css的盒模型，收获很大，明天继续加油！
