良好的学习习惯

• 戒骄戒躁
• 专注
• 宁可慢，不要赶
• 做计划
• 独立思考的习惯
• 养成写作的习惯(写博客)
  • 掘金
  • 知识星球
  • 思否
  • 飞书
  • 语雀
  • 知乎
  • CSDN
• markdown
• 上大学的同学建议
  • 如果大二的同学，至少坚持每两天刷一道算法题
  • 大四的同学，多做项目，多看看github上一些开源的项目

上阶段复习

CSS基础

//选择器
id
class
元素
属性
属性和值多个选择器
伪类选择器:hover :link。。。。
结构伪类选择器 E:nth-child(n)...
伪元素选择器 ::before ::after

通配符 *
后代选择器 p span
直接子元素选择器 p > span
交集选择器 p.test
并集选择 h1,h2,h3
同辈选择器 相邻兄弟选择器 +
同辈组合选择器 通用兄弟选择器 ~

CSS中的一些英文属性

字体
文本
背景
列表
边框
padding
margin

CSS中的单位

px em rem vh vw...

字体

衬线字体
非衬线字体
等宽字体
字体族（字体堆栈）

颜色

rgb rgba r红 g绿 b蓝

hsl hsla
hsl(hue,saturation,lightness) 相机里面的相关设置
hue色相 0/360 红色 30橙色 60黄色
color:hsl(0,100%,50%) // 红色
color:hsl(0,0%,50%) // 灰色
color：hsl(30,100%,50%) // 橙色

属性的计算过程

1、确定声明值
2、层叠冲突
3、继承
4、使用默认值

层叠规则

重要性 !important
专用性 计算权重 千 百 十 个
源次序 css代码的先后属性

消除浏览器默认样式

*{
  maring:0;
  padding:0;
}
ul{
  list-style:none;
}

盒模型

margin border padding content

浮动

常规流盒子
浮动盒子 float:left div :after clear:both

定位

静态定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixed
粘性定位 stiky

参考系

BFC

块级格式化上下文
页面中的一块渲染区域，这个区域有一套自己的渲染规则

精灵图（雪碧图）

为什么需要雪碧图
实现细节：background-position

flex布局

flex弹性盒子容器默认存在两根轴线：水平的主轴(main axis)  垂直的交叉轴（cross axis）

属性有一大堆，其实就两大类
容器的属性
- flex-direction : row|row-reverse|colum|column-reverse 决定主轴的方向
- flex-wrap:如何换行
- flex-flow:上面两个属性的简写，默认值是row nowrap
- jusitify-content：主轴的对齐方式
- align-items:交叉轴的对齐方式
- align-content:定义了多根轴线的对齐方式
项目的属性
- order：排序
- flex-grow:放大比例 0
- flex-shrink:缩小比例 1
- flex-basis:计算主轴多余空间
- flex：上面三个属性的简写 0 1 auto
- align-self：每个项目自己的对齐方式