docs: docker

wang1xiang · May 6, 2024 · 29dbfe2 · 29dbfe2
1 parent 82b94c0
commit 29dbfe2
Show file tree

Hide file tree

Showing 55 changed files with 1,360 additions and 116 deletions.
diff --git a/.vitepress/build/index.js b/.vitepress/build/index.js
@@ -1 +1 @@
-export const base = "";
+export const base = "/blog";
diff --git a/.vitepress/config.js b/.vitepress/config.js
@@ -1,5 +1,5 @@
 const getPages = require("./utils/pages");
-const env = "";
+const env = "/blog";
 
 async function getConfig() {
   let config = {

diff --git a/docs/css/grid.md b/docs/css/grid.md
@@ -5,21 +5,27 @@ tags:
   - css
 describe: grid学习笔记及demo演示
 ---
-  
+
 ## 概述
 
-Grid布局是目前最强大的布局工具，将网页划分为一个个网格，可以任意组合，达到各种布局效果
+Grid 布局是目前最强大的布局工具，将网页划分为一个个网格，可以任意组合，达到各种布局效果
+
+与 Flex 布局区别：Flex 是一维布局，只能在设置的轴线上进行布局；而 Grid 是二维布局，将容器划给为行和列，产生单元格
+
+使用网格布局，兄弟节点可以被指定布局到网格的某个位置。
+所以，网格布局相对流布局 Flex 布局更加的灵活，当然学习和使用也更加复杂。这篇文章会把网格布局中的概念和属性整理出来。
+下图就是展示了一维布局和二维布局的不同。可以看出，如果布局复杂，一维布局需要增加节点来解决；而二维布局，则不需要，这也是网格布局强大而复杂的原因。
 
-与Flex布局区别：Flex是一维布局，只能在设置的轴线上进行布局；而Grid是二维布局，将容器划给为行和列，产生单元格
+![grid-png](./images/grid-png.png)
 
 ### 名词解释
 
-1. 容器container：设置`display: grid`的元素称为容器
-2. 项目item：内部的子元素称为项目
-3. 行row：容器中的水平区域
-4. 列column：容器中的垂直区域
-5. 单元格cell：行和列的交叉点，n行m列将产生n * m个单元格
-6. 网格线grid line：划分网格的线，n行有n + 1根水平网格线，m列有m + 1根垂直网格线
+1. 容器 container：设置`display: grid`的元素称为容器
+2. 项目 item：内部的子元素称为项目
+3. 行 row：容器中的水平区域
+4. 列 column：容器中的垂直区域
+5. 单元格 cell：行和列的交叉点，n 行 m 列将产生 n \* m 个单元格
+6. 网格线 grid line：划分网格的线，n 行有 n + 1 根水平网格线，m 列有 m + 1 根垂直网格线
 
 #### 属性
 
@@ -30,9 +36,10 @@ Grid布局是目前最强大的布局工具，将网页划分为一个个网格
 1. display
 
    通过设置`display: grid`或`display: inline-grid`生成一个网格容器
+
 2. grid-template-rows/grid-template-columns
 
-   划分行和列，既可以用绝对宽度也可以用百分比，下面代码将div划分为200px3行 33%高度的容器
+   划分行和列，既可以用绝对宽度也可以用百分比，下面代码将 div 划分为 200px3 行 33%高度的容器
 
    ```css
    .container {
@@ -42,7 +49,7 @@ Grid布局是目前最强大的布局工具，将网页划分为一个个网格
    }
    ```
 
-   - 可以使用repeat简化代码
+   - 可以使用 repeat 简化代码
 
      ```css
      .container {
@@ -52,7 +59,7 @@ Grid布局是目前最强大的布局工具，将网页划分为一个个网格
      }
      ```
 
-   - auto-fill属性，当单元格大小固定，容器大小不固定时，希望每行/每列容纳尽可能多的单元格，使用auto-fill属性自动填充
+   - auto-fill 属性，当单元格大小固定，容器大小不固定时，希望每行/每列容纳尽可能多的单元格，使用 auto-fill 属性自动填充
 
      ```css
      .container {
@@ -61,14 +68,14 @@ Grid布局是目前最强大的布局工具，将网页划分为一个个网格
      }
      ```
 
-   - fr比例：方便表示比例关系，如列宽1fr 2fr就代表后者是前者的两倍
+   - fr 比例：方便表示比例关系，如列宽 1fr 2fr 就代表后者是前者的两倍
 
      ```css
      .container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        /* 可以与绝对长度结合 */
-       grid-template-columns:  150px 1fr 2fr;
+       grid-template-columns: 150px 1fr 2fr;
        /* 传统的栅格布局可以使用fr轻松实现  */
        grid-template-columns: repeat(12, 1fr);
      }
@@ -84,7 +91,7 @@ Grid布局是目前最强大的布局工具，将网页划分为一个个网格
      }
      ```
 
-   - auto由浏览器自动决定长度
+   - auto 由浏览器自动决定长度
 
      ```css
      .container {
@@ -112,14 +119,13 @@ Grid布局是目前最强大的布局工具，将网页划分为一个个网格
    用于定义区域
 
    ```css
-
    .container {
      display: grid;
-     grid-template-areas: "header header header"
-                        "main main sidebar"
-                        "footer footer footer";
+     grid-template-areas:
+       'header header header'
+       'main main sidebar'
+       'footer footer footer';
    }
-
    ```
 
 5. grid-auto-flow
@@ -129,8 +135,8 @@ Grid布局是目前最强大的布局工具，将网页划分为一个个网格
    ```javascript
    // 先行后列渲染结果如下所示
    1 2 3
-   4 5 6  
-   7 8 9 
+   4 5 6
+   7 8 9
    // 先列后行渲染结果如下所示
    1 4 7
    2 5 8
@@ -139,7 +145,7 @@ Grid布局是目前最强大的布局工具，将网页划分为一个个网格
 
 6. justify-items/align-items、place-items
 
-   justify-items/align-items用于设置单元格内容的水平位置
+   justify-items/align-items 用于设置单元格内容的水平位置
 
    ```css
    .container {
@@ -159,7 +165,7 @@ Grid布局是目前最强大的布局工具，将网页划分为一个个网格
    .container {
      display: grid;
      justify-content: center;
-     align-content: center;  
+     align-content: center;
      /* 相当于 */
      place-content: center center;
    }
@@ -189,97 +195,95 @@ Grid布局是目前最强大的布局工具，将网页划分为一个个网格
 
 2. justify-self/align-self
 
-   设置单元格内容的水平/垂直位置，跟justify-items/align-items属性的用法完全一致，但只作用于单个项目
+   设置单元格内容的水平/垂直位置，跟 justify-items/align-items 属性的用法完全一致，但只作用于单个项目
 
 ```html
 <!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>
-    .container {
-      margin: 60px;
-      display: grid;
-      grid-template-rows:repeat(3, 200px);
-      grid-template-columns: repeat(3, 200px); 
-      /* 列宽度确定 自动布局 */
-      /* grid-template-columns: repeat(auto-fill, 200px); */
-      /* 行高 1 150 2 300 3 450 */
-      /* grid-template-rows: 180px 1fr 2fr; */
-      grid-gap: 20px;
-      justify-items: start;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .item {
-      text-align: center;
-      font-size: 200%;
-      color: #fff;
-      width: 80%;
-      height: 80%;
-    }
-
-    .one {
-      background-color: #b8e8e0;
-      justify-self: center;
-      align-self: center;
-      grid-column-start: 1;
-      grid-column-end: 3;
-      grid-row-start: 2;
-      grid-row-end: 4;
-    }
-
-    .two {
-      background-color: #8CC7B5;
-    }
-
-    .three {
-      background-color: #efe3bf;
-    }
-
-    .four {
-      background-color: #BEE7E9;
-    }
-
-    .five {
-      background-color: #E6CEAC;
-    }
-
-    .six {
-      background-color: #e7d7d9;
-    }
-    .seven {
-      background-color: #aa53975c;
-    }
-    .eight {
-      background-color: #bde6b8;
-    }
-    .nine {
-      background-color: #e6c1b8;
-    }
-  </style>
-</head>
-
-<body>
-  <div class="container">
-    <div class="one item">1</div>
-    <div class="two item">2</div>
-    <div class="three item">3</div>
-    <div class="four item">4</div>
-    <div class="five item">5</div>
-    <div class="six item">6</div>
-    <div class="seven item">7</div>
-    <div class="eight item">8</div>
-    <div class="nine item">9</div>
-  </div>
-</body>
-
-</html> 
+  <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>
+      .container {
+        margin: 60px;
+        display: grid;
+        grid-template-rows: repeat(3, 200px);
+        grid-template-columns: repeat(3, 200px);
+        /* 列宽度确定 自动布局 */
+        /* grid-template-columns: repeat(auto-fill, 200px); */
+        /* 行高 1 150 2 300 3 450 */
+        /* grid-template-rows: 180px 1fr 2fr; */
+        grid-gap: 20px;
+        justify-items: start;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .item {
+        text-align: center;
+        font-size: 200%;
+        color: #fff;
+        width: 80%;
+        height: 80%;
+      }
+
+      .one {
+        background-color: #b8e8e0;
+        justify-self: center;
+        align-self: center;
+        grid-column-start: 1;
+        grid-column-end: 3;
+        grid-row-start: 2;
+        grid-row-end: 4;
+      }
+
+      .two {
+        background-color: #8cc7b5;
+      }
+
+      .three {
+        background-color: #efe3bf;
+      }
+
+      .four {
+        background-color: #bee7e9;
+      }
+
+      .five {
+        background-color: #e6ceac;
+      }
+
+      .six {
+        background-color: #e7d7d9;
+      }
+      .seven {
+        background-color: #aa53975c;
+      }
+      .eight {
+        background-color: #bde6b8;
+      }
+      .nine {
+        background-color: #e6c1b8;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="one item">1</div>
+      <div class="two item">2</div>
+      <div class="three item">3</div>
+      <div class="four item">4</div>
+      <div class="five item">5</div>
+      <div class="six item">6</div>
+      <div class="seven item">7</div>
+      <div class="eight item">8</div>
+      <div class="nine item">9</div>
+    </div>
+  </body>
+</html>
 ```
 
-![grid](./images/grid.jpg)
+![grid](./images/grid.jpg)
diff --git a/docs/css/images/grid-png.png b/docs/css/images/grid-png.png
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const base = "";
		export const base = "/blog";