Deploying to gh-pages from @ 7d916d8 🚀

articles/css/aspect-ratio.html

@@ -10,7 +10,7 @@
     <link rel="preload" href="/blog/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
   <link rel="modulepreload" href="/blog/assets/chunks/framework.62e38f8b.js">
   <link rel="modulepreload" href="/blog/assets/chunks/theme.36c84da2.js">
-  <link rel="modulepreload" href="/blog/assets/articles_css_aspect-ratio.md.7b1c6164.lean.js">
+  <link rel="modulepreload" href="/blog/assets/articles_css_aspect-ratio.md.6e2f892d.lean.js">
   <link rel="icon" href="/blog/startup.ico" type="image/x-icon" size="32x32">
   <link rel="apple-touch-icon" href="/blog/startup.ico" size="32x32">
   <meta name="keywords" content="技术博客,Dai的技术博客,前端博客,JavaScript博客,CSS博客,TypeScript博客">
@@ -30,8 +30,8 @@
 <span class="line"><span style="color:#A6ACCD;">    aspect-ratio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.5</span><span style="color:#A6ACCD;">； </span><span style="color:#676E95;font-style:italic;">/* 1.5 = 1.5 / 1 */</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>现在 就很容易求得 <code>height = 300 / 1.5 / 1</code>, height 的实际渲染高度为 <code>200px</code>.</p><p>如果 div 的宽高都不设置</p><div class="language-css"><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:#FFCB6B;">div</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    aspect-ratio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.5</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>div 由于默认是块级容器，块级容器的一大特性就是宽度默认是父级容器的宽度， 具有流的特性。 假如在一个 1680 宽的屏幕。</p><p>则渲染出来的高 <code>1680 / x = 1.5 / 1, x = 1680 / 1.5 = 1120px</code>。</p><p>以上就是 <code>aspect-ratio</code> 的计算规则。</p><p><code>aspect-ratio</code> 可以使得自动去计算容器的尺寸。需要注意的是如果同时对容器设置 <code>width</code> 和 <code>height</code> 则该属性设置无效，只有当设置其中一个才会生效。</p></div></div></main><footer class="VPDocFooter" data-v-c4b0d3cf data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-7b3ebfe1>最近一次更新于: <time datetime="2023-05-29T06:07:29.000Z" data-v-7b3ebfe1></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><!----></div><div class="pager" data-v-face870a><a class="pager-link next" href="/blog/articles/css/font-family.html" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>font-family 容易忽略的细节</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"articles_css_aspect-ratio.md\":\"7b1c6164\",\"articles_css_index.md\":\"c276382a\",\"articles_css_unit-keywords.md\":\"2950c77b\",\"articles_css_font-family.md\":\"d94b42ba\",\"articles_javascript_weakmap_weakset.md\":\"0469306d\",\"articles_javascript_intl.datetimeformat.md\":\"a226de9c\",\"articles_css_new_pseudo_selector.md\":\"0edf5e91\",\"articles_algorithm_index.md\":\"4c85d105\",\"articles_css_gradient.md\":\"4ae86230\",\"articles_git_index.md\":\"57404cfb\",\"articles_css_grid-layout.md\":\"6fbf0c8b\",\"articles_javascript_knowaboutvueloader.md\":\"ab37329d\",\"articles_typescript_typescript-env.md\":\"b60ed507\",\"articles_vue_refvsshallowref.md\":\"552d3a98\",\"content_regex_base-knowledge.md\":\"f395d5a8\",\"content_regex_index.md\":\"2dcfa1c7\",\"content_regex_tryuseregxp.md\":\"88a3d2f9\",\"content_resource-optimize_usedeferandasync.md\":\"b9339482\",\"content_vue-router4-doc_index.md\":\"e898fef6\",\"content_vue-router4-doc_two.md\":\"0e297687\",\"follow_index.md\":\"b292d4af\",\"index.md\":\"e015f211\",\"life_index.md\":\"e582bde3\",\"life_2022-12-31.md\":\"66cd2d05\",\"articles_javascript_eslint.md\":\"2fc0aa52\",\"articles_javascript_event-loop.md\":\"f9deb58e\",\"articles_javascript_event-loopv2.md\":\"62335416\",\"articles_javascript_index.md\":\"accef6e6\",\"articles_javascript_memory-discover.md\":\"a524f5dc\",\"articles_javascript_metapropertyaboutsymbol.md\":\"5a199b58\",\"articles_javascript_module-system.md\":\"69e944b2\",\"articles_javascript_prototype.md\":\"5f9c7891\",\"articles_javascript_pub-sub.model.md\":\"e92af0dc\",\"articles_javascript_reactive.md\":\"c29d88ae\",\"articles_javascript_set-cookie.md\":\"9448d2b6\",\"articles_nuxt_index.md\":\"80f8688c\",\"articles_nuxt_nuxt-guide.md\":\"82eb47fd\",\"articles_javascript_time-slice.md\":\"e71c3ce8\",\"content_guide_readme.md\":\"999b974d\",\"articles_typescript_typescript-changelog.md\":\"5bb6715a\",\"articles_typescript_declare.md\":\"7fea173a\",\"articles_typescript_implement-utility-type.md\":\"57c1b210\",\"articles_typescript_index.md\":\"23713d40\",\"articles_typescript_three-triple-line.md\":\"63784029\",\"articles_typescript_tsconfig.md\":\"9c8bd567\",\"articles_javascript_requestanimationframe.md\":\"636e36cd\",\"articles_math_index.md\":\"5d3a7bb6\",\"articles_typescript_type-narrow.md\":\"6feec0c5\",\"articles_javascript_web-worker.md\":\"64e06075\",\"content_guide_broswer-doc_index.md\":\"4b5d67ca\",\"content_guide_engineering_index.md\":\"ea7d9aed\",\"content_guide_css-doc_index.md\":\"1f237ca7\",\"content_guide_ts-doc_readme.md\":\"920bb43a\",\"content_guide_algorithms_readm.md\":\"1a768dde\",\"content_guide_weixin-doc_readme.md\":\"2f15a08a\",\"articles_vue_transition.md\":\"40234f41\",\"content_guide_vue-types_readme.md\":\"04938931\",\"content_guide_tools-docs_pkgs.md\":\"080a6ac7\",\"content_guide_gd-map_readme.md\":\"dbbbab9a\",\"business-doc_index.md\":\"2e11c8fc\"}")
