这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
一、本堂课重点内容：
- css盒模型-块级
- css盒模型-行级
二、详细知识点介绍：
块级元素会生成块级盒子，块级元素包括：body、article、div、main、section、h1-6、p、ul、li等。也可以通过display: block转化为块级盒子。
行级元素会生成行级盒子，内容分散在多个行盒（line box）中，行级元素包括：span、em、strong、cite、code等。也可以通过display: inline转化为行级盒子。
除此之外，dispaly属性还有inline-block和none值。inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体，不会被拆散为多行。none：排版时忽略。
常规流Normal Flow：根元素、浮动和绝对定位的元素会脱离常规流，常规流中的盒子会在某种排版上下文中参与布局。
排版上下文类型：
- 行级排版上下文（IFC）：只包含行级盒子的容器会创建一个IFC。在IFC中，盒子会在一行内水平摆放，放满换行，text-align决定水平对齐，vertical-align决定垂直对齐，且会避开float元素。overflow-wrap：break-word会把过长的单词拆开以换行。
例：
- 块级排版上下文（BFC）：某些容器会创造一个BFC。包括根元素、浮动、绝对定位、inline-block、Flex子项和Grid子项、overflow值不为visible的块盒，以及dispaly：flow-root的元素。排版规则：盒子摆放顺序为从上到下，垂直margin合并，且BFC内盒子margin不会与盒外的合并，BFC也不会与浮动元素重叠。
例：从边框可以看出行级元素span中只有一行，会有匿名盒子包裹除了div外的两块。
- Flex Box排版上下文：可以控制子级盒子的摆放流向（上下左右）、摆放顺序、盒子宽高、水平和垂直对齐以及是否允许折行等。
例：默认流向为从左到右，默认宽度根据内容设定。
对齐设置：主轴（x轴）和侧轴（反y轴）。
- justify-content主轴对齐：file-start左对齐、flex-end右对齐、center居中、space-between元素中间插入空白、space-around元素中间插入空白，首尾插入少量空白、space-evently元素中间以及首尾插入空白。
- align-items侧轴对齐：file-start上对齐、flex-end下对齐、center居中、stretch拉长对齐、baseline文字对齐基准线。
- flexibility弹性：设置子项的伸展和收缩。flex-grow：伸展能力，flex-shrink：收缩能力，flex-basis：基础长度。
例：将剩余空间按2:1的比例分给a和b。
可以缩写成flex这一个属性，缩写方式如下：
- Grid布局：二维布局方式，不同于Flex Box的一维布局方式，Grid布局可以设置元素占几行几列。
首先划分网格，例：
设置方式1：三行两列
设置方式2：与1类似，但是用一个auto替代数值，表示除指定部分外的剩余部分。
设置方式3：与2类似，fr为除指定部分外的剩余部分总值中的占比。
网格分配方式：用网格线进行分配，标明起止行和起止列。
position属性：
-
static：默认值，非定位元素；
-
relative：相对自身原本位置偏移，不脱离文档流；
- absolute：绝对定位，相对非static祖先元素定位，例如相对于其他absolute元素定位。
- fixed：相对于视口绝对定位，例如导航栏。sticky类似，但滚动到下一sticky项时，下一项会覆盖当前项位置。
三、课后个人总结：
充分了解了盒模型的布局方式，包含块级布局、行级布局、常规流中的一些布局规则，以及一些属性的用途等。
