Deploying to gh-pages from @ ZiuChen/ZiuChen.github.io@1a95b238cb 🚀

2025-12-18 17:04:16 +08:00 · 2023-03-16 09:30:23 +00:00
parent 5012d93d3e
commit 8af2541c08
104 changed files with 190 additions and 190 deletions
--- a/note/CSS.html
+++ b/note/CSS.html
@@ -8,7 +8,7 @@
    <link rel="preload stylesheet" href="/assets/style.60c127af.css" as="style">
    <link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.13f0127a.js">
    <link rel="modulepreload" href="/assets/app.696c3ff6.js">
-    <link rel="modulepreload" href="/assets/note_CSS.md.d34d091d.lean.js">
+    <link rel="modulepreload" href="/assets/note_CSS.md.b48c54d6.lean.js">
    
    <link rel="icon" href="/logo.png">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
@@ -104,7 +104,7 @@
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">  2</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> = 8</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>这样最终的样式就成为了：$2^3=8$</p><blockquote><p>绝对定位是相对于最近的一个定位元素</p></blockquote><h4 id="fixed-固定定位" tabindex="-1">fixed 固定定位 <a class="header-anchor" href="#fixed-固定定位" aria-hidden="true">#</a></h4><ul><li><p>元素脱离normal flow</p></li><li><p>可以通过<code>left</code> <code>right</code> <code>top</code> <code>bottom</code>进行定位</p></li><li><p>定位的参照对象是视口（viewpoint）</p></li><li><p>当画布滚动时，固定不动</p></li><li><p>视口（ViewPort）：文档的可视区域</p></li><li><p>画布（Canvas）：渲染文档的区域 文档内容超出视口范围 则可以滚动查看</p></li><li><p>画布 &gt;= 视口</p></li></ul><h4 id="absolute-绝对定位" tabindex="-1">absolute 绝对定位 <a class="header-anchor" href="#absolute-绝对定位" aria-hidden="true">#</a></h4><ul><li>元素脱离 normal flow</li><li>可以通过<code>left</code> <code>right</code> <code>top</code> <code>bottom</code>定位 <ul><li>定位参照对象是<strong>最邻近的定位祖先元素</strong><ul><li>定位元素：<code>position</code>值不为<code>static</code>的元素，即：<code>relative</code> <code>absolute</code> <code>fixed</code></li></ul></li><li>如果找不到这样的祖先元素 参照对象是视口</li></ul></li></ul><p><code>position: absolute;</code>一般与<code>position: relative;</code>共同使用，让父元素变成定位元素的同时不脱离标准流，还能让其中的子元素实现在父元素内的绝对定位。</p><h4 id="sticky-粘性定位" tabindex="-1">sticky 粘性定位 <a class="header-anchor" href="#sticky-粘性定位" aria-hidden="true">#</a></h4><ul><li>可以看做是<strong>相对定位和固定(绝对)定位的结合体</strong></li><li>它允许被定为的元素表现得像相对定位一样，直到它滚动到某个阈值点</li><li>当达到这个阈值点时，就会变成固定(绝对)定位</li></ul><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">nav-bar</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>这样最终的样式就成为了：$2^3=8$</p><blockquote><p>绝对定位是相对于最近的一个定位元素</p></blockquote><h4 id="fixed-固定定位" tabindex="-1">fixed 固定定位 <a class="header-anchor" href="#fixed-固定定位" aria-hidden="true">#</a></h4><ul><li>元素脱离normal flow</li><li>可以通过<code>left</code> <code>right</code> <code>top</code> <code>bottom</code>进行定位</li><li>定位的参照对象是视口（viewpoint）</li><li>当画布滚动时，固定不动</li></ul><p><strong>当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。</strong></p><ul><li>视口（ViewPort）：文档的可视区域</li><li>画布（Canvas）：渲染文档的区域 文档内容超出视口范围 则可以滚动查看</li><li>画布 &gt;= 视口</li></ul><h4 id="absolute-绝对定位" tabindex="-1">absolute 绝对定位 <a class="header-anchor" href="#absolute-绝对定位" aria-hidden="true">#</a></h4><ul><li>元素脱离 normal flow</li><li>可以通过<code>left</code> <code>right</code> <code>top</code> <code>bottom</code>定位 <ul><li>定位参照对象是<strong>最邻近的定位祖先元素</strong><ul><li>定位元素：<code>position</code>值不为<code>static</code>的元素，即：<code>relative</code> <code>absolute</code> <code>fixed</code></li></ul></li><li>如果找不到这样的祖先元素 参照对象是视口</li></ul></li></ul><p><code>position: absolute;</code>一般与<code>position: relative;</code>共同使用，让父元素变成定位元素的同时不脱离标准流，还能让其中的子元素实现在父元素内的绝对定位。</p><h4 id="sticky-粘性定位" tabindex="-1">sticky 粘性定位 <a class="header-anchor" href="#sticky-粘性定位" aria-hidden="true">#</a></h4><ul><li>可以看做是<strong>相对定位和固定(绝对)定位的结合体</strong></li><li>它允许被定为的元素表现得像相对定位一样，直到它滚动到某个阈值点</li><li>当达到这个阈值点时，就会变成固定(绝对)定位</li></ul><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">nav-bar</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> sticky</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* 滚动出scrollport后元素固定的位置 */</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span>
@@ -492,8 +492,8 @@
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> el </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.item</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
 <span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dataset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">age) </span><span style="color:#676E95;font-style:italic;">// 18</span></span>
 <span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dataset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name) </span><span style="color:#676E95;font-style:italic;">// &#39;ziu&#39;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><!----><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-03-08T06:05:01.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><a class="pager-link prev" href="/note/JavaScript.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Previous page</span><span class="title" data-v-cc0f9778>JavaScript基础</span></a></div><div class="has-prev pager" data-v-cc0f9778><a class="pager-link next" href="/note/JavaScriptEnhanced.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>JavaScript进阶</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"c7b1dee7\",\"article_【字节跳动】前端面试题总结.md\":\"9e74b480\",\"article_【快手】深入理解前端面试题.md\":\"88104d20\",\"article_【用友金融】前端面试题总结.md\":\"8dc0990c\",\"article_一文读懂事件冒泡与事件捕获.md\":\"155f5eaf\",\"article_一文读懂伪类与伪元素.md\":\"b3c4c857\",\"article_一文读懂函数中this指向问题.md\":\"1848baef\",\"article_从0实现一个年度报告.md\":\"5e80f506\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"f521ae1a\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"c7ae1acc\",\"article_深入javascript数据类型.md\":\"52dbf94b\",\"article_深入理解浏览器缓存机制.md\":\"a4c576ba\",\"article_深入理解浏览器运行原理.md\":\"6f0ca816\",\"index.md\":\"0a37fabb\",\"note_javascript.md\":\"3d25b392\",\"note_ssr.md\":\"32c5270f\",\"project_clipboardmanager_guide_index.md\":\"2ba62186\",\"project_clipboardmanager_index.md\":\"52edfd88\",\"project_clipboardmanager_log_index.md\":\"0ef49615\",\"project_clipboardmanager_statement_index.md\":\"3ce04cff\",\"project_clipboardmanager_vip_index.md\":\"867d92a6\",\"project_markdown_index.md\":\"1bd19432\",\"project_markdown_shortcut_index.md\":\"ddcbe034\",\"project_smartwordbreak_log_index.md\":\"58992cd8\",\"project_smartwordbreak_statement_index.md\":\"7e2e799d\",\"self_index.md\":\"c479ec60\",\"works_contribution.md\":\"f47bebce\",\"works_opensource.md\":\"5f5850aa\",\"project_smartwordbreak_index.md\":\"b9c9e8e7\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"72b8b061\",\"note_front-end engineering.md\":\"34c146a3\",\"article_深入理解proxy与reflect.md\":\"a0a84d60\",\"note_css.md\":\"d34d091d\",\"note_javascriptenhanced.md\":\"f23abf78\"}")</script>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><!----><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-03-16T09:25:06.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><a class="pager-link prev" href="/note/JavaScript.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Previous page</span><span class="title" data-v-cc0f9778>JavaScript基础</span></a></div><div class="has-prev pager" data-v-cc0f9778><a class="pager-link next" href="/note/JavaScriptEnhanced.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>JavaScript进阶</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"81eed0e8\",\"article_【字节跳动】前端面试题总结.md\":\"4c254cba\",\"article_【快手】深入理解前端面试题.md\":\"c0bb428c\",\"article_【用友金融】前端面试题总结.md\":\"acab9906\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"a7c4a40a\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"10ab4cc7\",\"note_ssr.md\":\"6955670b\",\"project_clipboardmanager_log_index.md\":\"eaae547f\",\"project_clipboardmanager_statement_index.md\":\"81c8e597\",\"project_clipboardmanager_index.md\":\"4f5cad9e\",\"project_markdown_shortcut_index.md\":\"0967f0ac\",\"project_clipboardmanager_vip_index.md\":\"fe502553\",\"article_深入javascript数据类型.md\":\"4e8599bd\",\"article_一文读懂伪类与伪元素.md\":\"63deb150\",\"article_从0实现一个年度报告.md\":\"4b7bd312\",\"project_markdown_index.md\":\"6fa2d8f3\",\"article_一文读懂事件冒泡与事件捕获.md\":\"c1f2ebf0\",\"article_深入理解浏览器运行原理.md\":\"f5fed61c\",\"article_深入理解浏览器缓存机制.md\":\"c5fe24b3\",\"index.md\":\"3b6b3be8\",\"note_javascript.md\":\"97d4402e\",\"project_smartwordbreak_index.md\":\"f8b2cc6d\",\"article_深入理解proxy与reflect.md\":\"b2a44759\",\"works_opensource.md\":\"3e577f95\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"fb57aeab\",\"self_index.md\":\"a4f05b5d\",\"works_contribution.md\":\"cedbeab1\",\"project_smartwordbreak_statement_index.md\":\"94d6086c\",\"project_smartwordbreak_log_index.md\":\"e65732c4\",\"article_一文读懂函数中this指向问题.md\":\"3be17e6c\",\"project_clipboardmanager_guide_index.md\":\"f7a35fdd\",\"note_front-end engineering.md\":\"abc8dbdf\",\"note_css.md\":\"b48c54d6\",\"note_javascriptenhanced.md\":\"51601894\"}")</script>
    <script type="module" async src="/assets/app.696c3ff6.js"></script>
    
  </body>