716 lines
82 KiB
HTML
716 lines
82 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/clqlr9qrd000e6gz3ak1r76ek/">
|
||
|
||
|
||
<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/b2495cef.css">
|
||
|
||
<script>window.i18n = {"tip-status-done":"完成","tip-status-default":"全部","tip-status-todo":"计划","tip-status-doing":"进行","tip-status-other":"其他","text-select":"选择","text-move":"移动","text-esc":"退出","January":"一月","February":"二月","March":"三月","April":"四月","May":"五月","June":"六月","July":"七月","August":"八月","September":"九月","October":"十月","November":"十一月","December":"十二月"}</script>
|
||
<meta name="generator" content="Hexo 7.0.0"></head>
|
||
|
||
<body id="app">
|
||
<aside id="aside-box" class="left-aside">
|
||
<div class="header">
|
||
|
||
<link rel="stylesheet" href="/css/61875ce9.css">
|
||
|
||
<div class="profile">
|
||
<a class="badge" href="/">
|
||
<span>Hi</span>
|
||
<span>Mozzie</span>
|
||
</a>
|
||
<cosy-tooltip id="left-aside-button" placement="right">
|
||
<span slot="content">
|
||
<span>显示 / 隐藏 左侧导航</span>
|
||
<cosy-short-key>[</cosy-short-key>
|
||
</span>
|
||
<cosy-icon>
|
||
<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="M16 4c1.104-.019 2 .896 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm1 2a1 1 0 0 0-1-1h-2.995v10H16a1 1 0 0 0 1-1V6zm-4.995 9V5H4.001a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8.004z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</cosy-icon>
|
||
</cosy-tooltip>
|
||
</div>
|
||
|
||
<script src="/js/a66044b6.js"></script>
|
||
|
||
|
||
|
||
|
||
<cosy-search id="post-search" placeholder="搜索">
|
||
<div slot="short-key">
|
||
<cosy-short-key>⌘</cosy-short-key>
|
||
<cosy-short-key>K</cosy-short-key>
|
||
</div>
|
||
</cosy-search>
|
||
|
||
|
||
<script>
|
||
window.algolia = {
|
||
appId: "5DTW808BZ8",
|
||
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
|
||
}
|
||
</script>
|
||
|
||
|
||
<script src="/js/5f00f278.js"></script>
|
||
|
||
</div>
|
||
<div class="aside-category">
|
||
|
||
<link rel="stylesheet" href="/css/db04a759.css">
|
||
|
||
|
||
<nav class="category-nav cosy-scrollbar">
|
||
<ul><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 20 20"><g fill="none"><path d="M3.5 3A1.5 1.5 0 0 0 2 4.5v4A1.5 1.5 0 0 0 3.5 10h9A1.5 1.5 0 0 0 14 8.5v-4A1.5 1.5 0 0 0 12.5 3h-9zM3 4.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4zm.5 6.5A1.5 1.5 0 0 0 2 12.5v4A1.5 1.5 0 0 0 3.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-4a1.5 1.5 0 0 0-1.5-1.5h-9zM3 12.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4zm14-.063a2.003 2.003 0 0 1-2.5-1.937A2 2 0 0 1 16 8.563a2.005 2.005 0 0 1 1 0a2 2 0 0 1 0 3.874zM16.5 3a.5.5 0 0 1 .5.5v4.041a3.02 3.02 0 0 0-1 0V3.5a.5.5 0 0 1 .5-.5zm0 10.5c-.17 0-.337-.014-.5-.041V17.5a.5.5 0 0 0 1 0v-4.041c-.163.027-.33.041-.5.041z" fill="currentColor"></path></g></svg>
|
||
<div class="ellipsis">归档</div>
|
||
</a>
|
||
</li><li data-path="cosy-roadmap">
|
||
<a href="/cosy-roadmap">
|
||
<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="M9.384 2a1 1 0 0 0-.966.742L4.616 17H2.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-2.116L11.582 2.742A1 1 0 0 0 10.616 2H9.384zM5.651 17l.8-3H11.5a.5.5 0 0 0 0-1H6.717l.534-2H10.5a.5.5 0 0 0 0-1H7.517l1.867-7h1.232l3.733 14H5.651z" fill="currentColor"></path></g></svg>
|
||
<div class="ellipsis">路线图</div>
|
||
</a>
|
||
</li><li data-path="cosy-resume">
|
||
<a href="/cosy-resume">
|
||
<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="M8.5 4.498a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0zm1.5-2.5a2.5 2.5 0 0 0-2.43 3.086L5.471 4.15a1.761 1.761 0 0 0-2.317.88c-.4.882-.008 1.917.877 2.31L7 8.662v2.287l-1.877 4.645a1.75 1.75 0 0 0 3.245 1.311l1.556-3.849a.073.073 0 0 1 .028-.038a.086.086 0 0 1 .046-.012c.02 0 .035.005.046.012a.074.074 0 0 1 .028.038l1.555 3.849a1.75 1.75 0 0 0 3.245-1.311L13 10.96V8.662l2.968-1.322a1.74 1.74 0 0 0 .877-2.31a1.761 1.761 0 0 0-2.317-.88l-2.097.934a2.5 2.5 0 0 0-2.43-3.086zM4.065 5.444a.761.761 0 0 1 1-.38l3.918 1.744a2.5 2.5 0 0 0 2.034 0l3.918-1.744a.761.761 0 0 1 1 .38a.739.739 0 0 1-.373.983l-2.969 1.321a1 1 0 0 0-.593.914v2.298a1 1 0 0 0 .073.375l1.872 4.633a.75.75 0 0 1-1.39.562l-1.556-3.849c-.364-.9-1.639-.9-2.003 0l-1.555 3.85a.75.75 0 1 1-1.39-.562l1.876-4.646A1 1 0 0 0 8 10.95V8.662a1 1 0 0 0-.593-.914L4.438 6.427a.739.739 0 0 1-.373-.983z" fill="currentColor"></path></g></svg>
|
||
<div class="ellipsis">简历</div>
|
||
</a>
|
||
</li></ul>
|
||
<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 20 20"><g fill="none"><path d="M4 16V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v11a1 1 0 0 1-1 1H5a1 1 0 0 0 1 1h9.5a.5.5 0 0 1 0 1H6a2 2 0 0 1-2-2zM15 4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v11h10V4zm-8 7.25c0-.076.012-.149.031-.218c.145.11.297.21.453.3A5.109 5.109 0 0 0 10 12c.982 0 1.863-.293 2.516-.669c.156-.09.308-.19.453-.299c.02.07.031.142.031.218c0 .3-.182.55-.33.71a2.798 2.798 0 0 1-.653.505c-.52.299-1.23.535-2.017.535a4.109 4.109 0 0 1-2.017-.535a2.8 2.8 0 0 1-.654-.504C7.182 11.8 7 11.55 7 11.25zm.031-2.218A.788.788 0 0 0 7 9.25c0 .3.182.551.33.71a2.8 2.8 0 0 0 .653.505c.52.299 1.23.535 2.017.535c.788 0 1.498-.236 2.017-.535c.26-.15.485-.322.654-.504c.147-.16.329-.41.329-.71a.788.788 0 0 0-.031-.219c-.145.11-.297.21-.453.3A5.108 5.108 0 0 1 10 10a5.108 5.108 0 0 1-2.516-.669a4.273 4.273 0 0 1-.453-.299zM8 7c0-.213.126-.448.483-.655C8.841 6.137 9.374 6 10 6c.626 0 1.159.137 1.517.345c.357.207.483.442.483.655c0 .213-.126.448-.483.655C11.159 7.863 10.626 8 10 8c-.626 0-1.159-.137-1.517-.345C8.126 7.448 8 7.213 8 7zm2-2c-.755 0-1.472.163-2.019.48C7.434 5.798 7 6.313 7 7s.434 1.202.981 1.52C8.528 8.837 9.245 9 10 9c.755 0 1.472-.163 2.019-.48c.547-.318.981-.833.981-1.52s-.434-1.202-.981-1.52C11.472 5.163 10.755 5 10 5z" fill="currentColor"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>Finance</span>
|
||
</div>
|
||
</a>
|
||
</li><li class="active">
|
||
<a href="/categories/Front-End/">
|
||
|
||
<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/">
|
||
|
||
<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>
|
||
</nav>
|
||
|
||
|
||
<script src="/js/118098c2.js"></script>
|
||
|
||
</div>
|
||
<div class="bottom">
|
||
<cosy-tooltip id="button-preference" placement="right">
|
||
<span slot="content">
|
||
<span>偏好</span>
|
||
<cosy-short-key>⌘</cosy-short-key>
|
||
<cosy-short-key>p</cosy-short-key>
|
||
</span>
|
||
<cosy-icon bordered id="button-about-cosy-theme">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
|
||
<g fill="none">
|
||
<path d="M8 6a2 2 0 1 0 0 4a2 2 0 0 0 0-4zM7 8a1 1 0 1 1 2 0a1 1 0 0 1-2 0zm3.618-3.602a.708.708 0 0 1-.824-.567l-.26-1.416a.354.354 0 0 0-.275-.282a6.072 6.072 0 0 0-2.519 0a.354.354 0 0 0-.275.282l-.259 1.416a.71.71 0 0 1-.936.538l-1.359-.484a.355.355 0 0 0-.382.095c-.569.627-1 1.367-1.262 2.173a.352.352 0 0 0 .108.378l1.102.931a.704.704 0 0 1 0 1.076l-1.102.931a.352.352 0 0 0-.108.378A5.986 5.986 0 0 0 3.53 12.02a.355.355 0 0 0 .382.095l1.36-.484a.708.708 0 0 1 .936.538l.258 1.416c.026.14.135.252.275.281a6.075 6.075 0 0 0 2.52 0a.353.353 0 0 0 .274-.281l.26-1.416a.71.71 0 0 1 .936-.538l1.359.484c.135.048.286.01.382-.095c.569-.627 1-1.367 1.262-2.173a.352.352 0 0 0-.108-.378l-1.102-.931a.703.703 0 0 1 0-1.076l1.102-.931a.352.352 0 0 0 .108-.378A5.985 5.985 0 0 0 12.47 3.98a.355.355 0 0 0-.382-.095l-1.36.484a.71.71 0 0 1-.111.03zm-6.62.58l.937.333a1.71 1.71 0 0 0 2.255-1.3l.177-.97a5.105 5.105 0 0 1 1.265 0l.178.97a1.708 1.708 0 0 0 2.255 1.3L12 4.977c.255.334.467.698.63 1.084l-.754.637a1.704 1.704 0 0 0 0 2.604l.755.637a4.99 4.99 0 0 1-.63 1.084l-.937-.334a1.71 1.71 0 0 0-2.255 1.3l-.178.97a5.099 5.099 0 0 1-1.265 0l-.177-.97a1.708 1.708 0 0 0-2.255-1.3L4 11.023a4.987 4.987 0 0 1-.63-1.084l.754-.638a1.704 1.704 0 0 0 0-2.603l-.755-.637c.164-.386.376-.75.63-1.084z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</cosy-icon>
|
||
</cosy-tooltip>
|
||
</div>
|
||
</aside>
|
||
<main>
|
||
|
||
<link rel="stylesheet" href="/css/9bb9a539.css">
|
||
|
||
|
||
<div class="post-container">
|
||
<header>
|
||
<div class="left">
|
||
|
||
<link rel="stylesheet" href="/css/7d333f9e.css">
|
||
|
||
<nav class="breadcrumb">
|
||
<section>
|
||
<cosy-tooltip placement="bottom-left">
|
||
<span slot="content"><span>首页</span>
|
||
<cosy-short-key>⌘</cosy-short-key>
|
||
<cosy-short-key>H</cosy-short-key>
|
||
</span>
|
||
<cosy-icon href="/">
|
||
<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="M8.998 2.388a1.5 1.5 0 0 1 2.005 0l5.5 4.942A1.5 1.5 0 0 1 17 8.445V15.5a1.5 1.5 0 0 1-1.5 1.5H13a1.5 1.5 0 0 1-1.5-1.5V12a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v3.5A1.5 1.5 0 0 1 7 17H4.5A1.5 1.5 0 0 1 3 15.5V8.445c0-.425.18-.83.498-1.115l5.5-4.942zm1.336.744a.5.5 0 0 0-.668 0l-5.5 4.942A.5.5 0 0 0 4 8.445V15.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V12A1.5 1.5 0 0 1 9 10.5h2a1.5 1.5 0 0 1 1.5 1.5v3.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5V8.445a.5.5 0 0 0-.166-.371l-5.5-4.942z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</cosy-icon>
|
||
</cosy-tooltip>
|
||
|
||
|
||
<svg class="arrow" 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>
|
||
<a class="ellipsis" href="/categories/Front-End/">
|
||
Front-End
|
||
</a>
|
||
|
||
|
||
|
||
<svg class="arrow" 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>
|
||
<span class="ellipsis">
|
||
css奇技淫巧
|
||
</span>
|
||
|
||
</section>
|
||
</nav>
|
||
|
||
|
||
<script src="/js/31d6cfe0.js"></script>
|
||
|
||
</div>
|
||
<div class="right">
|
||
|
||
<cosy-tooltip id="toc-show-button" placement="left">
|
||
<span slot="content">
|
||
<span>显示 / 隐藏 文章目录</span>
|
||
<cosy-short-key>]</cosy-short-key>
|
||
</span>
|
||
<cosy-icon>
|
||
<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="M4 4c-1.104-.019-2 .896-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4zM3 6a1 1 0 0 1 1-1h2.995v10H4a1 1 0 0 1-1-1V6zm4.995 9V5h8.004a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7.995z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</cosy-icon>
|
||
</cosy-tooltip>
|
||
|
||
</div>
|
||
</header>
|
||
<div class="content">
|
||
<main class="cosy-scrollbar">
|
||
<div class="article-container">
|
||
<!-- 渲染文章内容 -->
|
||
<article>
|
||
<!-- 文章标题 -->
|
||
<h1 class="post-title">css奇技淫巧</h1>
|
||
<div class="last-updated">
|
||
上次更新: 2023-11-08 09:33:30
|
||
</div>
|
||
<!-- 文章 -->
|
||
<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="/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><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">{</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="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">{</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="移动端-媒体查询-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">{</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="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="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 = 1em</li>
|
||
<li>12px = .75em</li>
|
||
<li>10px = .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">{</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">}</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 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 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">{</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">}</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">{</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-less" data-language="less"><code class="language-less"><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-less" data-language="less"><code class="language-less"><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>
|
||
<span class="token mixin-usage function">.bordered</span><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>
|
||
<span class="token mixin-usage function">.bordered</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></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">{</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">}</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">{</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">}</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">{</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">}</span>
|
||
|
||
<span class="token selector">pre</span> <span class="token punctuation">{</span>
|
||
<span class="token mixin-usage function">.wrap</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>
|
||
|
||
<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">{</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">}</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="& 父选择器"></a>& 父选择器</h2><p><code>&</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">{</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-less" data-language="less"><code class="language-less"><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>
|
||
|
||
<div class="post-tags">
|
||
<!-- 文章tags -->
|
||
|
||
</div>
|
||
<p class="motto">重拾纯粹的写作</p>
|
||
</article>
|
||
<!-- 评论 -->
|
||
<div id="vcomments"></div>
|
||
</div>
|
||
</main>
|
||
<!-- toc -->
|
||
|
||
<cosy-drag-box id="toc-drag-box" trigger="left" min-width="220" uid="toc-box">
|
||
<div class="meta-container">
|
||
<div class="toc-wrapper cosy-scrollbar">
|
||
<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">& 父选择器</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>
|
||
</cosy-drag-box>
|
||
|
||
</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/0af3d6bb.js"></script>
|
||
|
||
</main>
|
||
</body>
|
||
|
||
<script>
|
||
window.theme = {
|
||
color: 'hsl(238,50%,56%)'
|
||
}
|
||
</script>
|
||
|
||
|
||
<script src="/js/9c8197f9.js"></script>
|
||
|
||
|
||
</html> |