首頁 探索 說明
登入
lovecoding
/
W250511
10
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

admin

fengchuanyu 2 周之前
父節點
c8b099c2a7
當前提交
1ff9237e5e
共有 2 個文件被更改，包括 81 次插入 和 0 次删除
統一視圖 顯示文件統計
  1. 56 0
      2-CSS/26_BFC2.html
  2. 25 0
      2-CSS/27_inlieblock.html

+ 56 - 0
2-CSS/26_BFC2.html
查看文件 

@@ -0,0 +1,56 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* BFC 区域  */
 
+        /* 生成BFC区域后 内不元素不会与外部元素关联 */
 
+        .box{
 
+            width: 400px;
 
+            height: 400px;
 
+            background-color: blue;
 
+            /* 开启 BFC */
 
+            overflow: hidden;
 
+        }
 
+        /* 内部元素的margin-top 超出父元素范围。（外边距溢出） */
 
+        .box2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            margin-top: 100px;
 
+            /* margin-left: 100px; */
 
+        }
 
+
 
+        .box3,.box4{
 
+            width: 400px;
 
+            height: 400px;
 
+        }
 
+
 
+        /* 垂直外边距合并 */
 
+        .box3{
 
+            background-color: red;
 
+            margin-bottom: 50px;
 
+        }
 
+        .box4{
 
+            margin-top: 50px;
 
+            background-color: blue;
 
+        }
 
+        .box5{
 
+            overflow: hidden;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- <div class="box">
 
+        <div class="box2"></div>
 
+    </div> -->
 
+    <div class="box5">
 
+        <div class="box3"></div>
 
+    </div>
 
+    <div class="box4"></div>
 
+
 
+    
+</body>
 
+</html>

+ 25 - 0
2-CSS/27_inlieblock.html
查看文件 

@@ -0,0 +1,25 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        span{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            display: inline-block;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 行块元素 既有行元素特性（在同一行展示） 又有块元素特性（可以设置高宽） -->
 
+    <!-- display:inline-block -->
 
+    <!-- <img src="./image/logo.png" alt="">
 
+    <img src="./image/logo.png" alt=""> -->
 
+
 
+    <span class="box1"></span>
 
+    <span class="box2"></span>
 
+</body>
 
+</html>