first commit

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

@@ -0,0 +1,60 @@
+ 盒子 模型: 
+
+   有 内边距(padding) ，外边距(margin)，边框(border)，内容（content）
+
+   padding 变大
+
+    padding 和  margin  写法一样
+
+    margin: 10px;  /** 同时对 上右下左 四个方向设置一样的数值**/
+    margin: 10px 20px; /** 同时对 上下 左左右 设置数值 **/
+    margin: 10px 20px 30px; /** 对 上 左右  下  设置数值 **/
+    margin: 10px 20px 30px 40px; /** 上  右  下 左 **/
+
+    /* margin-bottom: 17px;
+        margin-left: 42px;
+        margin-top: 31px; 
+        margin-right: 10px;*/
+
+
+    border: 10px solid #050505;
+    border-top: 10px solid #050505;
+    border-right: 10px solid #050505;
+    border-bottom: 10px solid #050505;
+    border-left: 10px solid #050505;    
+
+
+ 主要是为了方便将布局和现实映射  
+
+  盒子模型的计算规则：
+
+   标准盒子模型：
+
+     元素真实宽高 = 你写的宽高（content宽高） + padding & border
+
+     在你写的宽高 基础上向外拓张
+
+   怪异盒子模型 box-sizing: border-box;   ：
+
+     content 宽高 = 你写的宽高（元素真实宽高） - padding & border
+
+     在你写的宽高 基础上向内缩减
+
+
+
+
+
+浮动：
+
+  让元素（块）排一行，或者实现  左右布局
+
+  注意：
+    浮动会让元素从原本的位置删除（文档流中删除），下面的元素会钻下去
+
+    如何解决：
+
+      1：clear: both;  加在受影响的那个元素上
+      2：手动加高度 
+      3：overflow: hidden; 
+
+  float: left  right