init

2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
--- a/Html-Css/22-定位.html
+++ b/Html-Css/22-定位.html
@@ -0,0 +1,114 @@
+<!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>
+
+        body {
+            height: 100px;
+        }
+
+        p {
+            background-color: blue;
+        }
+       
+        #app {
+            background-color: coral;
+            width: 400px;
+            height: 400px;
+
+            /* 相对定位 */ /* 正常布局不会影响文档流的布局 */
+            /* position: relative; */
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+        .box1 {
+            background-color:blue;
+            width: 100px;
+            height: 100px;
+
+            /* 绝对定位 */
+            /* position: absolute; */
+            /* top: 0; */
+            /* bottom: 0; */
+            /* left: 0; */
+            /* right: 0; */
+
+        }
+
+        .fixed {
+            /* 固定定位 */
+            position: fixed;
+            background-color: aqua;
+            width: 400px;
+            height: 400px;
+            padding: 20px;
+
+            bottom: 100px;
+            right: 100px;
+            
+
+        }
+        .fixed span {
+            position: absolute;
+            top:  10px;
+            right: 10px;
+            cursor: pointer;
+        }
+
+    </style>
+
+</head>
+
+<body>
+
+    <div class="fixed">
+        小广告
+        <a href="www.baidu.com">X</a>
+    </div>
+
+    <div id="app">
+        <div class="box1"></div>
+        <p>我是p标签</p>
+
+
+    </div>
+    <p>我是p标签</p>
+
+    <!-- 
+        相对定位
+            1.不会改变正常文档流的布局
+            2.相对的是盒子本身的四个角进行定位
+
+        绝对定位
+            1.脱离了正常的文本流
+            2.找o点
+                1.父盒子有定位属性:四个角是绝对定位的四个o点
+                2父盒子没有定位属性,那他就会往上找有定位属性的祖宗盒子,
+                如果有祖宗盒子有定位属性,即相对这个祖宗盒子的四个角.
+                3.如果他的父亲和祖宗都没有定位属性的盒子,那么就相对于html盒子的四个角为o点(可视化窗口)
+
+
+        固定定位
+            1.
+
+        注意:
+            所有定位的盒子,属性均会变成 行内块的类型
+
+
+            定位偏移量
+                top,bottom , left, right
+                不能同时使用相对方向
+     -->
+
+</body>
+
+</html>