blog-hexo/public/2023/11/06/clop3jf37000op1z3gwgt8kuc/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    css奇技淫巧
  </title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="Mozzie">
  <link rel="canonical" href="https://mozzie.cn/2023/11/06/clop3jf37000op1z3gwgt8kuc/">
  
  
  <link rel="icon" type="image/svg" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>'>
  
  
<link rel="stylesheet" href="/css/4d4ea9c6.css">

<meta name="generator" content="Hexo 6.3.0"></head>

<body id="app">
  <!-- 响应式布局按钮 -->
  <a class="side-navigation btn-hover btn-hover-bg tip left" data-tip="Expand">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
      <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="4" y="4" width="16" height="16" rx="2"></rect>
        <path d="M9 4v16"></path>
      </g>
    </svg>
  </a>
  <aside>
    <div>
      
<link rel="stylesheet" href="/css/5bfc518f.css">


<div class="home-bar">
  <a href="/" class="tip" data-tip="Home">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
      <path
        d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z"
        fill="currentColor"></path>
    </svg>
    <span>Mozzie</span>
  </a>
  <!-- 切换主题 -->
  <a id="toggle-theme" class="tip left" data-tip="Switch Theme">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
      <path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
      <path d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
      <path
        d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
        fill="currentColor"></path>
      <path
        d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
        fill="currentColor"></path>
      <path d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
      <path d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
      <path
        d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
        fill="currentColor"></path>
      <path
        d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
        fill="currentColor"></path>
      <path d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z" fill="currentColor"></path>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
      <path
        d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200c31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"
        fill="currentColor"></path>
    </svg>

  </a>
</div>


<script src="/js/ae2a0e7b.js"></script>

      <!-- search -->
      
      
<link rel="stylesheet" href="/css/3320a187.css">

<form class="search-group">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
    <g fill="currentColor">
      <path d="M8.5 3a5.5 5.5 0 0 1 4.383 8.823l4.147 4.147a.75.75 0 0 1-.976 1.133l-.084-.073l-4.147-4.147A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8z" fill="currentColor"></path>
    </g>
  </svg>
  <span id="search-input">Search...</span>
  <div class="short-key">
    <kbd class="key-cap"><span>Ctrl K</span></kbd>
  </div>
</form>

<script>
  window.algolia = {
    appId: "5DTW808BZ8",
    SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
  }
  window.search = {
    enable: "true"
  }
</script>


<script src="/js/b9c2be9c.js"></script>

      
      <!-- navigation -->
      
<link rel="stylesheet" href="/css/3efc6cb5.css">


<section class="category-nav scrollbar-obtrusive">
  <ul class="nav-items">
    <li data-path="archives">
      <a href="/archives">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
          <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 7v14"></path>
            <path d="M9 18l3 3l3-3"></path>
            <circle cx="12" cy="5" r="2"></circle>
          </g>
        </svg>
        <div class="ellipsis">Timeline</div>
      </a>
    </li>
    <li data-path="roadmap">
      <a href="/roadmap">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
          <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path>
            <path d="M9 14v-2c0-.59.414-1 1-1h5"></path>
            <path d="M13 9l2 2l-2 2"></path>
          </g>
        </svg>
        <div class="ellipsis">Roadmap</div>
      </a>
    </li>
    <li data-path="resume">
      <a href="/resume">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
          <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
            <path d="M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-5"></path>
            <circle cx="6" cy="14" r="3"></circle>
            <path d="M4.5 17L3 22l3-1.5L9 22l-1.5-5"></path>
          </g>
        </svg>
        <div class="ellipsis">Resume</div>
      </a>
    </li>
  </ul>
  <p>Category</p>
  <ul>
    
    <li class="">
      <a href="/categories/Hexo/">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z"></path><circle cx="11.5" cy="7.5" r="1" fill="currentColor"></circle></g></svg>
        <div class="ellipsis">
          <span>
            Hexo
          </span>
        </div>
      </a>
    </li>
    
    <li class="">
      <a href="/categories/EQ/">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"></path><path d="M8 16h8"></path><path d="M8.322 12.582l7.956.836"></path><path d="M8.787 9.168l7.826 1.664"></path><path d="M10.096 5.764l7.608 2.472"></path></g></svg>
        <div class="ellipsis">
          <span>
            EQ
          </span>
        </div>
      </a>
    </li>
    
    <li class="">
      <a href="/categories/Finance/">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1"></path><path d="M12 6v2m0 8v2"></path></g></svg>
        <div class="ellipsis">
          <span>
            Finance
          </span>
        </div>
      </a>
    </li>
    
    <li class="active">
      <a href="/categories/Front-End/">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4l-2 14.5l-6 2l-6-2L4 4z"></path><path d="M7.5 8h3v8l-2-1"></path><path d="M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5"></path></g></svg>
        <div class="ellipsis">
          <span>
            Front-End
          </span>
        </div>
      </a>
    </li>
    
  </ul>
