799 lines
83 KiB
HTML
799 lines
83 KiB
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/front-end/css%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/">
|
||
|
||
|
||
<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 布局操纵的是一维、一行/一列，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="/data/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">{</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">}</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"><</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"><</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"><</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"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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">{</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">}</span>
|
||
<span class="token selector">#demo-input</span> <span class="token punctuation">{</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">}</span>
|
||
<span class="token selector">#demo-input::placeholder</span> <span class="token punctuation">{</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector">#demo-input:focus + label,
|
||
#demo-input:not(:placeholder-shown) + label</span> <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">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector">#demo-label</span> <span class="token punctuation">{</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">}</span>
|
||
<span class="token comment">/*
|
||
* Default
|
||
*/</span>
|
||
<span class="token selector">body</span> <span class="token punctuation">{</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">}</span>
|
||
<span class="token selector">body div</span> <span class="token punctuation">{</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector">body div input</span> <span class="token punctuation">{</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">}</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><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"><</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>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>box<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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>
|
||
|
||
<p><code>已知宽高</code>、<code>flex神教</code>，就不用说了</p>
|
||
<h2 id="tranform-大法"><a href="#tranform-大法" class="headerlink" title="tranform 大法"></a>tranform 大法</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#wrapper</span> <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">}</span>
|
||
<span class="token selector">#box</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> 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">}</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">{</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector">#box</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">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">}</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"><</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"><</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"></</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">{</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">}</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"><!--外层包个div/section block元素 --></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>li</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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">{</span>
|
||
<span class="token property">text-align</span><span class="token punctuation">:</span> center
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector">ul</span><span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> inline-block
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector">li</span><span class="token punctuation">{</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">}</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="随机渐变背景"><a href="#随机渐变背景" class="headerlink" title="随机渐变背景"></a>随机渐变背景</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">{</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">}</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">{</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">}</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">{</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">}</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"><</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"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||
|
||
<h2 id="移动端-媒体查询-transfrom"><a href="#移动端-媒体查询-transfrom" class="headerlink" title="移动端 - 媒体查询 + transfrom"></a>移动端 - 媒体查询 + transfrom</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">{</span>
|
||
<span class="token selector">.border-bottom::after</span> <span class="token punctuation">{</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">}</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="移动端-媒体查询-伪类"><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">{</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">}</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">{</span>
|
||
<span class="token selector">.border__1px:before</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">}</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">{</span>
|
||
<span class="token selector">.border__1px:before</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.33<span class="token punctuation">)</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></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">{</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">{</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">}</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">{</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">}</span>
|
||
<span class="token punctuation">}</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">{</span>
|
||
<span class="token comment">/*竖屏...*/</span>
|
||
<span class="token punctuation">}</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">{</span>
|
||
<span class="token comment">/*横屏...*/</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>
|
||
|
||
<h1 id="像素"><a href="#像素" class="headerlink" title="像素"></a>像素</h1><ul>
|
||
<li>物理像素: 物理设备真实的像素</li>
|
||
<li>独立像素: 平时开发写的 px</li>
|
||
<li>设备像素比(DPR): = 物理像素 / 设备独立像素</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">{</span>
|
||
<span class="token punctuation">}</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"><</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="盒子模型"><a href="#盒子模型" class="headerlink" title="盒子模型"></a>盒子模型</h1><p>padding，margin，content，border</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">{</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">}</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">{</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">}</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">{</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">}</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="inline-block-元素间的换行符空格间隙"><a href="#inline-block-元素间的换行符空格间隙" class="headerlink" title="inline-block 元素间的换行符空格间隙"></a>inline-block 元素间的换行符空格间隙</h1><ul>
|
||
<li><code>letter-spacing</code></li>
|
||
<li><code>display: inline -3px;</code></li>
|
||
<li><code><</code> 不换行</li>
|
||
</ul>
|
||
<h1 id="em-rem-换算"><a href="#em-rem-换算" class="headerlink" title="em | rem 换算"></a>em | rem 换算</h1><p>浏览器的默认字体高都是 16px，因此:</p>
|
||
<ul>
|
||
<li>16px = 1em</li>
|
||
<li>12px = .75em</li>
|
||
<li>10px = .625em</li>
|
||
</ul>
|
||
<p>由于设配<code>ppi</code>不同，自行换算，eg:</p>
|
||
<p>给<code><h3></code>设置字体为<code>20px</code>=<code>16px * 1.25rem</code></p>
|
||
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">h3</span> <span class="token punctuation">{</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> 1.25rem<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>
|
||
|
||
<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">{</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">}</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">{</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 punctuation">{</span>
|
||
<span class="token function">setRemUnit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</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></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 中的变量为完全的 ‘常量’ ，所以只能定义一次</p>
|
||
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@nice-blue</span><span class="token punctuation">:</span> #5B83AD<span class="token punctuation">;</span></span>
|
||
<span class="token atrule"><span class="token rule">@light-blue</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@nice-blue</span> + #111<span class="token punctuation">;</span></span></span>
|
||
|
||
<span class="token selector">#header</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@light-blue</span><span class="token punctuation">;</span></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-css" data-language="css"><code class="language-css"><span class="token selector">#header</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> #6c94be<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="混合"><a href="#混合" class="headerlink" title="混合"></a>混合</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.bordered</span> <span class="token punctuation">{</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">}</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-css" data-language="css"><code class="language-css"><span class="token selector">#menu a</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span>
|
||
.bordered<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token selector">.post a</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
|
||
.bordered<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></code></pre>
|
||
|
||
<p>带参</p>
|
||
<pre class="line-numbers language-css" data-language="css"><code class="language-css">.border-radius <span class="token punctuation">(</span><span class="token atrule"><span class="token rule">@radius</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@radius</span><span class="token punctuation">;</span></span>
|
||
<span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@radius</span><span class="token punctuation">;</span></span>
|
||
<span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@radius</span><span class="token punctuation">;</span></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></code></pre>
|
||
|
||
<p>#header {<br>.border-radius(4px);<br>}</p>
|
||
<p><code>@arguments</code>变量，包含了所有传递进来的参数. 如果你不想单独处理每一个参数</p>
|
||
<pre class="line-numbers language-css" data-language="css"><code class="language-css">.box-shadow <span class="token punctuation">(</span><span class="token atrule"><span class="token rule">@x</span><span class="token punctuation">:</span> 0<span class="token punctuation">,</span> @<span class="token property">y</span><span class="token punctuation">:</span> 0<span class="token punctuation">,</span> @<span class="token property">blur</span><span class="token punctuation">:</span> 1px<span class="token punctuation">,</span> @<span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
||
<span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@arguments</span><span class="token punctuation">;</span></span>
|
||
<span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@arguments</span><span class="token punctuation">;</span></span>
|
||
<span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@arguments</span><span class="token punctuation">;</span></span>
|
||
<span class="token punctuation">}</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-css" data-language="css"><code class="language-css"><span class="token selector">.wrap ()</span> <span class="token punctuation">{</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-wrap<span class="token punctuation">;</span>
|
||
<span class="token property">white-space</span><span class="token punctuation">:</span> -moz-pre-wrap<span class="token punctuation">;</span>
|
||
<span class="token property">word-wrap</span><span class="token punctuation">:</span> break-word<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">pre</span> <span class="token punctuation">{</span>
|
||
.wrap<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>
|
||
|
||
<h2 id="Color-函数"><a href="#Color-函数" class="headerlink" title="Color 函数"></a>Color 函数</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@color-base</span><span class="token punctuation">:</span> #3bafda<span class="token punctuation">;</span></span>
|
||
<span class="token atrule"><span class="token rule">@color-hover</span><span class="token punctuation">:</span>lighten <span class="token punctuation">(</span><span class="token atrule"><span class="token rule">@color-primary</span><span class="token punctuation">,</span>10%<span class="token punctuation">)</span><span class="token punctuation">;</span></span></span>
|
||
<span class="token atrule"><span class="token rule">@color-focus</span><span class="token punctuation">:</span>darken <span class="token punctuation">(</span><span class="token atrule"><span class="token rule">@color-primary</span><span class="token punctuation">,</span>10%<span class="token punctuation">)</span><span class="token punctuation">;</span></span></span><span aria-hidden="true" class="line-numbers-rows"><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-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@var</span><span class="token punctuation">:</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 string">"!"</span> `<span class="token punctuation">;</span></span>
|
||
<span class="token atrule"><span class="token rule">@height</span><span class="token punctuation">:</span> `document.body.clientHeight`<span class="token punctuation">;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="父选择器"><a href="#父选择器" class="headerlink" title="父选择器"></a>父选择器</h2><p>@只能代表父元素，不能代表父亲的父辈元素，施加改性类或伪类</p>
|
||
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
|
||
<span class="token selector">&:hover</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</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></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">.button</span> <span class="token punctuation">{</span>
|
||
<span class="token selector">&-ok</span> <span class="token punctuation">{</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">}</span>
|
||
<span class="token selector">&-cancel</span> <span class="token punctuation">{</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">}</span>
|
||
|
||
<span class="token selector">&-custom</span> <span class="token punctuation">{</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">}</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></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/front-end/css%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/">
|
||
<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%9E%82%E7%9B%B4%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="#tranform-%E5%A4%A7%E6%B3%95"><span class="toc-number">5.1.</span> <span class="toc-text">tranform 大法</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="#%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">随机渐变背景</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-transfrom"><span class="toc-number">8.2.</span> <span class="toc-text">移动端 - 媒体查询 + transfrom</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-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="#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B"><span class="toc-number">13.</span> <span class="toc-text">盒子模型</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">14.</span> <span class="toc-text">css 清浮动</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%B6%85%E5%87%BA%E7%9C%81%E7%95%A5-ellipsis"><span class="toc-number">15.</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">15.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">15.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">16.</span> <span class="toc-text">页面导入样式时，使用 link 和@import</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#inline-block-%E5%85%83%E7%B4%A0%E9%97%B4%E7%9A%84%E6%8D%A2%E8%A1%8C%E7%AC%A6%E7%A9%BA%E6%A0%BC%E9%97%B4%E9%9A%99"><span class="toc-number">17.</span> <span class="toc-text">inline-block 元素间的换行符空格间隙</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">18.</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">19.</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">19.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">19.2.</span> <span class="toc-text">混合</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Color-%E5%87%BD%E6%95%B0"><span class="toc-number">19.3.</span> <span class="toc-text">Color 函数</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">19.4.</span> <span class="toc-text">JavaScript 表达式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%88%B6%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">19.5.</span> <span class="toc-text">父选择器</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">19.6.</span> <span class="toc-text">重复父类名</span></a></li></ol></li></ol>
|
||
</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> |