first commit

历届学生/front-end-team-10/每天课程/2023-02-16/笔记.txt

@@ -0,0 +1,70 @@
+1：媒体查询（响应式开发）
+
+2：弹性盒子 +  rem（手机网站的尺寸单位）
+
+
+为什么需要？？？？
+
+   以前的做法：写一个pc网站，然后通过  媒体查询  技术，来兼容 pc 和  手机
+     媒体查询：实时检测屏幕的宽度变化，然后显示或者隐藏网页上的元素，让pc网站适配手机
+
+   现在的做法：写两个网站，一个pc，一个手机网站
+
+  pc网站
+
+  手机网站
+
+
+rem: 
+  相对的尺寸单位，为了实现尺寸上的兼容
+   
+
+  1.875rem 你写的尺寸（rem）  *   html上font-size = 真实的尺寸  160px
+
+  html上font-size 需要动态去变化的
+  那如何变化？
+
+    媒体查询
+
+    js
+
+
+弹性盒子：
+
+  布局兼容
+
+  有两个轴 ，主轴x  和  交叉轴 y
+
+  13个css属性：
+
+    7个在父元素上：
+
+      display: flex  开启弹性盒子
+
+
+      flex-direction  改变默认的排列方向  row  column，注意 如果设置了 column，那么 align-items 和 
+                      justify-content 作用相反
+
+      flex-wrap  排不下换行（注意，子元素自己加宽度）
+      justify-content  设置水平居中
+      align-items  垂直居中
+      
+      align-content 设置多行结构的  垂直居中
+
+       flex-flow  是flex-direction属性和flex-wrap属性的简写形式
+
+
+
+    6个在子元素上：
+
+     flex-grow 定义元素的放大比例，数值越大占比越大
+     flex  一般设置一个数值，实际作用约等于  flex-grow
+
+     flex-shrink 定义元素的缩小比例，0 不缩放  1 默认缩放
+
+      order   排列顺序，数值越小越靠前
+     
+
+      flex-basis
+      
+      align-self  允许某个元素脱离 align-items 的规则来对齐