</section>


<script src="/js/f8b20eb9.js"></script>

      <!-- icp -->
      
      <div class="icp">
        <a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">苏ICP备19008833号-4</a>
      </div>
      
    </div>
  </aside>
  <main>
    
<link rel="stylesheet" href="/css/3d0c4c23.css">


<div class="post-container">
  <div class="content">
    <header>
      
<link rel="stylesheet" href="/css/de5de8fb.css">

<nav class="breadcrumb">
  <a href="/" class="home tip btn-hover right" data-tip="Home">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
      <path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z" fill="currentColor"></path>
    </svg>
  </a>
  
  
  <em>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
      <g fill="none">
        <path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
      </g>
    </svg>
  </em>
  <a href="/categories/Front-End/">
    Front-End
  </a>
  
  
  <em>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
      <g fill="none">
        <path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
      </g>
    </svg>
  </em>
  <span class="ellipsis">
    css奇技淫巧
  </span>
  
</nav>


<script src="/js/31d6cfe0.js"></script>

    </header>
    <main class="scrollbar-obtrusive">
      <div class="article-container">
        <!-- 文章tags -->
        
        <!-- 渲染文章内容 -->
        <article><h1 id="grid-布局"><a href="#grid-布局" class="headerlink" title="grid 布局"></a>grid 布局</h1><blockquote>
<p>flex 布局操纵的是一维、一行&#x2F;一列，grid 布局具备操纵二维的能力</p>
</blockquote>
<p>设为网格布局以后，容器子元素（项目）的<code>float</code>、<code>display: inline-block</code>、<code>display: table-cell</code>、<code>vertical-align</code>和 <code>column-</code>等设置都将失效。</p>
<ul>
<li>grid-template-columns: 定义每一列的列宽</li>
<li>grid-template-rows: 定义每一行的行高</li>
<li>grid-row-gap: 行间距</li>
<li>grid-column-gap: 列间距</li>
<li>grid-gap: 行列间距合并</li>
<li>grid-template-areas: 一个区域由单个或多个单元格组成</li>
<li>grid-auto-flow: 默认值是 row，即”先行后列”,即先填满第一行，再开始放入第二行</li>
<li>justify-items: <code>单元格内容</code>的水平对齐</li>
<li>align-items: <code>单元格内容</code>垂直对齐</li>
<li>place-items: align-items 属性和 justify-items 属性的合并简写形式</li>
<li>justify-content: <code>整个内容区域</code>水平对齐</li>
<li>align-content: <code>整个内容区域</code>垂直对齐</li>
<li>place-content: align-content 属性和 justify-content 属性的合并简写形式</li>
</ul>
<blockquote>
<p>设置的行或者列比较多的时候，可以使用 repeat()这个函数简化重复的值</p>
</blockquote>
<h2 id="repeat"><a href="#repeat" class="headerlink" title="repeat()"></a>repeat()</h2><p>第一个参数是重复的次数，第二个参数是所要重复的值、也可以是某个模式</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* 重复 3个100px的列 */</span>
<span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span> 100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* 重复这种布局2次 */</span>
<span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>2<span class="token punctuation">,</span> 100px 20px 80px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* 自动填充，直到容器放不下为止 */</span>
<span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>auto-fill<span class="token punctuation">,</span> 100px<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="fr"><a href="#fr" class="headerlink" title="fr"></a>fr</h2><p>方便表示比例关系，网格布局提供了 fr 关键字</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h2 id="grid-template-areas"><a href="#grid-template-areas" class="headerlink" title="grid-template-areas"></a>grid-template-areas</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">grid-template-areas</span><span class="token punctuation">:</span>
  <span class="token string">"header header header"</span>
  <span class="token string">"main main sidebar"</span>
  <span class="token string">"footer footer footer"</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="item-定位"><a href="#item-定位" class="headerlink" title="item 定位"></a>item 定位</h2><p><img src="/img/grid_1.png" alt="grid_1"></p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* 1号项目就是从第二根垂直网格线开始第四根结束 */</span>
