这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天✌
课堂笔记
本堂课重点内容：
CSS盒模型--行级与块级 ：
- 基本定义
- 各自特征
- 工作属性
- 排版规则
详细知识点介绍
1.CSS块级和行级盒子基本定义
| 块级（Block Level Box） | 行级（Inline level Box） |
|---|---|
| 不和其它盒子并列摆放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中 width、height 不适用 |
| 块级元素 | 行级元素 |
|---|---|
| 生成块级盒子 | 生成行级盒子，内容分散在多个行盒中 |
| body、article、div、main、section、h1~h6、p、ul、li 等 | span、em、strong、cite、code 等 |
| display：block | display：inline |
2. display属性
| 属性值 | 说明 |
|---|---|
| block | 块级盒子 |
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行盒子，可以设置宽高；作为一个整体不会被拆散成多行 |
| none | 排版时完全被忽略，不会被展示 |
3.排版上下文
①行级排版上下文（也叫⾏内格式化上下文）Inline Formatting Context （IFC）：
当IFC中有一个块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC
IFC 内的排版规则
-
盒⼦在一行内⽔平摆放
-
一行放不下时，换⾏显示（overflow-wrap: break-word;单词过长就在单词内换行）
-
text-align 决定一行内盒⼦的⽔平对齐
-
vertical-align 决定⼀个盒⼦在行内的垂直对齐
-
避开浮动(float)元素 *
② 块级排版上下文Block Formatting Context (BFC)
1）BFC内的排版规则：
1. BFC是一个块级元素，块级元素在垂直方向上依次排列。
2. BFC是一个独立的容器，内部元素不会影响容器外部的元素。
3. 属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。
2）某些容器会创建⼀个BFC
- CSS3 的一种新的布局模式
- 浮动（float的值不是none）、绝对定位（position的值不是static或者relative）、display（是inline-block、table-cell、flex、table-caption或者inline-flex）
- Flex⼦项和 Grid ⼦项
- overflow 值不是 visible 的块盒
4. Flex Box（Flexible Box）
-
CSS3 的一种新的排版上下文
-
可以控制子集盒子的：
- 摆放的流向（→ ← ↑ ↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
-
主轴（main axis） 是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
-
交叉轴（cross axis） 是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
-
水平对齐方式justify-content
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔相等 |
| space-around | 项目两侧的间距相同，项目之间的间距比两侧的间距大一倍 |
1.flex-start：
2.flex-end：
3.center：
4.space-between：
5.space-around：
- align-items「项目」在交叉轴上对齐方式「单轴」 这个是 container 容器的属性，设置的是 items 项目元素在交叉轴上对齐样式
| 属性值 | 说明 |
|---|---|
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch（默认值） | 如果项目未设置高度或设为auto，将占满整个容器的高度 |
- align-content 交叉轴行对齐方式，多行，和 justify-content 属性一样。
1.flex-start：
2.flex-end：
3.center：
4.baseline：
5.stretch：
5. Flex属性
Flex伸缩布局决定性的特征是让伸缩项目可伸缩，也就是让伸缩项目的宽度和高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比率 分配剩余空间，也会按照收缩比率缩小各项目以避免溢出。
| 属性值 | 说明 | 默认值 |
|---|---|---|
| flex-grow | 设置项目的放大比例 | 0 |
| flex-shrink | 设置项目的缩小比例 | 1 |
| flex-grow | 设置该元素的宽度 | auto |
1.flex-grow
默认为0，即如果存在剩余空间，也不放大。 当所有项目的flex-grow属性值都为1时，三个项目会平分剩余的宽度
2.flex-shrink
默认为1，如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
未压缩：
压缩后：
d2的flex-grow:0属性使其空间未被压缩
6. Gird布局
Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布
-
通过在元素上声明display:grid或者display:inline-grid来创建一个网格容器
-
grid-template-columns和grid-template-rows属性来定义网格中的行和列
-
grid-template-areas可以将网格中的一些单元格组合成一个区域（area），并为该区域指定一个自定义名称
-
grid-item样式
- grid-column-start 属性，设置起始列
- grid-column-end 属性，设置结束列
- grid-row-start 属性，设置起始行
- grid-row-end 属性，设置结束行
7. position布局
| 属性值 | 说明 | 是否脱离文档流 |
|---|---|---|
| static 默认值 | 默认位置，（static 元素会忽略任何top、bottom、left 或right 声明） | 否 |
| relative 相对定位 | 位置被设置为relative 的元素，偏移的top，right，bottom，left 的值都相对于它原来的位置进行偏移 | 否 |
| absolute 绝对定位 | 位置设置为absolute 的元素，可定位于相对于包含它的元素的指定坐标 | 是 |
| fixed 固定定位 | 相对于浏览器窗口进行定位 | 是 |
总结：position值不为static和relative的元素都脱离了文档标准流
课后个人总结
- 充分利用MDN和W3C CSS规范
- 保持好奇心，善用浏览器的开发者工具
- 持续学习，CSS新特新还在不断出现
