这是我参与【第五届青训营】伴学笔记创作的第2天。
本节课主要围绕盒模型中行“行级”与“块级”这两种常见的布局结构展开，讲解其基本定义、各自特征、工作属性和排版规则，提供业内操作思路。
一、本堂课重点内容
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级
二、详细知识点介绍：
块级VS行级
块级：从上到下 行级：从左到右
display属性
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行。
- none：排版时完全被忽略。
行级排版上下文
- 单词：原子性，可以用overflow-wrap:break-word使其分开，在超出框时换行。
块级排版上下文
排版规则：
例：行级里面有块级
Flex Box（常用）
详细文章：《深入浅出之 Flex 弹性布局》
设置方法：display:flex
例：
flex-direction
主轴与侧轴
1、主轴justify-content
2、侧轴align-items
- 可以各自设置属性
- 可以赋予顺序值order
Flexiblity
- flex-grow
a、b比例2：1
- flex-shrink
- 综合：flex
Grid布局
二维布局
设置方法：display:grid
划分网格
- column：列方向
- row：行方向 例：
30%：占盒子的30%
auto：剩下的占满
1fr：占一份（A占100之后，B、C各占一份）
网格线gred line
网格区域grid area
例1：
两者意义相同：
例2：
看不出来网格线在哪里，可以使用开发者工具-检查来看
float
现在常用于实现图文混排效果。
绝对定位
position属性
- static：默认值，非定位元素。
- relative：相对自身原本位置偏移，不脱离文档流。
- absolute：绝对定位，相对非static祖先元素定位。
- fixed：相对于视口绝对定位。（可用于导航栏）
三、总结
CSS的学习就到这里啦，老师给出了三点建议，总结了一下首先就是要使用规范，充分利用MDN和W3C CSS规范；与时俱进，善用浏览器的开发者工具并且不断学习新特性。