<span class="token selector">.item1</span> <span class="token punctuation">&#123;</span>
  <span class="token property">grid-column-start</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
  <span class="token property">grid-column-end</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="硬件加速-IE9"><a href="#硬件加速-IE9" class="headerlink" title="硬件加速(IE9+)"></a>硬件加速(IE9+)</h1><blockquote>
<p>移动端开启,吃内存、增加耗电</p>
</blockquote>
<p><code>animation</code>、<code>transform</code>、<code>transition</code>不会自动开启<code>GPU</code>加速，利用<code>transform: translateZ(0)</code> 就可以开启<code>3D变换</code>，出发硬件加速</p>
<p>场景：<code>webKit内核</code>偶尔页面闪烁：<code>transform: translate3d(0, 0, 0);</code></p>
<h1 id="控制台打印-shield-徽章"><a href="#控制台打印-shield-徽章" class="headerlink" title="控制台打印 shield 徽章"></a>控制台打印 shield 徽章</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
  <span class="token string">"%c"</span> <span class="token operator">+</span>
    <span class="token function">eval</span><span class="token punctuation">(</span><span class="token string">"'mozzie.com'"</span><span class="token punctuation">)</span> <span class="token operator">+</span>
    <span class="token string">"%cv"</span> <span class="token operator">+</span>
    <span class="token function">eval</span><span class="token punctuation">(</span><span class="token string">"'2.0.0'"</span><span class="token punctuation">)</span> <span class="token operator">+</span>
    <span class="token string">"%c\r\n"</span> <span class="token operator">+</span>
    <span class="token function">eval</span><span class="token punctuation">(</span><span class="token string">"'了解更多:https://www.mozzie.com'"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token string">"color: #fff; background: #5281FA; font-size: 12px;border-radius:2px 0 0 2px;padding:3px 6px;"</span><span class="token punctuation">,</span>
  <span class="token string">"border-radius:0 2px 2px 0;padding:3px 6px;color:#333;background:#EBEBEB"</span><span class="token punctuation">,</span>
  <span class="token string">"margin-top:10px;"</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="css-判断-input-是否为空"><a href="#css-判断-input-是否为空" class="headerlink" title="css 判断 input 是否为空"></a>css 判断 input 是否为空</h1><p><code>:placeholder-shown</code>：占位符是否显示的伪类，配合 <code>:not()</code> （不是必须，反过来也可以）</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-input<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#demo</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 90%<span class="token punctuation">;</span>
  <span class="token property">max-width</span><span class="token punctuation">:</span> 450px<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#demo-input</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #ffa500<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#demo-input::placeholder</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#demo-input:focus + label,
#demo-input:not(:placeholder-shown) + label</span> <span class="token punctuation">&#123;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#demo-label</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #ffa500<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> all 0.3s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">/*
* Default
*/</span>
<span class="token selector">body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">body div</span> <span class="token punctuation">&#123;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">body div input</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">outline</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="居中"><a href="#居中" class="headerlink" title="居中"></a>居中</h1><h2 id="transform-大法"><a href="#transform-大法" class="headerlink" title="transform 大法"></a>transform 大法</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#wrapper</span> <span class="token punctuation">&#123;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#box</span> <span class="token punctuation">&#123;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="0000-大法"><a href="#0000-大法" class="headerlink" title="0000 大法"></a>0000 大法</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#wrapper</span> <span class="token punctuation">&#123;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#box</span> <span class="token punctuation">&#123;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="如何让-img-垂直居中"><a href="#如何让-img-垂直居中" class="headerlink" title="如何让 img 垂直居中"></a>如何让 img 垂直居中</h2><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>imgWrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxx.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.imgWrapper</span> <span class="token punctuation">&#123;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> table-cell<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="ul-下-li-居中"><a href="#ul-下-li-居中" class="headerlink" title="ul 下 li 居中"></a>ul 下 li 居中</h2><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token comment">&lt;!--外层包个div/section block元素 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clearfix<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div</span><span class="token punctuation">&#123;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center
<span class="token punctuation">&#125;</span>
<span class="token selector">ul</span><span class="token punctuation">&#123;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block
<span class="token punctuation">&#125;</span>
<span class="token selector">li</span><span class="token punctuation">&#123;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline
  <span class="token property">float</span><span class="token punctuation">:</span> left
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="js-随机渐变背景"><a href="#js-随机渐变背景" class="headerlink" title="js 随机渐变背景"></a>js 随机渐变背景</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">getRandomRangeNum</span><span class="token punctuation">(</span><span class="token parameter">min<span class="token punctuation">,</span> max</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> min <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">function</span> <span class="token function">setRandomBg</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">var</span> left <span class="token operator">=</span> <span class="token function">getRandomRangeNum</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> bottom <span class="token operator">=</span> <span class="token function">getRandomRangeNum</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> css <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token string">"linear-gradient(to left bottom,hsl("</span><span class="token punctuation">,</span>
    left<span class="token punctuation">,</span>
    <span class="token string">", 100%, 85%) 0%,hsl("</span><span class="token punctuation">,</span>
    bottom<span class="token punctuation">,</span>
    <span class="token string">", 100%, 85%) 100%)"</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>
  el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>background <span class="token operator">=</span> css<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="css-三角形"><a href="#css-三角形" class="headerlink" title="css 三角形"></a>css 三角形</h1><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">span</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">border-top</span><span class="token punctuation">:</span> 40px solid transparent<span class="token punctuation">;</span>
  <span class="token property">border-left</span><span class="token punctuation">:</span> 40px solid transparent<span class="token punctuation">;</span>
  <span class="token property">border-right</span><span class="token punctuation">:</span> 40px solid transparent<span class="token punctuation">;</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> 40px solid #ff0000<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="1px-神迹"><a href="#1px-神迹" class="headerlink" title="1px 神迹"></a>1px 神迹</h1><h2 id="pc-端最优解"><a href="#pc-端最优解" class="headerlink" title="pc 端最优解"></a>pc 端最优解</h2><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span>1px<span class="token punctuation">;</span><span class="token property">overflow</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span><span class="token property">background</span><span class="token punctuation">:</span>red</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h2 id="移动端-媒体查询-transform"><a href="#移动端-媒体查询-transform" class="headerlink" title="移动端 - 媒体查询 + transform"></a>移动端 - 媒体查询 + transform</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.border-bottom::after</span> <span class="token punctuation">&#123;</span>
    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="移动端-媒体查询-伪类"><a href="#移动端-媒体查询-伪类" class="headerlink" title="移动端 - 媒体查询 + 伪类"></a>移动端 - 媒体查询 + 伪类</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.border__1px:before</span> <span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%
    <span class="token property">background-color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
    <span class="token property">transform-origin</span><span class="token punctuation">:</span> 50% 0%<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span>2<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
    <span class="token selector">.border__1px:before</span> <span class="token punctuation">&#123;</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>0.5<span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span>3<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
    <span class="token selector">.border__1px:before</span> <span class="token punctuation">&#123;</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>0.33<span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="横竖屏适配"><a href="#横竖屏适配" class="headerlink" title="横竖屏适配"></a>横竖屏适配</h1><p>js 检测</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"resize"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>orientation <span class="token operator">===</span> <span class="token number">180</span> <span class="token operator">||</span> window<span class="token punctuation">.</span>orientation <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token comment">// 正常方向或屏幕旋转180度</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"竖屏"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>orientation <span class="token operator">===</span> <span class="token number">90</span> <span class="token operator">||</span> window<span class="token punctuation">.</span>orientation <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">90</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token comment">// 屏幕顺时钟旋转90度或屏幕逆时针旋转90度</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"横屏"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>css 检测</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> portrait<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
  <span class="token comment">/*竖屏...*/</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
  <span class="token comment">/*横屏...*/</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="像素"><a href="#像素" class="headerlink" title="像素"></a>像素</h1><ul>
<li>物理像素: 物理设备真实的像素</li>
<li>独立像素: 平时开发写的 px</li>
<li>设备像素比(DPR): &#x3D; 物理像素 &#x2F; 设备独立像素</li>
</ul>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 获取 DPR</span>
window<span class="token punctuation">.</span>devicePixelRatio<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<p>也可以使用媒体查询</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token property">min-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<h1 id="srcset"><a href="#srcset" class="headerlink" title="srcset"></a>srcset</h1><p>使用 img 标签的 <code>srcset</code> 属性，浏览器会自动根据像素密度匹配最佳显示图片：</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>conardLi_1x.png<span class="token punctuation">"</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>conardLi_2x.png 2x, conardLi_3x.png 3x<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h1 id="字体小于-12px"><a href="#字体小于-12px" class="headerlink" title="字体小于 12px"></a>字体小于 12px</h1><p>css3 的 <code>transform</code> 属性，设置值为 <code>scale(x, y)</code> 定义 2D 缩放转换</p>
<h1 id="css-清浮动"><a href="#css-清浮动" class="headerlink" title="css 清浮动"></a>css 清浮动</h1><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.clearfix::after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="ellipsis"><a href="#ellipsis" class="headerlink" title="ellipsis"></a>ellipsis</h1><h2 id="单行"><a href="#单行" class="headerlink" title="单行"></a>单行</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.ellipsis</span> <span class="token punctuation">&#123;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
  <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="多行"><a href="#多行" class="headerlink" title="多行"></a>多行</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.ellipsis</span> <span class="token punctuation">&#123;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
  <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span>
  <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span> // 最多显示几行
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="页面导入样式时，使用-link-和-import"><a href="#页面导入样式时，使用-link-和-import" class="headerlink" title="页面导入样式时，使用 link 和 @import"></a>页面导入样式时，使用 link 和 @import</h1><blockquote>
<p>你可能不信，ie5+就支持@import 了</p>
</blockquote>
<ul>
<li>link: 与<code>dom</code>异步加载</li>
<li>@import: 先加载<code>dom</code></li>
</ul>
<h1 id="em-rem-换算"><a href="#em-rem-换算" class="headerlink" title="em | rem 换算"></a>em | rem 换算</h1><p>相对于HTML根元素 <code>font-size</code> 来确定的，浏览器的默认字体高是 <code>16px</code>，因此:</p>
<ul>
<li>16px &#x3D; 1em</li>
<li>12px &#x3D; .75em</li>
<li>10px &#x3D; .625em</li>
</ul>
<p>简化 rem 到 px 的换算，因为每个 rem 单位都是 10px 的倍数</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 62.5%<span class="token punctuation">;</span> <span class="token comment">/* 这会将默认的 16px 缩小为 10px */</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>也可以使用 js 检测设置</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// set 1rem = viewWidth / 10</span>
<span class="token keyword">function</span> <span class="token function">setRemUnit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">var</span> docEl <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">;</span>
  <span class="token keyword">var</span> rem <span class="token operator">=</span> docEl<span class="token punctuation">.</span>clientWidth <span class="token operator">/</span> <span class="token number">10</span><span class="token punctuation">;</span>
  docEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> rem <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"resize"</span><span class="token punctuation">,</span> setRemUnit<span class="token punctuation">)</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"pageShow"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>persisted<span class="token punctuation">)</span> <span class="token function">setRemUnit</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h1 id="less-常用"><a href="#less-常用" class="headerlink" title="less 常用"></a>less 常用</h1><h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><p>LESS 中的变量为完全的 <code>常量</code> ，所以只能定义一次</p>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token variable">@nice-blue<span class="token punctuation">:</span></span> #5B83AD<span class="token punctuation">;</span>
