mozzie/blog-hexo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
95a6741394
blog-hexo/public/2023/11/17/clpdhwpje000d5yva83sd1e6y/index.html
root 95a6741394 update
2023-11-25 11:32:34 +08:00

772 lines
82 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/17/clpdhwpje000d5yva83sd1e6y/">
<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/5e0df50f.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="展开">
<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="首页">
<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="切换主题">
<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/82dd7e5a.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">搜索...</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><li data-path="timeline">
<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">时间轴</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">路线</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">简历</div>
</a>
</li></ul>
<p>分类</p>
<ul><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="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>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><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="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>Hexo</span>
</div>
</a>
</li><li class="">
<a href="/categories/%E6%B1%82%E5%AD%A6%E4%B9%8B%E8%B7%AF/">
<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="M7 4a2 2 0 0 0-2 2v3a2 3 0 0 1-2 3a2 3 0 0 1 2 3v3a2 2 0 0 0 2 2"></path><path d="M17 4a2 2 0 0 1 2 2v3a2 3 0 0 0 2 3a2 3 0 0 0-2 3v3a2 2 0 0 1-2 2"></path></g></svg>
<div class="ellipsis">
<span>求学之路</span>
</div>
</a>
</li><li class="">
<a href="/categories/%E8%87%AA%E5%AA%92%E4%BD%93/">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<div class="ellipsis">
<span>自媒体</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/3fe07c47.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="首页">
<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>css奇技淫巧</h1>
<p class="post-info">更新: 2023-11-17 16:12:08</p>
<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/727b3e4f.css">
<div class="copyright">
<a target="_blank" href="https://mozzie.cn/2023/11/17/clpdhwpje000d5yva83sd1e6y/">
<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>作者</span>
<p> Mozzie</p>
</li>
<li>
<span>发布于</span>
<p>2023-11-17</p>
</li>
<li>
<span>许可</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>目录</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-text">像素</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#srcset"><span class="toc-number">11.</span> <span class="toc-text">srcset</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AD%97%E4%BD%93%E5%B0%8F%E4%BA%8E-12px"><span class="toc-number">12.</span> <span class="toc-text">字体小于 12px</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#css-%E6%B8%85%E6%B5%AE%E5%8A%A8"><span class="toc-number">13.</span> <span class="toc-text">css 清浮动</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#ellipsis"><span class="toc-number">14.</span> <span class="toc-text">ellipsis</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%95%E8%A1%8C"><span class="toc-number">14.1.</span> <span class="toc-text">单行</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%9A%E8%A1%8C"><span class="toc-number">14.2.</span> <span class="toc-text">多行</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E5%AF%BC%E5%85%A5%E6%A0%B7%E5%BC%8F%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8-link-%E5%92%8C-import"><span class="toc-number">15.</span> <span class="toc-text">页面导入样式时，使用 link 和 @import</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#em-rem-%E6%8D%A2%E7%AE%97"><span class="toc-number">16.</span> <span class="toc-text">em | rem 换算</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#less-%E5%B8%B8%E7%94%A8"><span class="toc-number">17.</span> <span class="toc-text">less 常用</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E9%87%8F"><span class="toc-number">17.1.</span> <span class="toc-text">变量</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%B7%E5%90%88"><span class="toc-number">17.2.</span> <span class="toc-text">混合</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#lighten-%E5%92%8C-darken"><span class="toc-number">17.3.</span> <span class="toc-text">lighten 和 darken</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#contrast"><span class="toc-number">17.4.</span> <span class="toc-text">contrast</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-number">17.5.</span> <span class="toc-text">JavaScript 表达式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#amp-%E7%88%B6%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">17.6.</span> <span class="toc-text">&amp; 父选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%87%8D%E5%A4%8D%E7%88%B6%E7%B1%BB%E5%90%8D"><span class="toc-number">17.7.</span> <span class="toc-text">重复父类名</span></a></li></ol></li></ol>
</div>
</div>
</div>
<script>
window.page = {
use: ''
}
window.katex = {
enable: "",
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: "",
theme: "",
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
}
window.valine = {
enable: "",
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/e8ca3347.js"></script>
</main>
</body>
<script>
window.i18n = {
"tip-collapse": "折叠",
"tip-expand": "展开",
"text-select": "选择",
"text-move": "移动",
"text-esc": "关闭",
"tip-status-done": "完成",
"tip-status-doing": "进行中",
"tip-status-todo": "待办",
"tip-status-other": "废弃",
"tip-status-default": "默认",
"tip-roadmap-today": "定位今天",
"text-search": "搜索...",
"text-today": "今天",
// month
"January": "一月",
"February": "二月",
"March": "三月",
"April": "四月",
"May": "五月",
"June": "六月",
"July": "七月",
"August": "八月",
"September": "九月",
"October": "十月",
"November": "十一月",
"December": "十二月",
}
</script>
<script src="/js/58c91c4e.js"></script>
</html>
Reference in New Issue View Git Blame Copy Permalink