练习

2021-04-29 17:16:40 +08:00
parent 812be57880
commit 55c598cdb1
195 changed files with 12788 additions and 34 deletions
--- a/teaching/林锦绣/position.html
+++ b/teaching/林锦绣/position.html
@@ -0,0 +1,58 @@
+<!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>  
+    <!-- 
+        内联元素  不换行   display  inline
+        块级元素   换行    display  block
+        定位  position
+             默认值 是static
+            relative  相对定位   相对于他自己
+            absolute   绝对定位   如果说他的父元素被 relative修饰  那么他就是按照父元素进行定位   如果父元素不被relative  那么他按照最外层（body）进行定位
+            fixed       固定定位
+            sticky      粘性   滚动条不动的时候  元素是相对定位   滚动条滚动的时候  他是 固定定位
+
+        用法  position:relative
+              top:30px
+              left:
+              bottom
+              right
+
+
+     -->
+     <style>
+         *{
+             margin:0;
+             padding: 0;
+         }
+         .box{
+             width:400px;
+             height: 400px;
+             background: red;
+             position: relative;
+            margin: 0 auto;
+            margin-top: 60px;
+         }
+
+        .item{
+            width: 200px;
+            height: 200px;
+            background-color: blue;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+     </style>
+</head>
+<body>
+    <div class="box">
+        <div class="item"></div>
+    </div>
+    <div>
+        <img src="" alt="">
+    </div>
+</body>
+</html>