<span class="token variable">@light-blue<span class="token punctuation">:</span></span> <span class="token variable">@nice-blue</span> <span class="token operator">+</span> #111<span class="token punctuation">;</span>

<span class="token selector">#header</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">@light-blue</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>输出</p>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token selector">#header</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #6c94be<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h2 id="混合"><a href="#混合" class="headerlink" title="混合"></a>混合</h2><pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token selector">.bordered</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border-top</span><span class="token punctuation">:</span> dotted 1px black<span class="token punctuation">;</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> solid 2px black<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p>使用</p>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token selector">#menu a</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span>
  <span class="token mixin-usage function">.bordered</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.post a</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token mixin-usage function">.bordered</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>带参</p>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token selector">.border-radius (<span class="token variable">@radius</span>)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token variable">@radius</span><span class="token punctuation">;</span>
  <span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> <span class="token variable">@radius</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> <span class="token variable">@radius</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>#header {<br>.border-radius(4px);<br>}</p>
<p><code>@arguments</code>变量，包含了所有传递进来的参数. 如果你不想单独处理每一个参数</p>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token selector">.box-shadow (<span class="token variable">@x</span>: 0, <span class="token variable">@y</span>: 0, <span class="token variable">@blur</span>: 1px, <span class="token variable">@color</span>: #000)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token variable">@arguments</span><span class="token punctuation">;</span>
  <span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> <span class="token variable">@arguments</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> <span class="token variable">@arguments</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
