这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
课堂笔记
本堂课重点内容
走进前端技术栈 - CSS
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
深入CSS （上）
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
深入CSS （下）
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级
详细知识点介绍
走进前端技术栈 - CSS
Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
深入CSS （上）
选择器的特异度：id(#) 类(.) 标签(E)
可以在普通样式中对特殊样式进行覆盖
继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值（文本相关可继承，盒模型相关一般不可继承）
inherit 显式继承
CSS的求值过程：
布局：常规流、浮动、绝对定位（相关技术）
常规流包括行级、块级、表格布局、FlexBox、Grid布局
- width：指定content box宽度。百分数相对于容器的content box宽度
- height：指定content box高度。容器有高度时，百分数才生效
- padding：指定元素四个方向的内边距。百分数相对于容器宽度
- border：三种属性，四个方向（四条边框颜色不同时，为4个三角形）
- margin：指定元素四个方向的外边距。百分数相对于容器宽度 margin:auto 水平居中
深入CSS （下）
| 块级vs行级 | |
|---|---|
| 不和其他盒子并列摆放 | 和其他行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
| 生成块级盒子 | 生成行级盒子 内容分散在多个行盒中 |
| body、article、div、main、section、h1-6、p、ul、li等 | span、em、strong、cite、code等 |
| display:block | display:inline |
Flex Box
可以控制子级盒子摆放的流向、摆放顺序、盒子的宽度和高度、水平和垂直方向的对齐、是否允许折行
- justify-content
- align-item
- align-self
- order
Grid 布局
display:grid 把容器划分为二维的表格
课后个人总结
对块级和行级以及CSS的布局有了更加清晰的认识
