Startseite Erkunden Hilfe
Anmelden
lovecoding
/
VIP20
6
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

new

zsydgithub vor 2 Jahren
Ursprung
93b1d1c7f0
Commit
a58493f310
3 geänderte Dateien mit 124 neuen und 0 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 0 0
      7_Css3/4_奥运五环.html
  2. 71 0
      7_Css3/5_弹性盒模型.html
  3. 53 0
      7_Css3/6_弹性盒模型的效果.html

+ 0 - 0
4_奥运五环.html → 7_Css3/4_奥运五环.html
Datei anzeigen


+ 71 - 0
7_Css3/5_弹性盒模型.html
Datei anzeigen 

@@ -0,0 +1,71 @@
 
+<!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>
 
+    #div1{
 
+      height: 500px;
 
+      background: #ccc;
 
+      display: flex;
 
+    }
 
+    #div2{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: #ff0000;
 
+    }
 
+    #div3{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: #000;
 
+      flex: 2;
 
+    }
 
+    #div4{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: blue;
 
+      flex: 1;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+    <div id="div3"></div>
 
+    <div id="div4"></div>
 
+  </div>
 
+  <!-- 
+    弹性盒模型
 
+    display: flex
 
+    wrap 值规定 flex 项目将在必要时进行换行
 
+    nowrap 值规定将不对 flex 项目换行（默认）
 
+    wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行
 
+
 
+    flex-direction 属性
 
+    column 值设置垂直堆叠 flex 项目（从上到下）
 
+    column-reverse 值垂直堆叠 flex 项目（但从下到上）
 
+    row 值水平堆叠 flex 项目（从左到右）
 
+    row-reverse 值水平堆叠 flex 项目（但从右到左）
 
+
 
+
 
+    justify-content: flex-start|flex-end|center|space-between|space-around
 
+    center 值将 flex 项目在容器的中心对齐
 
+    flex-start 值将 flex 项目在容器的开头对齐（默认)
 
+    flex-end 值将 flex 项目在容器的末端对齐
 
+    space-around 值显示行之前、之间和之后带有空格的 flex 项目
 
+    space-between 值显示行之间有空格的 flex 项目
 
+
 
+
 
+    align-items:flex-start|flex-end|center|space-between|space-around
 
+    space-between 值显示的弹性线之间有相等的间距
 
+    space-around 值显示弹性线在其之前、之间和之后带有空格
 
+    stretch 值拉伸弹性线以占据剩余空间（默认）
 
+    center 值在容器中间显示弹性线
 
+    flex-start 值在容器开头显示弹性线
 
+    flex-end 值在容器的末尾显示弹性线
 
+
 
+  -->
 
+</body>
 
+</html>

+ 53 - 0
7_Css3/6_弹性盒模型的效果.html
Datei anzeigen 

@@ -0,0 +1,53 @@
 
+<!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>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    ul{
 
+      list-style: none;
 
+      display: flex;
 
+      flex-wrap: wrap;
 
+    }
 
+    li{
 
+      width: 20%;
 
+      height: 100px;
 
+      background: red;
 
+      border: 1px solid aqua;
 
+      box-sizing: border-box;
 
+    }
 
+    /* 
+    width + padding + border = 元素的实际宽度
 
+    height + padding + border = 元素的实际高度
 
+    box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框
 
+    */
 
+  </style>
 
+</head>
 
+<body>
 
+  <ul>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+  </ul>
 
+</body>
 
+</html>