这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天 。
一、本堂课重点内容：
- 走进前端技术栈 - CSS：介绍了CSS及常用属性和用法。
- 深入CSS：介绍选择器、继承、解析过程、布局、行块级。
二、详细知识点介绍：
（一）走进前端技术栈 - CSS
1 属性选择器
11:23 输入框input设置value展示默认文字 disabled属性，其CSS加[]
11:43 input[type="password"]设置CSS
12:43 a[href^="#"] ^选择以“#”开头链接，a[href$=".jpg"] $选择以“.jpg”结尾链接
2 伪类
2.1 状态伪类
改变状态时会展示的效果，如悬浮a:hover、默认link、访问过visited、按下active,输入时
:focus
2.2 结构伪类
li:first-child
3 组合
4 选择器组
用逗号
5 颜色 - HSL
6 透明度rgba hsla
7 字体
字体后要加通用字体族，加中英文；可用超链接引入其他字体
8 行高（1.6）
9 text-align
justfy中间空格不等长
10 spacing
11 text-indent段落缩进
12 white-space
normal:无\n+单空格，自动换行 nowrap:无\n+单空格，不自动换行 pre:原格式（\n+多空格，无自动换行） pre-wrap:原格式+自动换行（\n+多空格，自动换行） pre-line:\n+单空格，自动换行
（二）深入CSS（上）
1 显式继承
有些属性不能继承，可以显式继承。没有找到继承用初始值
1.1 初始值
2 布局
浮动可在常规流之上
height设置为百分比时需要容器有指定高度才生效 box-sizing:border-box
2.1 overflow
（三）深入CSS（下）
行级盒子width、height失效
1 行级
行块都会避开浮动。块外垂直margin会合并（可以外套一个盒子变成盒内margin就不会合并）。
行块不要混合嵌套，要不然自动加匿名盒子
2 display:flex
2.1 flex-direction
2.2 对齐
2.2.1 justify-content
2.2.2 align-item
默认stretch
