first commit

历届学生/逯帅帅/项目开发/学生项目/应越波/day1/浮动以及定位总结.html

@@ -0,0 +1,88 @@
+<!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>Document</title>
+    <style>
+        /* 最终的宽 = 宽(100) + 左右边框(20) + 左右内边距(20)=140  
+            注意:margin是外边距,并不影响实际宽高,也只有它不影响宽高
+
+            但每次计算都很麻烦能不能不自己手动计算,让电脑自动计算?
+            答案是有的,添加box-sizing:border-box,比如你设置一个盒子宽高为100*100,无论你再怎么加padding,border,他的实际宽高都是100*100
+            他会根据你输入的padding和margin自动减内容*/
+        .a{
+            width: 100px;
+            height: 100px;
+            background-color: red;
+            border: 10px solid blue;
+            margin: 10px;
+            padding: 10px;
+            box-sizing: border-box;
+           
+        }
+    </style>
+</head>
+<body>
+    <div class="a"></div>
+
+
+    ---------------------------------------
+    <!-- flot设计的初衷就是环绕文字的,所以文字不会被压在底下 -->
+
+    定位:1.相对定位 position: relative;
+            元素会脱离标准流,保留原来的位置不会被删除
+            在移动元素的时候,参照点是自己原来的位置
+
+        2.绝对定位 position: absolute;
+            元素会脱离标准流,不保留原来的位置
+            绝对定位在移动元素的时候,是看看父元素是否有定位,有就以该元素为参照点去移动,
+            没有就向上一级去查找,有就以该元素为参照点去移动,还没有在往上查找,如果上面都没有,就以body为参照点去移动
+
+    总结:相对定位 position: relative;是当爹的一个过程.而绝对定位 position: absolute;是找爹的过程,没找到爹就以body为爹
+         一般实际开发中,都是子元素绝对定位,父元素相对定位
+
+        3.固定定位 position: fixed;
+            固定在可视区域的摸个地方
+
+    层级 z-index:数值
+         注意:该数值越大,就越往上,值越小可以越往下,可以是负值哦,而且z-index是会相互影响的
+
+         思考?现在是否可以实现把红色盒子夹在俩个盒子中间?答案是不行的,
+         最初的想法是给a3的z-index数值最大,其次是a1的z-index数值第二大,最后是a2的z-index的数值最小
+         但结果是不行的,最后是以父盒子a2为准,子盒子a3继承了父盒子a2.
+         <style>
+             .a1{
+                width: 100px;
+                height: 100px;background-color: red;
+                float: left;
+                position: relative;
+                left: 30px;
+
+             }
+             .a2{
+                 width: 100px;
+                 height: 100px;
+                 background-color: blue;
+                 float: left;
+                 position:relative;
+             }
+             .a3{
+                 width: 50px;
+                 height: 50px;
+                 background-color: pink;
+                 float: left;
+                 position: absolute;
+                 left: 10px;
+             }
+         </style>
+         <div class="a0">
+             <div class="a1">a1</div>
+             <div class="a2">a2
+                 <div class="a3">a3</div>
+             </div>
+         </div>
+            
+</body>
+</html>