init

2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
--- a/Html-Css/16-盒子类型display.html
+++ b/Html-Css/16-盒子类型display.html
@@ -0,0 +1,95 @@
+<!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>display</title>
+
+    <style>
+
+        body {
+
+        }
+
+        div {
+            background-color: lightblue;
+            width: 100px;
+            height: 100px;
+
+
+            /* 块标签->行内标签 */
+            display: inline;
+
+            /* 块-> 行内块标签*/
+            display: inline-block;
+
+            vertical-align: middle;
+            /* 中线对齐 */
+
+            
+        }
+
+        span {
+            background-color: salmon;
+            width: 100px;
+            height: 100px;
+
+            /* 行内标签->块 */
+            display: block;
+            
+        }
+
+
+        img {
+            width: 300px;
+            vertical-align: middle;
+            /* 中线对齐 */
+
+            cursor:pointer ;
+            /* 鼠标悬停样式 */
+
+            display: none;
+            /* 关闭盒子 */
+        }
+
+    </style>
+
+</head>
+
+<body>
+
+    <div>   
+        我是div
+    </div>
+    <div>   
+        我是div
+    </div>
+    <span>
+        我是span
+    </span>
+    <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.43Hx8xXHGxUiVTllqgR0XQHaKK?w=182&h=250&c=7&r=0&o=5&dpr=1.25&pid=1.7">
+
+ 
+</body>
+
+</html>
+
+<!-- 
+    块标签
+        1.独占一行
+        2.他的宽度为父盒子内容宽度
+
+    行内标签
+        1.内容有空间就横着排，没有控件就换行 (可被文本样式更改)
+    2.宽高有内容决定，设置宽高无效
+
+    行内快标签（img）
+        1.宽高默认由内容决定，可以自定以宽高
+        2.他有行内的性质
+
+
+
+-->