昨天的作业回顾：
1图片在div里显示不完整时候，给img加一个属性width:100%
2对于div内的图片"子div"和文字"子div"，善用padding: px;使它们尽量居中，不必将“子div”设置大小刚刚等于"母div"，而是稍小一点，用“padding”标签使得它们尽量居中。
一 flex弹性布局
属性一 Justify-content:将fexl元素和主轴对齐
Justify-content: flex-start:主轴左对齐
Justify-content: flex-end:主轴右对齐
Justify-content: center:主轴居中
Justify-content: space-between:主轴元素之间保持相等的距离
Justify-content: space-around:主轴元素周围保持相等的距离
注：(between散开程度略大于around)
属性二 `align-items:` 在交叉轴上对齐多个元素
Align-items: flex-start: 交叉轴顶部
Align-items: flex-end: 交叉轴底部
Align-items: center: 交叉轴居中
Align-items: baseline:元素在容器基线位置显示
Align-items: stretch:元素(交叉轴方向)被拉伸以填满整个容器
属性三 flex-direction: 定义主轴的方向
Flex-direction: row 元素摆放的方向和文字方向一致(左->右)
Flex-direction：row-reverse 元素摆放方向和文字方向相反(右->左)
Flex-direction：column元素从上放到下
Flex-direction：column-reverse;元素从下放到上
注意
① 当调换了行或列的方向后，flex-start和flex-end对应的方向也被调转了
② 当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。
属性四 单个元素的order属性
-1,0,1……
属性五 align-self 控制单个元素的属性
align-self: flex-start 交叉轴顶部
align-self: flex-end 交叉轴底部
align-self: center 交叉轴居中
align-self: baseline 单个元素在容器基线位置显示
align-self: stretch 单个元素(交叉轴方向)被拉伸以填满整个容器
属性六 flex-warp 定义flex元素必须在单行或自动换行成多行
Flex-wrap: nowrap 所有元素都在一行
Flex-wrap: wrap 元素自动换成多行
Flex-wrap: wrap-reverse 元素自动换成多行逆序
属性七 align-content 决定交叉轴行与行之间的距离
align-content: flex-start 多行集中在顶部
align-content: flex-end: 多行都集中在底部。
align-content: center: 多行居中。
align-content: space-between: 行与行之间保持相等距离。
align-content: space-around: 每行的周围保持相等距离。
align-content: stretch: 每一行都被拉伸以填满容器。
区别：align-content决定行之间的间隔，而align-items决定元素
整体在容器的什么位置。只有一行的时候align-content没有任何效果。<br>
二 定位
1相对定位 2绝对定位 3fixed定位
1相对定位 position: relative;
相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局
{ position: relative;
/* 定位居中的方法 */
left: 50%;
transform: translateX(-50%);
/* 以上是定位居中 */}
2绝对定位 position: absolute;
元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位
3 fixed定位 position：fixed；
比所有的元素权限高，z-index 值越大，越靠前，常常用于“网页右下角的控件”
两个div或图片进行嵌套时，要“子绝对，父相对”
三 浏览器对CSS的渲染步骤
1 生成Dom数
2 生成CSS树
3 组合渲染树
4 paint(解析边框，颜色，阴影等效果)
5 composite(组合)
csstriggers.com/
四@keyframes关键帧动画
eg:
<style>
@keyframes trans-all{
0%{
transform: translate(0%,300%);
}
30%{
transform: translate(300%,300%);
}
66%{
transform: translate(300%,0%);
}
82%{
transform: translate(0%,0%);
}
100%{
transform: translate(0%,300%);
}
}
.box{
animation:trans-all 0.6s linear infinite;
}
<style>
2动画效果
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
详细见blog.csdn.net/aSuncat/art…
3伪元素
::before和::after是伪元素，（css3中为了与伪类做区别，伪元素采用双冒号的写法
“:before” 伪元素可以在元素的内容前面插入新内容。
“:after” 伪元素可以在元素的内容之后插入新内容。
::before或::after都必须和content属性结合使用，content不能没有，内容至少为空；伪元素的display默认为inline，可以自己改.
详细见https://blog.csdn.net/ladream/article/details/104828444
注：
1 flex标签是响应式的，无论网页大小怎么变化，所以只要涉及到横向排列，flex是一个比较优越的解决方案。
2 vscode中快捷操作，如： li*5按住鼠标中键往下拖可以多行一起编辑等等
3 子代选择器的权重更高，不容易被其他样式替代
4 固定定位fixed，最好不要用于手机
5 Manrope字体，适合做标题；格式化插件pretti,margin和padding属性是上右下左的顺序，右键命令行 powershell code.启动，npm i http-server -g进行环境配置，vscode终端http-server命令即可用本地服务打开网页
6 纯CSS实现动画往往比JS参与的动画对浏览器的负担更加小，因为前者只需要对CSS的渲染步骤的最后一步进行重置，后者需要执行最后两步