+<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>div 由于默认是块级容器，块级容器的一大特性就是宽度默认是父级容器的宽度， 具有流的特性。 假如在一个 1680 宽的屏幕。</p><p>则渲染出来的高 <code>1680 / x = 1.5 / 1, x = 1680 / 1.5 = 1120px</code>。</p><p>以上就是 <code>aspect-ratio</code> 的计算规则。</p><p><code>aspect-ratio</code> 可以使得自动去计算容器的尺寸。需要注意的是如果同时对容器设置 <code>width</code> 和 <code>height</code> 则该属性设置无效，只有当设置其中一个才会生效。</p></div></div></main><footer class="VPDocFooter" data-v-c4b0d3cf data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-7b3ebfe1>最近一次更新于: <time datetime="2023-05-29T06:10:04.000Z" data-v-7b3ebfe1></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><!----></div><div class="pager" data-v-face870a><a class="pager-link next" href="/blog/articles/css/font-family.html" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>font-family 容易忽略的细节</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"articles_algorithm_index.md\":\"f2209118\",\"articles_css_aspect-ratio.md\":\"6e2f892d\",\"articles_css_new_pseudo_selector.md\":\"0b15ab54\",\"articles_css_index.md\":\"ea3dcfe2\",\"articles_css_grid-layout.md\":\"081bc4bc\",\"articles_css_gradient.md\":\"3c91b841\",\"content_guide_tools-docs_pkgs.md\":\"d4a4d673\",\"articles_css_unit-keywords.md\":\"3f0ea29c\",\"articles_git_index.md\":\"18a4aee6\",\"articles_javascript_event-loopv2.md\":\"251fc700\",\"articles_javascript_index.md\":\"cf03cf1f\",\"articles_css_font-family.md\":\"980ec50f\",\"articles_javascript_metapropertyaboutsymbol.md\":\"e0fc52b1\",\"articles_javascript_module-system.md\":\"53030a88\",\"articles_javascript_weakmap_weakset.md\":\"a90e75cc\",\"articles_javascript_prototype.md\":\"4b19cedb\",\"articles_javascript_knowaboutvueloader.md\":\"69779f59\",\"articles_javascript_eslint.md\":\"0748e2ad\",\"articles_javascript_intl.datetimeformat.md\":\"cee4b969\",\"content_guide_gd-map_readme.md\":\"dd60d6f6\",\"articles_typescript_three-triple-line.md\":\"c2ed3d5b\",\"articles_typescript_tsconfig.md\":\"4ca0adfd\",\"articles_typescript_type-narrow.md\":\"b9d77687\",\"articles_typescript_typescript-changelog.md\":\"3f6a4cc9\",\"articles_vue_refvsshallowref.md\":\"262ae190\",\"content_guide_broswer-doc_index.md\":\"b4cfa862\",\"business-doc_index.md\":\"15c86091\",\"articles_vue_transition.md\":\"ca487ea6\",\"articles_javascript_pub-sub.model.md\":\"dc20719d\",\"articles_typescript_typescript-env.md\":\"c09cca98\",\"articles_javascript_time-slice.md\":\"292b3162\",\"articles_javascript_web-worker.md\":\"75bee8dc\",\"articles_math_index.md\":\"767d894b\",\"articles_typescript_index.md\":\"2e7f2d0c\",\"articles_typescript_implement-utility-type.md\":\"a3855ba2\",\"articles_nuxt_nuxt-guide.md\":\"b34cfb33\",\"content_guide_readme.md\":\"fb7efb0b\",\"articles_typescript_declare.md\":\"e964ba4b\",\"articles_javascript_memory-discover.md\":\"580eb8e0\",\"content_guide_algorithms_readm.md\":\"7e300ab6\",\"articles_javascript_reactive.md\":\"0e94b1b6\",\"articles_nuxt_index.md\":\"e0c5171c\",\"articles_javascript_requestanimationframe.md\":\"c93a0840\",\"content_guide_css-doc_index.md\":\"d3270e70\",\"articles_javascript_event-loop.md\":\"192d4f4a\",\"content_regex_index.md\":\"35169ffc\",\"content_guide_weixin-doc_readme.md\":\"a93292bd\",\"content_regex_base-knowledge.md\":\"74aeb420\",\"content_vue-router4-doc_index.md\":\"13e5371d\",\"content_regex_tryuseregxp.md\":\"d91a4707\",\"content_resource-optimize_usedeferandasync.md\":\"5c5011ee\",\"index.md\":\"7b61d880\",\"content_guide_ts-doc_readme.md\":\"4e463482\",\"follow_index.md\":\"9dd5838f\",\"articles_javascript_set-cookie.md\":\"5f38bced\",\"content_vue-router4-doc_two.md\":\"c006568d\",\"content_guide_engineering_index.md\":\"0f644a57\",\"content_guide_vue-types_readme.md\":\"e96676da\",\"life_index.md\":\"cc3267a1\",\"life_2022-12-31.md\":\"59f29f1c\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"Wonder Dai的博客\",\"description\":\"一个关于所有我接触到的前端知识记录的网站\",\"base\":\"/blog/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"lastUpdatedText\":\"最近一次更新于\",\"sidebar\":{\"/articles/git/\":[{\"text\":\"Git Category\",\"items\":[{\"text\":\"Git 操作命令\",\"link\":\"/articles/git/\"}]}],\"/articles/javascript\":[{\"text\":\"JavaScript Category\",\"items\":[{\"text\":\"对时间切片的理解\",\"link\":\"/articles/javascript/time-slice\"},{\"text\":\"发布订阅模型\",\"link\":\"/articles/javascript/pub-sub.model\"},{\"text\":\"反复被提及的事件循环\",\"link\":\"/articles/javascript/event-loopV2\"},{\"text\":\"Intl.DateTimeFormat 揭秘\",\"link\":\"/articles/javascript/Intl.DateTimeFormat\"},{\"text\":\"JavaScript 内存管理探秘（译）\",\"link\":\"/articles/javascript/memory-discover\"},{\"text\":\"CMD 和 ESM\",\"link\":\"/articles/javascript/module-system\"},{\"text\":\"性能利器 - Web-Worker\",\"link\":\"/articles/javascript/web-worker\"},{\"text\":\"Symbol 元属性\",\"link\":\"/articles/javascript/metaPropertyAboutSymbol\"},{\"text\":\"eslint 配置指南\",\"link\":\"/articles/javascript/eslint\"}]}],\"/articles/typescript\":[{\"text\":\"TypeScript Category\",\"items\":[{\"text\":\"搭建 typescript 开发环境\",\"link\":\"/articles/typescript/typescript-env\"},{\"text\":\"declare 关键字\",\"link\":\"/articles/typescript/declare\"},{\"text\":\"TS 内置的功能类型\",\"link\":\"/articles/typescript/implement-utility-type\"},{\"text\":\"使用三斜线指令\",\"link\":\"/articles/typescript/three-triple-line\"},{\"text\":\"如何配置 tsconfig.json\",\"link\":\"/articles/typescript/tsconfig\"},{\"text\":\"Typescript 更新日志\",\"link\":\"/articles/typescript/typescript-changelog\"},{\"text\":\"重新认识 TypeScript\",\"link\":\"/articles/typescript/type-narrow\"}]}],\"/articles/css\":[{\"text\":\"CSS Category\",\"items\":[{\"text\":\"巧用 aspect-ratio 设置宽高比\",\"link\":\"/articles/css/aspect-ratio\"},{\"text\":\"font-family 容易忽略的细节\",\"link\":\"/articles/css/font-family\"},{\"text\":\"CSS3 新尺寸关键字\",\"link\":\"/articles/css/unit-keywords\"},{\"text\":\"CSS3 新伪类选择器\",\"link\":\"/articles/css/new_pseudo_selector\"},{\"text\":\"CSS3 渐变\",\"link\":\"/articles/css/gradient\"}]}],\"/articles/vue\":[{\"text\":\"Vue Category\",\"items\":[{\"text\":\"深入了解 Transition\",\"link\":\"/articles/vue/transition\"},{\"text\":\"ref vs shallowRef\",\"link\":\"/articles/vue/refVsShallowRef\"}]}],\"/articles/math\":[{\"text\":\"Math Category\",\"items\":[{\"text\":\"数学公式\",\"link\":\"/articles/math/formula\"}]}],\"/life/\":[{\"text\":\"My Life\",\"link\":\"/life/\"},{\"text\":\"2022-12-31\",\"link\":\"/life/2022-12-31\"}]},\"nav\":[{\"text\":\"🎯技术文章\",\"items\":[{\"text\":\"JavaScript\",\"link\":\"/articles/javascript/time-slice\"},{\"text\":\"TypeScript\",\"link\":\"/articles/typescript/\"},{\"text\":\"CSS\",\"link\":\"/articles/css/aspect-ratio\"},{\"text\":\"Vue\",\"link\":\"/articles/vue/transition\"},{\"text\":\"前端算法\",\"link\":\"/articles/algorithm\"},{\"text\":\"git常见操作\",\"link\":\"/articles/git/\"},{\"text\":\"小程序踩过的坑\",\"link\":\"/articles/mini-program\"},{\"text\":\"数学\",\"link\":\"/articles/math/\"}]},{\"text\":\"生活\",\"link\":\"/life/\"},{\"text\":\"follow\",\"link\":\"/follow/\"},{\"text\":\"关于我\",\"link\":\"/about/\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/daiwanxing\"},{\"icon\":\"twitter\",\"link\":\"https://twitter.com/OcovqgH046VC8u2\"}],\"algolia\":{\"apiKey\":\"ae81d80179c619f04fa6af80a06fbb47\",\"appId\":\"RTKFWXT5ZN\",\"indexName\":\"daiwanxingio\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
 
   </body>