思路：前提时需要监听scroll事件1）滚动条不动时，是静态相对定位状态relative2）当页面滚动超出设置距离时，js改变样式属性 切换定位状态变成fixed，同时再给top设置一个值

🍅 #wrap > .inner {color: pink;} 也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素 总结：>作用于元素的第一代后代，空格作用于元素的所有后代

1. 容器的布局方向和排列方向🍅 flex-direction控制主轴是哪一根同时控制主轴的方向(排列方式) {代码...} 2. 富裕空间的管理🍅只决定富裕空间的位置，不会给项目区分配空间🍅主轴 :justify-content {代码...} 🍅侧轴 : align-items 管理单行的富裕空间 垂直于主轴的轴 {...

设置外边距会在元素外创建额外的“空白”，“空白”通常指不能放其他元素的区域，而且在这个区域可以看到父元素的背景，外边距不会影响盒子的大小，但会影响盒子的位置