first commit

历届学生/吴欣阳/每天课程/2021-06-04/笔记.txt

@@ -0,0 +1,41 @@
+display: flex  开启弹性盒子
+
+
+弹性盒子
+
+作用：快速布局，各种对齐，各种排列
+
+12个属性
+
+6个应用在父元素上
+align-items 只有一行元素的时候，让子元素在父容器的Y轴中对齐  center
+align-content 多行元素的时候，让多个子元素在父容器的Y轴中对齐  center
+
+justify-content 让子元素在父容器的X轴中对齐  space-around
+flex-direction 改变元素的排列方向  row(横着放) column（竖着放）
+flex-wrap   wrap 一行排不下的时候，自动换行
+
+flex-flow  flex-direction和flex-wrap简写
+
+6个应用在子元素上
+order 设置元素顺序，数值越小越靠前
+flex-grow 通过设置比例的方式，改变元素所占空间比
+flex-shrink: 0; 设置元素的缩小比例，0 表示不要缩小
+flex-basis 设置元素的宽度
+flex 是flex-grow, flex-shrink 和 flex-basis
+一般都是写 flex: 数值  一个参数，表示设置  flex-grow
+align-self 允许单个元素设置不同的对齐方式
+
+
+rem 
+
+尺寸的单位，他可以动态的改变
+
+rem 计算规则
+
+10rem * 16px(html 上默认的font-size的数值)  = 160px
+
+font-size 改变的方式：
+
+1：css 媒体查询 media
+2：js 来计算