first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team-10/每天课程/2023-02-09/浮动.html
+++ b/历届学生/front-end-team-10/每天课程/2023-02-09/浮动.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>盒子模型</title>
+    <style>
+        .main {}
+
+        .box {
+            width: 200px;
+            height: 200px;
+        }
+
+        .box1 {
+            background: red;
+            float: left;
+        }
+
+        .box2 {
+            background: blue;
+            float: left;
+        }
+
+        .box3 {
+            background: green;
+            clear: both;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="main">
+        <div class="box box1">盒子1</div>
+        <div class="box box2">盒子2</div>
+    </div>
+
+    <div class="box box3">盒子2</div>
+
+</body>
+
+</html>
--- a/历届学生/front-end-team-10/每天课程/2023-02-09/盒子模型.html
+++ b/历届学生/front-end-team-10/每天课程/2023-02-09/盒子模型.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>盒子模型</title>
+    <style>
+        .box {
+            width: 200px;
+            height: 200px;
+        }
+
+        .box1 {
+            background: red;
+            border: 30px solid #050505;
+            padding: 10px;
+        }
+
+        .box2 {
+            background: blue;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="box box1">测试</div>
+    <div class="box box2"></div>
+
+
+</body>
+
+</html>
--- a/历届学生/front-end-team-10/每天课程/2023-02-09/笔记.txt
+++ b/历届学生/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