website: adjust the layout. f60826e6da

This commit is contained in:
jaywcjlove
2022-10-31 08:38:59 +00:00
parent c71af37115
commit 2f6a6cca1c
41 changed files with 473 additions and 470 deletions

View File

@ -188,13 +188,13 @@
</span><span class="code-line"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>#FFFFFF <span class="token operator">/</span> 16<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token comment">// 结果是 #101010</span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="calc-特例"><a aria-hidden="true" tabindex="-1" href="#calc-特例"><span class="icon icon-link"></span></a>calc() 特例</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><h4 id="calc-特例"><a aria-hidden="true" tabindex="-1" href="#calc-特例"><span class="icon icon-link"></span></a>calc() 特例</h4>
<p>为了与 <code>CSS</code> 保持兼容,<code>calc()</code> 并不对数学表达式进行计算,但是在嵌套函数中会计算变量和数学公式的值</p>
<pre class="language-less"><code class="language-less code-highlight"><span class="code-line"><span class="token variable">@var<span class="token punctuation">:</span></span> 50vh<span class="token operator">/</span>2<span class="token punctuation">;</span>
</span><span class="code-line"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>50% <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token variable">@var</span> <span class="token operator">-</span> 20px<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token comment">// 结果是 calc(50% + (25vh - 20px))</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="转义escaping"><a aria-hidden="true" tabindex="-1" href="#转义escaping"><span class="icon icon-link"></span></a>转义(Escaping)</h3><div class="wrap-body">
</div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="转义escaping"><a aria-hidden="true" tabindex="-1" href="#转义escaping"><span class="icon icon-link"></span></a>转义(Escaping)</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-less"><code class="language-less code-highlight"><span class="code-line"><span class="token variable">@min768<span class="token punctuation">:</span></span> ~<span class="token string">"(min-width: 768px)"</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token selector">.element</span> <span class="token punctuation">{</span>