.<span class="token function">box-shadow</span><span class="token punctuation">(</span>2px<span class="token punctuation">,</span> 5px<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>无参</p>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token selector">.wrap ()</span> <span class="token punctuation">&#123;</span>
  <span class="token property">text-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
  <span class="token property">white-space</span><span class="token punctuation">:</span> pre<span class="token operator">-</span>wrap<span class="token punctuation">;</span>
  <span class="token property">white-space</span><span class="token punctuation">:</span> <span class="token operator">-</span>moz<span class="token operator">-</span>pre<span class="token operator">-</span>wrap<span class="token punctuation">;</span>
  <span class="token property">word-wrap</span><span class="token punctuation">:</span> break<span class="token operator">-</span>word<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">pre</span> <span class="token punctuation">&#123;</span>
  <span class="token mixin-usage function">.wrap</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="lighten-和-darken"><a href="#lighten-和-darken" class="headerlink" title="lighten 和 darken"></a>lighten 和 darken</h2><pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token variable">@color-base<span class="token punctuation">:</span></span> #3bafda<span class="token punctuation">;</span>
<span class="token variable">@color-hover<span class="token punctuation">:</span></span>lighten <span class="token punctuation">(</span><span class="token variable">@color-primary</span><span class="token punctuation">,</span>10%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token variable">@color-focus<span class="token punctuation">:</span></span>darken <span class="token punctuation">(</span><span class="token variable">@color-primary</span><span class="token punctuation">,</span>10%<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h2 id="contrast"><a href="#contrast" class="headerlink" title="contrast"></a>contrast</h2><p>选择两种颜色中哪一种颜色与另一种颜色形成最大对比。</p>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">a</span><span class="token punctuation">:</span> <span class="token function">contrast</span><span class="token punctuation">(</span>#bbbbbb<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//output: black</span>
  <span class="token property">b</span><span class="token punctuation">:</span> <span class="token function">contrast</span><span class="token punctuation">(</span>#222222<span class="token punctuation">,</span> #101010<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//output: white</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="JavaScript-表达式"><a href="#JavaScript-表达式" class="headerlink" title="JavaScript 表达式"></a>JavaScript 表达式</h2><pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token variable">@var<span class="token punctuation">:</span></span> ` <span class="token string">"hello"</span> .<span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"!"</span> `<span class="token punctuation">;</span>
<span class="token variable">@height<span class="token punctuation">:</span></span> `document.body.clientHeight`<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<h2 id="amp-父选择器"><a href="#amp-父选择器" class="headerlink" title="&amp; 父选择器"></a>&amp; 父选择器</h2><p><code>&amp;</code> 只能代表父元素，不能代表父亲的父辈元素，施加改性类或伪类</p>
<pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token selector">a</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token selector">&amp;:hover</span> <span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="重复父类名"><a href="#重复父类名" class="headerlink" title="重复父类名"></a>重复父类名</h2><pre class="line-numbers language-less" data-language="less"><code class="language-less"><span class="token selector">.button</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">&amp;-ok</span> <span class="token punctuation">&#123;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"ok.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">&amp;-cancel</span> <span class="token punctuation">&#123;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"cancel.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>

  <span class="token selector">&amp;-custom</span> <span class="token punctuation">&#123;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"custom.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
</article>
        
        
<link rel="stylesheet" href="/css/80d65618.css">


<div class="copyright">
  <a target="_blank" href="https://mozzie.cn/2023/11/06/clop3jf37000op1z3gwgt8kuc/">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
      <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
        <path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
        <path d="M3 6v13"></path>
        <path d="M12 6v13"></path>
        <path d="M21 6v13"></path>
      </g>
    </svg>
    <span>css奇技淫巧</span>
  </a>
  <ul>
    <li>
      <span>Author</span>
      <p> Mozzie</p>
    </li>
    <li>
      <span>Published on</span>
      <p>2023-11-06</p>
    </li>
    <li>
      <span>License</span>
      <p><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></p>
    </li>
  </ul>
</div>


<script src="/js/31d6cfe0.js"></script>

        
        <!-- 评论 -->
        <div id="vcomments"></div>
      </div>
    </main>
  </div>
  
  <div class="meta-container">
    <div class="toc-wrapper content-dialog">
      <p class="catalog">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
          <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 6h16"></path>
            <path d="M4 12h16"></path>
            <path d="M4 18h12"></path>
          </g>
        </svg>
        <span>Catalog</span>
      </p>
      <!-- 文章toc -->
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#grid-%E5%B8%83%E5%B1%80"><span class="toc-number">1.</span> <span class="toc-text">grid 布局</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#repeat"><span class="toc-number">1.1.</span> <span class="toc-text">repeat()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#fr"><span class="toc-number">1.2.</span> <span class="toc-text">fr</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#grid-template-areas"><span class="toc-number">1.3.</span> <span class="toc-text">grid-template-areas</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#item-%E5%AE%9A%E4%BD%8D"><span class="toc-number">1.4.</span> <span class="toc-text">item 定位</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%A1%AC%E4%BB%B6%E5%8A%A0%E9%80%9F-IE9"><span class="toc-number">2.</span> <span class="toc-text">硬件加速(IE9+)</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8E%A7%E5%88%B6%E5%8F%B0%E6%89%93%E5%8D%B0-shield-%E5%BE%BD%E7%AB%A0"><span class="toc-number">3.</span> <span class="toc-text">控制台打印 shield 徽章</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#css-%E5%88%A4%E6%96%AD-input-%E6%98%AF%E5%90%A6%E4%B8%BA%E7%A9%BA"><span class="toc-number">4.</span> <span class="toc-text">css 判断 input 是否为空</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B1%85%E4%B8%AD"><span class="toc-number">5.</span> <span class="toc-text">居中</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#transform-%E5%A4%A7%E6%B3%95"><span class="toc-number">5.1.</span> <span class="toc-text">transform 大法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#0000-%E5%A4%A7%E6%B3%95"><span class="toc-number">5.2.</span> <span class="toc-text">0000 大法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E8%AE%A9-img-%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD"><span class="toc-number">5.3.</span> <span class="toc-text">如何让 img 垂直居中</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ul-%E4%B8%8B-li-%E5%B1%85%E4%B8%AD"><span class="toc-number">5.4.</span> <span class="toc-text">ul 下 li 居中</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#js-%E9%9A%8F%E6%9C%BA%E6%B8%90%E5%8F%98%E8%83%8C%E6%99%AF"><span class="toc-number">6.</span> <span class="toc-text">js 随机渐变背景</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#css-%E4%B8%89%E8%A7%92%E5%BD%A2"><span class="toc-number">7.</span> <span class="toc-text">css 三角形</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#1px-%E7%A5%9E%E8%BF%B9"><span class="toc-number">8.</span> <span class="toc-text">1px 神迹</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#pc-%E7%AB%AF%E6%9C%80%E4%BC%98%E8%A7%A3"><span class="toc-number">8.1.</span> <span class="toc-text">pc 端最优解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2-transform"><span class="toc-number">8.2.</span> <span class="toc-text">移动端 - 媒体查询 + transform</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2-%E4%BC%AA%E7%B1%BB"><span class="toc-number">8.3.</span> <span class="toc-text">移动端 - 媒体查询 + 伪类</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A8%AA%E7%AB%96%E5%B1%8F%E9%80%82%E9%85%8D"><span class="toc-number">9.</span> <span class="toc-text">横竖屏适配</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%83%8F%E7%B4%A0"><span class="toc-number">10.</span> <span class="toc-t
    </div>
  </div>
  
</div>

<script>
  window.katex = {
    enable: "true",
    jsCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js",
    cssCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css"
  }
  window.mermaid = {
    enable: "true",
    cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
  }
  window.valine = {
    enable: "false",
    appId: 'TisMit6uhflounFqAN3ZGjgq-MdYXbMMI',
    appKey: 'CdjirjYdz07U5i62ElsJvXUh',
    avatar: 'monsterid',
    cdn: '//unpkg.com/valine@latest/dist/Valine.min.js',
    serverURLs: '//tismit6u.api.lncldglobal.com'
  };
</script>


<script src="/js/a02fa72b.js"></script>

  </main>
</body>
<script>
  window.i18n = {
    "tip-collapse": "Collapse",
    "tip-expand": "Expand",
    "text-select": "select",
    "text-move": "movement",
    "text-esc": "close",
    "tip-status-done": "Done",
    "tip-status-doing": "In Progress",
    "tip-status-todo": "Todo",
    "tip-status-other": "Duplicate",
    "tip-status-default": "Default",
    "tip-roadmap-today": "Positioning to the today",
    "text-search": "Search...",
    "text-today": "Today",
    // month
    "January": "January",
    "February": "February",
    "March": "March",
    "April": "April",
    "May": "May",
    "June": "June",
    "July": "July",
    "August": "August",
    "September": "September",
    "October": "October",
    "November": "November",
    "December": "December",
  }
</script>

<script src="/js/58c91c4e.js"></script>


</html>