mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 05:01:21 +08:00
1436 lines
180 KiB
HTML
1436 lines
180 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>CSS 备忘清单
|
||
& css cheatsheet & Quick Reference</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta description="这是一份关于 CSS 优点的快速参考备忘单，列出了选择器语法、属性、单位和其他有用的信息为开发人员分享快速参考备忘单。">
|
||
<meta keywords="Quick,Reference,cheatsheet,css">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||
<link rel="stylesheet" href="../style/style.css">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/css.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script>
|
||
const LOCAL_NANE = '_dark_mode_theme_'
|
||
const rememberedValue = localStorage.getItem(LOCAL_NANE);
|
||
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
|
||
document.documentElement.setAttribute('data-color-mode', rememberedValue);
|
||
}
|
||
const button = document.querySelector('#darkMode');
|
||
button.onclick = () => {
|
||
const theme = document.documentElement.dataset.colorMode;
|
||
const mode = theme === 'light' ? 'dark' : 'light';
|
||
document.documentElement.setAttribute('data-color-mode', mode);
|
||
localStorage.setItem(LOCAL_NANE, mode);
|
||
}
|
||
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="css-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512" height="1em" width="1em">
|
||
<path d="m64 32 35 403.22L255.77 480 413 435.15 448 32Zm290.68 334.9L256.07 395l-98.46-28.24-6.75-77.76h48.26l3.43 39.56 53.59 15.16.13.28 53.47-14.85 5.64-64.15H203l-4-50h120.65l4.35-51H140l-4-49h240.58Z"></path>
|
||
</svg>
|
||
<a aria-hidden="true" tabindex="-1" href="#css-备忘清单"><span class="icon icon-link"></span></a>CSS 备忘清单</h1><div class="wrap-body">
|
||
<p>这是一份关于 CSS 优点的快速参考备忘单，列出了选择器语法、属性、单位和其他有用的信息</p>
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve4 tocs-link" href="#外部样式表">外部样式表</a><a aria-hidden="true" class="leve4 tocs-link" href="#内部样式表">内部样式表</a><a aria-hidden="true" class="leve4 tocs-link" href="#内联样式">内联样式</a><a aria-hidden="true" class="leve3 tocs-link" href="#添加-class-类">添加 class 类</a><a aria-hidden="true" class="leve3 tocs-link" href="#important">!important</a><a aria-hidden="true" class="leve3 tocs-link" href="#选择器">选择器</a><a aria-hidden="true" class="leve3 tocs-link" href="#文本颜色">文本颜色</a><a aria-hidden="true" class="leve3 tocs-link" href="#背景">背景</a><a aria-hidden="true" class="leve3 tocs-link" href="#字体">字体</a><a aria-hidden="true" class="leve3 tocs-link" href="#定位">定位</a><a aria-hidden="true" class="leve3 tocs-link" href="#动画">动画</a><a aria-hidden="true" class="leve3 tocs-link" href="#注释">注释</a><a aria-hidden="true" class="leve3 tocs-link" href="#flex-布局">Flex 布局</a><a aria-hidden="true" class="leve3 tocs-link" href="#grid-布局">Grid 布局</a><a aria-hidden="true" class="leve3 tocs-link" href="#变量和计数器">变量和计数器</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-选择器">CSS 选择器</a><a aria-hidden="true" class="leve3 tocs-link" href="#示例">示例</a><a aria-hidden="true" class="leve4 tocs-link" href="#组选择器">组选择器</a><a aria-hidden="true" class="leve4 tocs-link" href="#链选择器">链选择器</a><a aria-hidden="true" class="leve4 tocs-link" href="#属性选择器">属性选择器</a><a aria-hidden="true" class="leve4 tocs-link" href="#第一个子选择器">第一个子选择器</a><a aria-hidden="true" class="leve4 tocs-link" href="#无子选择器">无子选择器</a><a aria-hidden="true" class="leve3 tocs-link" href="#基础">基础</a><a aria-hidden="true" class="leve3 tocs-link" href="#组合器">组合器</a><a aria-hidden="true" class="leve3 tocs-link" href="#属性选择器-1">属性选择器</a><a aria-hidden="true" class="leve3 tocs-link" href="#用户操作伪类">用户操作伪类</a><a aria-hidden="true" class="leve3 tocs-link" href="#伪类">伪类</a><a aria-hidden="true" class="leve3 tocs-link" href="#输入伪类">输入伪类</a><a aria-hidden="true" class="leve3 tocs-link" href="#结构伪类">结构伪类</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-字体">CSS 字体</a><a aria-hidden="true" class="leve3 tocs-link" href="#属性">属性</a><a aria-hidden="true" class="leve3 tocs-link" href="#速记">速记</a><a aria-hidden="true" class="leve3 tocs-link" href="#示例-1">示例</a><a aria-hidden="true" class="leve3 tocs-link" href="#大小写">大小写</a><a aria-hidden="true" class="leve3 tocs-link" href="#font-face">@font-face</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-颜色">CSS 颜色</a><a aria-hidden="true" class="leve3 tocs-link" href="#命名颜色">命名颜色</a><a aria-hidden="true" class="leve3 tocs-link" href="#十六进制颜色">十六进制颜色</a><a aria-hidden="true" class="leve3 tocs-link" href="#rgb-颜色">rgb() 颜色</a><a aria-hidden="true" class="leve3 tocs-link" href="#hsl-颜色">HSL 颜色</a><a aria-hidden="true" class="leve3 tocs-link" href="#其它">其它</a><a aria-hidden="true" class="leve3 tocs-link" href="#全局值">全局值</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-背景">CSS 背景</a><a aria-hidden="true" class="leve3 tocs-link" href="#属性-1">属性</a><a aria-hidden="true" class="leve3 tocs-link" href="#速记-1">速记</a><a aria-hidden="true" class="leve3 tocs-link" href="#示例-2">示例</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-盒子模型">CSS 盒子模型</a><a aria-hidden="true" class="leve3 tocs-link" href="#最大值最小值">最大值/最小值</a><a aria-hidden="true" class="leve3 tocs-link" href="#边距补白">边距/补白</a><a aria-hidden="true" class="leve3 tocs-link" href="#box-sizing">Box-sizing</a><a aria-hidden="true" class="leve3 tocs-link" href="#能见度">能见度</a><a aria-hidden="true" class="leve3 tocs-link" href="#auto-关键字">Auto 关键字</a><a aria-hidden="true" class="leve3 tocs-link" href="#溢出overflow">溢出(Overflow)</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-动画">CSS 动画</a><a aria-hidden="true" class="leve3 tocs-link" href="#速记-2">速记</a><a aria-hidden="true" class="leve3 tocs-link" href="#属性-2">属性</a><a aria-hidden="true" class="leve3 tocs-link" href="#示例-3">示例</a><a aria-hidden="true" class="leve3 tocs-link" href="#javascript-事件">Javascript 事件</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-flexbox">CSS Flexbox</a><a aria-hidden="true" class="leve3 tocs-link" href="#简单实例">简单实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#容器">容器</a><a aria-hidden="true" class="leve3 tocs-link" href="#子元素">子元素</a><a aria-hidden="true" class="leve3 tocs-link" href="#justify-content">justify-content</a><a aria-hidden="true" class="leve3 tocs-link" href="#flex-wrap">flex-wrap</a><a aria-hidden="true" class="leve3 tocs-link" href="#flex-direction">flex-direction</a><a aria-hidden="true" class="leve3 tocs-link" href="#align-items">align-items</a><a aria-hidden="true" class="leve3 tocs-link" href="#align-content">align-content</a><a aria-hidden="true" class="leve3 tocs-link" href="#order">order</a><a aria-hidden="true" class="leve3 tocs-link" href="#flex-grow">flex-grow</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-flexbox-技巧">CSS Flexbox 技巧</a><a aria-hidden="true" class="leve3 tocs-link" href="#垂直中心">垂直中心</a><a aria-hidden="true" class="leve3 tocs-link" href="#垂直中心-2">垂直中心 (2)</a><a aria-hidden="true" class="leve3 tocs-link" href="#重新排序">重新排序</a><a aria-hidden="true" class="leve3 tocs-link" href="#移动布局">移动布局</a><a aria-hidden="true" class="leve3 tocs-link" href="#table-like-像表格">Table-like 像表格</a><a aria-hidden="true" class="leve3 tocs-link" href="#vertical-垂直的">Vertical 垂直的</a><a aria-hidden="true" class="leve3 tocs-link" href="#左和右">左和右</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-grid-网格布局">CSS Grid 网格布局</a><a aria-hidden="true" class="leve3 tocs-link" href="#网格模板列">网格模板列</a><a aria-hidden="true" class="leve3 tocs-link" href="#fr-相对单位">fr 相对单位</a><a aria-hidden="true" class="leve3 tocs-link" href="#grid-gap-网格间隙">Grid Gap 网格间隙</a><a aria-hidden="true" class="leve3 tocs-link" href="#css-网格行">CSS 网格行</a><a aria-hidden="true" class="leve4 tocs-link" href="#实例">实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#css-块级网格">CSS 块级网格</a><a aria-hidden="true" class="leve3 tocs-link" href="#css-内联级别网格">CSS 内联级别网格</a><a aria-hidden="true" class="leve3 tocs-link" href="#css-网格行间隙">CSS 网格行间隙</a><a aria-hidden="true" class="leve3 tocs-link" href="#css-网格区域">CSS 网格区域</a><a aria-hidden="true" class="leve3 tocs-link" href="#minmax-函数">minmax() 函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#grid-row-start--grid-row-end">grid-row-start & grid-row-end</a><a aria-hidden="true" class="leve4 tocs-link" href="#实例-1">实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#对齐项目">对齐项目</a><a aria-hidden="true" class="leve3 tocs-link" href="#css-网格模板区域">CSS 网格模板区域</a><a aria-hidden="true" class="leve3 tocs-link" href="#justify-self">Justify Self</a><a aria-hidden="true" class="leve3 tocs-link" href="#对齐项目-1">对齐项目</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-动态内容">CSS 动态内容</a><a aria-hidden="true" class="leve3 tocs-link" href="#变量">变量</a><a aria-hidden="true" class="leve3 tocs-link" href="#计数器">计数器</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用计数器">使用计数器</a><a aria-hidden="true" class="leve2 tocs-link" href="#css-3-技巧">Css 3 技巧</a><a aria-hidden="true" class="leve3 tocs-link" href="#滚动条平滑">滚动条平滑</a><a aria-hidden="true" class="leve3 tocs-link" href="#忽略用作间距的换行符-br-">忽略用作间距的换行符 <br /></a><a aria-hidden="true" class="leve3 tocs-link" href="#使用-empty-隐藏空-html-元素">使用 :empty 隐藏空 HTML 元素</a><a aria-hidden="true" class="leve3 tocs-link" href="#css-重置">CSS 重置</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用图像作为光标">使用图像作为光标</a><a aria-hidden="true" class="leve3 tocs-link" href="#文本溢出显示省略号">文本溢出显示省略号</a><a aria-hidden="true" class="leve3 tocs-link" href="#将文本截断到特定的行数">将文本截断到特定的行数</a><a aria-hidden="true" class="leve3 tocs-link" href="#计算函数">计算函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#粘性定位元素">粘性定位元素</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用带有空链接的属性选择器">使用带有空链接的属性选择器</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用-root-表示灵活类型">使用 :root 表示灵活类型</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<p>CSS 功能丰富，不仅仅是布局页面</p>
|
||
</div></div><div class="h3wrap-body"><h4 id="外部样式表"><a aria-hidden="true" tabindex="-1" href="#外部样式表"><span class="icon icon-link"></span></a>外部样式表</h4>
|
||
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./path/to/stylesheet/style.css<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <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/css<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
<h4 id="内部样式表"><a aria-hidden="true" tabindex="-1" href="#内部样式表"><span class="icon icon-link"></span></a>内部样式表</h4>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">linen</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<h4 id="内联样式"><a aria-hidden="true" tabindex="-1" href="#内联样式"><span class="icon icon-link"></span></a>内联样式</h4>
|
||
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</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">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 居中文本
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">18</span><span class="token unit">px</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 蓝色，18像素文本
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="添加-class-类"><a aria-hidden="true" tabindex="-1" href="#添加-class-类"><span class="icon icon-link"></span></a>添加 class 类</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>classname<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><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>class1 ... classn<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></code></pre>
|
||
<p>支持一个元素上的多个类</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="important"><a aria-hidden="true" tabindex="-1" href="#important"><span class="icon icon-link"></span></a>!important</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.post-title</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span> <span class="token important">!important</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>覆盖所有以前的样式规则</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选择器"><a aria-hidden="true" tabindex="-1" href="#选择器"><span class="icon icon-link"></span></a>选择器</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token id">#job-title</span></span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector">div<span class="token class">.hero</span></span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector">div <span class="token combinator">></span> p</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>查看: <a href="#css-%E9%80%89%E6%8B%A9%E5%99%A8">CSS 选择器</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="文本颜色"><a aria-hidden="true" tabindex="-1" href="#文本颜色"><span class="icon icon-link"></span></a>文本颜色</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#2a2aff</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">green</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">64</span><span class="token punctuation">,</span> <span class="token number">0.6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span><span class="token number">30</span> <span class="token number">100</span><span class="token unit">%</span> <span class="token number">50</span><span class="token unit">%</span> <span class="token operator">/</span> <span class="token number">0.6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>查看: <a href="#css-%E9%A2%9C%E8%89%B2">Colors</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="背景"><a aria-hidden="true" tabindex="-1" href="#背景"><span class="icon icon-link"></span></a>背景</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><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">"nyan-cat.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><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">"../image.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>查看: <a href="#css-%E8%83%8C%E6%99%AF">Backgrounds</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="字体"><a aria-hidden="true" tabindex="-1" href="#字体"><span class="icon icon-link"></span></a>字体</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.page-title</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Courier New"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>查看: <a href="#css-%E5%AD%97%E4%BD%93">Fonts</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="定位"><a aria-hidden="true" tabindex="-1" href="#定位"><span class="icon icon-link"></span></a>定位</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.box</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>另见: <a href="https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/">Position</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="动画"><a aria-hidden="true" tabindex="-1" href="#动画"><span class="icon icon-link"></span></a>动画</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token unit">ms</span> linear <span class="token number">0</span><span class="token unit">s</span> infinite<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> bounce <span class="token number">300</span><span class="token unit">ms</span> linear infinite<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>查看: <a href="#css-%E5%8A%A8%E7%94%BB">Animation</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="注释"><a aria-hidden="true" tabindex="-1" href="#注释"><span class="icon icon-link"></span></a>注释</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token comment">/* 这是一行注释 */</span>
|
||
</span><span class="code-line"><span class="token comment">/* 这是
|
||
</span></span><span class="code-line"><span class="token comment"> 多行注释 */</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flex-布局"><a aria-hidden="true" tabindex="-1" href="#flex-布局"><span class="icon icon-link"></span></a>Flex 布局</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector">div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>查看: <a href="#css-flexbox">Flexbox</a> | <a href="#css-flexbox-tricks">Flex Tricks</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="grid-布局"><a aria-hidden="true" tabindex="-1" href="#grid-布局"><span class="icon icon-link"></span></a>Grid 布局</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token id">#container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token unit">px</span><span class="token punctuation">)</span> <span class="token operator">/</span> auto-flow <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token id">#container</span> <span class="token combinator">></span> div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#8ca0ff</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>查看: <a href="#css-grid-layout">Grid Layout</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="变量和计数器"><a aria-hidden="true" tabindex="-1" href="#变量和计数器"><span class="icon icon-link"></span></a>变量和计数器</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">counter-set</span><span class="token punctuation">:</span> subsection<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">counter-increment</span><span class="token punctuation">:</span> subsection<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">counter-reset</span><span class="token punctuation">:</span> subsection <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token pseudo-class">:root</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token variable">--bg-color</span><span class="token punctuation">:</span> <span class="token color">brown</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector">element</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span><span class="token variable">--bg-color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>查看: <a href="#css-%E5%8A%A8%E6%80%81%E5%86%85%E5%AE%B9">动态内容</a></p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-选择器"><a aria-hidden="true" tabindex="-1" href="#css-选择器"><span class="icon icon-link"></span></a>CSS 选择器</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="示例"><a aria-hidden="true" tabindex="-1" href="#示例"><span class="icon icon-link"></span></a>示例</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
</div></div><div class="h3wrap-body"><h4 id="组选择器"><a aria-hidden="true" tabindex="-1" href="#组选择器"><span class="icon icon-link"></span></a>组选择器</h4>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">h1<span class="token punctuation">,</span> h2</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="链选择器"><a aria-hidden="true" tabindex="-1" href="#链选择器"><span class="icon icon-link"></span></a>链选择器</h4>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">h3<span class="token class">.section-heading</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="属性选择器"><a aria-hidden="true" tabindex="-1" href="#属性选择器"><span class="icon icon-link"></span></a>属性选择器</h4>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">div<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">attribute</span><span class="token operator">=</span><span class="token attr-value">"SomeValue"</span><span class="token punctuation">]</span></span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="第一个子选择器"><a aria-hidden="true" tabindex="-1" href="#第一个子选择器"><span class="icon icon-link"></span></a>第一个子选择器</h4>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">p<span class="token pseudo-class">:first-child</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="无子选择器"><a aria-hidden="true" tabindex="-1" href="#无子选择器"><span class="icon icon-link"></span></a>无子选择器</h4>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.box</span><span class="token pseudo-class">:empty</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">lime</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="基础"><a aria-hidden="true" tabindex="-1" href="#基础"><span class="icon icon-link"></span></a>基础</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>*</code></td><td align="left">所有元素</td></tr><tr><td align="left"><code>div</code></td><td align="left">所有 div 标签</td></tr><tr><td align="left"><code>.classname</code></td><td align="left">具有类的所有元素</td></tr><tr><td align="left"><code>#idname</code></td><td align="left">带 ID 的元素</td></tr><tr><td align="left"><code>div,p</code></td><td align="left">所有 div 和段落</td></tr><tr><td align="left"><code>#idname *</code></td><td align="left">#idname 中的所有元素</td></tr></tbody></table>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors">元素</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors">类</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors">ID</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors">通配</a> 选择器</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合器"><a aria-hidden="true" tabindex="-1" href="#组合器"><span class="icon icon-link"></span></a>组合器</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>div.classname</code></td><td align="left">具有特定类名的 div</td></tr><tr><td align="left"><code>div#idname</code></td><td align="left">具有特定 ID 的 div</td></tr><tr><td align="left"><code>div p</code></td><td align="left">div 中的段落</td></tr><tr><td align="left"><code>div > p</code></td><td align="left">div 子节点中的所有 <code>P</code> 标签</td></tr><tr><td align="left"><code>div + p</code></td><td align="left">div 之后的 <code>P</code> 标签</td></tr><tr><td align="left"><code>div ~ p</code></td><td align="left">div 前面的 <code>P</code> 标签</td></tr></tbody></table>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator">相邻兄弟</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/General_sibling_combinator">通用兄弟</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Child_combinator">子</a> 选择器</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="属性选择器-1"><a aria-hidden="true" tabindex="-1" href="#属性选择器-1"><span class="icon icon-link"></span></a>属性选择器</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>a[target]</code></td><td align="left">带有 <yel>target</yel> 属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attr">#</a></td></tr><tr><td align="left"><code>a[target="_blank"]</code></td><td align="left">在新标签中打开 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue">#</a></td></tr><tr><td align="left"><code>a[href^="/index"]</code></td><td align="left">以 <yel>/index</yel> 开头 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_4">#</a></td></tr><tr><td align="left"><code>[class|="chair"]</code></td><td align="left">以<yel>chair</yel>开头 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_3">#</a></td></tr><tr><td align="left"><code>[class*="chair"]</code></td><td align="left">包含<yel>chair</yel> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_6">#</a></td></tr><tr><td align="left"><code>[title~="chair"]</code></td><td align="left">包含单词 <yel>chair</yel> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_2">#</a></td></tr><tr><td align="left"><code>a[href$=".doc"]</code></td><td align="left">以 <yel>.doc</yel> 结尾 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_5">#</a></td></tr><tr><td align="left"><code>[type="button"]</code></td><td align="left">指定类型 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue">#</a></td></tr></tbody></table>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors">属性选择器</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="用户操作伪类"><a aria-hidden="true" tabindex="-1" href="#用户操作伪类"><span class="icon icon-link"></span></a>用户操作伪类</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>a:link </code></td><td align="left">链接正常 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:link">#</a></td></tr><tr><td align="left"><code>a:active </code></td><td align="left">链接处于点击状态 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:active">#</a></td></tr><tr><td align="left"><code>a:hover </code></td><td align="left">鼠标悬停链接 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover">#</a></td></tr><tr><td align="left"><code>a:visited </code></td><td align="left">访问链接 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited">#</a></td></tr></tbody></table>
|
||
<hr>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token comment">/* 未访问链接 */</span>
|
||
</span><span class="code-line"><span class="token selector">a<span class="token pseudo-class">:link</span></span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">/* 已访问链接 */</span>
|
||
</span><span class="code-line"><span class="token selector">a<span class="token pseudo-class">:visited</span></span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">purple</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">/* 用户鼠标悬停 */</span>
|
||
</span><span class="code-line"><span class="token selector">a<span class="token pseudo-class">:hover</span></span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">yellow</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">/* 激活链接 */</span>
|
||
</span><span class="code-line"><span class="token selector">a<span class="token pseudo-class">:active</span></span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="伪类"><a aria-hidden="true" tabindex="-1" href="#伪类"><span class="icon icon-link"></span></a>伪类</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>p::after</code></td><td align="left">在 p 之后添加内容 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after">#</a></td></tr><tr><td align="left"><code>p::before</code></td><td align="left">在 p 之前添加内容 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before">#</a></td></tr><tr><td align="left"><code>p::first-letter</code></td><td align="left">p中的第一个字母 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::first-letter">#</a></td></tr><tr><td align="left"><code>p::first-line</code></td><td align="left">p 中的第一行 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::first-line">#</a></td></tr><tr><td align="left"><code>::selection</code></td><td align="left">由用户选择 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection">#</a></td></tr><tr><td align="left"><code>::placeholder</code></td><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder">占位符</a> 属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder">#</a></td></tr><tr><td align="left"><code>:root</code></td><td align="left">文档根元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root">#</a></td></tr><tr><td align="left"><code>:target</code></td><td align="left">突出显示活动锚点 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target">#</a></td></tr><tr><td align="left"><code>div:empty</code></td><td align="left">没有子元素的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty">#</a></td></tr><tr><td align="left"><code>p:lang(en)</code></td><td align="left">带有 en 语言属性的 P <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:lang">#</a></td></tr><tr><td align="left"><code>:not(span)</code></td><td align="left">不是跨度的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not">#</a></td></tr><tr><td align="left"><code>:host</code></td><td align="left">shadowDOM 中选择自定义元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root">#</a></td></tr><tr><td align="left"><code>::backdrop</code></td><td align="left">处于全屏模式的元素样式 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::backdrop">#</a></td></tr><tr><td align="left"><code>::marker</code></td><td align="left"><code>li</code> 项目符号或者数字 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::marker">#</a></td></tr><tr><td align="left"><code>::file-selector-button</code></td><td align="left">type="file" <code>input</code> 按钮 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::file-selector-button">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="输入伪类"><a aria-hidden="true" tabindex="-1" href="#输入伪类"><span class="icon icon-link"></span></a>输入伪类</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>input:checked</code></td><td align="left">检查 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked">#</a></td></tr><tr><td align="left"><code>input:disabled</code></td><td align="left">禁用 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:disabled">#</a></td></tr><tr><td align="left"><code>input:enabled</code></td><td align="left">启用的 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:enabled">#</a></td></tr><tr><td align="left"><code>input:default</code></td><td align="left">有默认值的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:default">#</a></td></tr><tr><td align="left"><code>input:blank</code></td><td align="left">空的输入框 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:blank">#</a></td></tr><tr><td align="left"><code>input:focus</code></td><td align="left"><code>input</code> 有焦点 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus">#</a></td></tr><tr><td align="left"><code>input:in-range</code></td><td align="left">范围内的值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:in-range">#</a></td></tr><tr><td align="left"><code>input:out-of-range</code></td><td align="left"><code>input</code> 值超出范围 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:out-of-range">#</a></td></tr><tr><td align="left"><code>input:valid</code></td><td align="left"><code>input</code> 有效值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:valid">#</a></td></tr><tr><td align="left"><code>input:invalid</code></td><td align="left"><code>input</code> 无效值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:invalid">#</a></td></tr><tr><td align="left"><code>input:optional</code></td><td align="left">没有必需的属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:optional">#</a></td></tr><tr><td align="left"><code>input:required</code></td><td align="left">带有必需属性的 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:required">#</a></td></tr><tr><td align="left"><code>input:read-only</code></td><td align="left">具有只读属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-only">#</a></td></tr><tr><td align="left"><code>input:read-write</code></td><td align="left">没有只读属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-write">#</a></td></tr><tr><td align="left"><code>input:indeterminate</code></td><td align="left">带有 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:indeterminate">indeterminate</a> 状态 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:indeterminate">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="结构伪类"><a aria-hidden="true" tabindex="-1" href="#结构伪类"><span class="icon icon-link"></span></a>结构伪类</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>p:first-child</code></td><td align="left">第一个孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-child">#</a></td></tr><tr><td align="left"><code>p:last-child</code></td><td align="left">最后一个孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-child">#</a></td></tr><tr><td align="left"><code>p:first-of-type</code></td><td align="left">首先是某种类型 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-of-type">#</a></td></tr><tr><td align="left"><code>p:last-of-type</code></td><td align="left">某种类型的最后一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-of-type">#</a></td></tr><tr><td align="left"><code>p:nth-child(2)</code></td><td align="left">其父母的第二个孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child">#</a></td></tr><tr><td align="left"><code>p:nth-child(3n42)</code></td><td align="left">Nth-child(an + b) 公式 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child">#</a></td></tr><tr><td align="left"><code>p:nth-last-child(2)</code></td><td align="left">后面的二孩 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-child">#</a></td></tr><tr><td align="left"><code>p:nth-of-type(2)</code></td><td align="left">其父级的第二个 p <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type">#</a></td></tr><tr><td align="left"><code>p:nth-last-of-type(2)</code></td><td align="left">...从后面 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-of-type">#</a></td></tr><tr><td align="left"><code>p:only-of-type</code></td><td align="left">其父级的唯一性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type">#</a></td></tr><tr><td align="left"><code>p:only-child</code></td><td align="left">其父母的唯一孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child">#</a></td></tr><tr><td align="left"><code>:is(header, div) p</code></td><td align="left">可以选择的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is">#</a></td></tr><tr><td align="left"><code>:where(header, div) p</code></td><td align="left">与 <code>:is</code> 相同 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where">#</a></td></tr><tr><td align="left"><code>a:has(> img)</code></td><td align="left">包含 <code>img</code> 元素的 <code>a</code> 元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has">#</a></td></tr><tr><td align="left"><code>::first-letter</code></td><td align="left">第一行的第一个字母 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-letter">#</a></td></tr><tr><td align="left"><code>::first-line</code></td><td align="left">第一行应用样式 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-line">#</a></td></tr></tbody></table>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-字体"><a aria-hidden="true" tabindex="-1" href="#css-字体"><span class="icon icon-link"></span></a>CSS 字体</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="属性"><a aria-hidden="true" tabindex="-1" href="#属性"><span class="icon icon-link"></span></a>属性</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">属性</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>font-family:</code></td><td align="left">字体族名或通用字体族名 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family">#</a></td></tr><tr><td align="left"><code>font-size:</code></td><td align="left">字体的大小 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size">#</a></td></tr><tr><td align="left"><code>letter-spacing:</code></td><td align="left">文本字符的间距 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/letter-spacing">#</a></td></tr><tr><td align="left"><code>line-height:</code></td><td align="left">多行文本间距 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height">#</a></td></tr><tr><td align="left"><code>font-weight:</code></td><td align="left">粗细程度 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight">#</a></td></tr><tr><td align="left"><code>font-style:</code></td><td align="left">字体样式 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-style">#</a></td></tr><tr><td align="left"><code>text-decoration:</code></td><td align="left">文本的修饰线外观 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration">#</a></td></tr><tr><td align="left"><code>text-align:</code></td><td align="left">相对它的块父元素对齐 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align">#</a></td></tr><tr><td align="left"><code>text-transform:</code></td><td align="left">指定文本大小写 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-transform">#</a></td></tr></tbody></table>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font">Font</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 style="background:#ffeb3bcf;color:#333;" id="速记"><a aria-hidden="true" tabindex="-1" href="#速记"><span class="icon icon-link"></span></a>速记</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2&style=background:#ffeb3bcf;color:#333;-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">font</span><span class="token punctuation">:</span> italic <span class="token number">400</span> <span class="token number">14</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">1.5</span> sans-serif
|
||
</span><span class="code-line"> ┈┈┬┈┈┈ ┈┬┈ ┈┬┈┈ ┈┬┈ ┈┬┈┈┈┈┈┈┈┈
|
||
</span><span class="code-line"> 样式 粗细 大小<span class="token punctuation">(</span>必需的<span class="token punctuation">)</span> 行高 字体<span class="token punctuation">(</span>必需的<span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="示例-1"><a aria-hidden="true" tabindex="-1" href="#示例-1"><span class="icon icon-link"></span></a>示例</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span><span class="token unit">pt</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">letter-spacing</span><span class="token punctuation">:</span> <span class="token number">0.02</span><span class="token unit">em</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="大小写"><a aria-hidden="true" tabindex="-1" href="#大小写"><span class="icon icon-link"></span></a>大小写</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 首字母大写 Hello */</span>
|
||
</span><span class="code-line"> <span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 字母大写 HELLO */</span>
|
||
</span><span class="code-line"> <span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 字母小写 hello */</span>
|
||
</span><span class="code-line"> <span class="token property">text-transform</span><span class="token punctuation">:</span> lowercase<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="font-face"><a aria-hidden="true" tabindex="-1" href="#font-face"><span class="icon icon-link"></span></a>@font-face</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Glegoo'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">src</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">'../Glegoo.woff'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-颜色"><a aria-hidden="true" tabindex="-1" href="#css-颜色"><span class="icon icon-link"></span></a>CSS 颜色</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="命名颜色"><a aria-hidden="true" tabindex="-1" href="#命名颜色"><span class="icon icon-link"></span></a>命名颜色</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">orange</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">tan</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">rebeccapurple</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>更多标准<a href="./colors-named.html">颜色名称</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="十六进制颜色"><a aria-hidden="true" tabindex="-1" href="#十六进制颜色"><span class="icon icon-link"></span></a>十六进制颜色</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#090</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#009900</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#090a</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#009900aa</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="rgb-颜色"><a aria-hidden="true" tabindex="-1" href="#rgb-颜色"><span class="icon icon-link"></span></a>rgb() 颜色</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">64</span><span class="token punctuation">,</span> <span class="token number">0.6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">64</span><span class="token punctuation">,</span> <span class="token number">0.6</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">34</span> <span class="token number">12</span> <span class="token number">64</span> <span class="token operator">/</span> <span class="token number">0.6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">34</span> <span class="token number">12</span> <span class="token number">64</span> <span class="token operator">/</span> <span class="token number">0.3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">34.0</span> <span class="token number">12</span> <span class="token number">64</span> <span class="token operator">/</span> <span class="token number">60</span><span class="token unit">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">34.6</span> <span class="token number">12</span> <span class="token number">64</span> <span class="token operator">/</span> <span class="token number">30</span><span class="token unit">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="hsl-颜色"><a aria-hidden="true" tabindex="-1" href="#hsl-颜色"><span class="icon icon-link"></span></a>HSL 颜色</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">,</span> <span class="token number">0.6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color"><span class="token function">hsla</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">,</span> <span class="token number">0.6</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span><span class="token number">30</span> <span class="token number">100</span><span class="token unit">%</span> <span class="token number">50</span><span class="token unit">%</span> <span class="token operator">/</span> <span class="token number">0.6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span><span class="token number">30</span> <span class="token number">100</span><span class="token unit">%</span> <span class="token number">50</span><span class="token unit">%</span> <span class="token operator">/</span> <span class="token number">0.6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span><span class="token number">30.0</span> <span class="token number">100</span><span class="token unit">%</span> <span class="token number">50</span><span class="token unit">%</span> <span class="token operator">/</span> <span class="token number">60</span><span class="token unit">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span><span class="token number">30.2</span> <span class="token number">100</span><span class="token unit">%</span> <span class="token number">50</span><span class="token unit">%</span> <span class="token operator">/</span> <span class="token number">60</span><span class="token unit">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="其它"><a aria-hidden="true" tabindex="-1" href="#其它"><span class="icon icon-link"></span></a>其它</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">transparent</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> currentcolor<span class="token punctuation">;</span> <span class="token comment">/* 关键字 */</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="全局值"><a aria-hidden="true" tabindex="-1" href="#全局值"><span class="icon icon-link"></span></a>全局值</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token comment">/* 全局值 */</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">color</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-背景"><a aria-hidden="true" tabindex="-1" href="#css-背景"><span class="icon icon-link"></span></a>CSS 背景</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="属性-1"><a aria-hidden="true" tabindex="-1" href="#属性-1"><span class="icon icon-link"></span></a>属性</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">属性</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>background:</code></td><td align="left"><em>(<a href="#%E9%80%9F%E8%AE%B0-1">速记</a>)</em></td></tr><tr><td align="left"><code>background-color:</code></td><td align="left">查看: <a href="#css-%E9%A2%9C%E8%89%B2">Colors</a></td></tr><tr><td align="left"><code>background-image:</code></td><td align="left">一个或者多个背景图像</td></tr><tr><td align="left"><code>background-position:</code></td><td align="left">背景图片设置初始位置</td></tr><tr><td align="left"><code>background-size:</code></td><td align="left">背景图片大小</td></tr><tr><td align="left"><code>background-clip:</code></td><td align="left">背景(图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面</td></tr><tr><td align="left"><code>background-repeat:</code></td><td align="left">图像重复方式</td></tr><tr><td align="left"><code>background-attachment:</code></td><td align="left"><code>scroll</code>/<code>fixed</code>/<code>local</code></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 style="background:#ffeb3bcf;color:#333;" id="速记-1"><a aria-hidden="true" tabindex="-1" href="#速记-1"><span class="icon icon-link"></span></a>速记</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2&style=background:#ffeb3bcf;color:#333;-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode color">#ff0</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>a.jpg<span class="token punctuation">)</span></span> left top <span class="token operator">/</span> <span class="token number">100</span><span class="token unit">px</span> auto no-repeat fixed<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token hexcode color">#abc</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>b.png<span class="token punctuation">)</span></span> center center <span class="token operator">/</span> cover repeat-x local<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> ┈┬┈┈ ┈┬┈┈┈┈┈┈┈ ┈┬┈┈ ┈┬┈ ┈┈┬┈┈┈┈┈┈┈ ┈┈┬┈┈┈┈┈┈ ┈┈┬┈┈┈
|
||
</span><span class="code-line"> 颜色 图片 位置x 位置x 图片大小 图像重复方式 位置是在视口内固定
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="示例-2"><a aria-hidden="true" tabindex="-1" href="#示例-2"><span class="icon icon-link"></span></a>示例</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>img_flwr.gif<span class="token punctuation">)</span></span> right bottom no-repeat<span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>paper.gif<span class="token punctuation">)</span></span> left top repeat<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>img_man.jpg<span class="token punctuation">)</span></span> no-repeat center<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token color"><span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">36</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token number">90</span><span class="token unit">deg</span><span class="token punctuation">,</span> <span class="token color"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">36</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span></span> <span class="token number">0</span><span class="token unit">%</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token color"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">13</span><span class="token punctuation">,</span><span class="token number">232</span><span class="token punctuation">,</span><span class="token number">230</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span></span> <span class="token number">35</span><span class="token unit">%</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token color"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">212</span><span class="token punctuation">,</span><span class="token number">255</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span></span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-盒子模型"><a aria-hidden="true" tabindex="-1" href="#css-盒子模型"><span class="icon icon-link"></span></a>CSS 盒子模型</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="最大值最小值"><a aria-hidden="true" tabindex="-1" href="#最大值最小值"><span class="icon icon-link"></span></a>最大值/最小值</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.column</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token comment">/* 最大宽度 200 像素 */</span>
|
||
</span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">500</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token comment">/* 宽度 500 像素 */</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width">max-width</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-width">min-width</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-height">max-height</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height">min-height</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="边距补白"><a aria-hidden="true" tabindex="-1" href="#边距补白"><span class="icon icon-link"></span></a>边距/补白</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.block-one</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token comment">/* 边距 20 像素 */</span>
|
||
</span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token comment">/* 补白 10 像素 */</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin">边距(margin)</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding">补白(padding)</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="box-sizing"><a aria-hidden="true" tabindex="-1" href="#box-sizing"><span class="icon icon-link"></span></a>Box-sizing</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 设置的边框和补白的值是包含在 width 内的 */</span>
|
||
</span><span class="code-line"> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Box-sizing">box-sizing</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="能见度"><a aria-hidden="true" tabindex="-1" href="#能见度"><span class="icon icon-link"></span></a>能见度</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.invisible-elements</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token comment">/* 隐藏元素 */</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/visibility">Visibility</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="auto-关键字"><a aria-hidden="true" tabindex="-1" href="#auto-关键字"><span class="icon icon-link"></span></a>Auto 关键字</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 览器自己选择一个合适的外边距 */</span>
|
||
</span><span class="code-line"> <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin">边距(margin)</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="溢出overflow"><a aria-hidden="true" tabindex="-1" href="#溢出overflow"><span class="icon icon-link"></span></a>溢出(Overflow)</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.small-block</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 浏览器总是显示滚动条 */</span>
|
||
</span><span class="code-line"> <span class="token property">overflow</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow">溢出(overflow)</a></p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist col-5"><div class="wrap-header h2wrap"><h2 id="css-动画"><a aria-hidden="true" tabindex="-1" href="#css-动画"><span class="icon icon-link"></span></a>CSS 动画</h2><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-5-->
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist col-span-5"><div class="wrap-header h3wrap"><h3 style="background:#ffeb3bcf;color:#333;" id="速记-2"><a aria-hidden="true" tabindex="-1" href="#速记-2"><span class="icon icon-link"></span></a>速记</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-5&style=background:#ffeb3bcf;color:#333;-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> bounce <span class="token number">300</span><span class="token unit">ms</span> linear <span class="token number">100</span><span class="token unit">ms</span> infinite alternate-reverse both reverse
|
||
</span><span class="code-line"> ┈┬┈┈ ┈┬┈┈┈ ┈┬┈┈┈┈ ┈┈┬┈┈ ┈┈┈┬┈┈┈┈ ┈┈┬┈┈┈┈┈┈┈┈┈┈┈┈┈┈ ┈┈┬┈┈┈ ┈┈┬┈┈┈
|
||
</span><span class="code-line"> 动画名 动画时间 缓动函数 延迟 运行的次数 动画是否反向播放 如何将样式应用于其目标 是否运行或者暂停
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2 col-span-3"><div class="wrap-header h3wrap"><h3 id="属性-2"><a aria-hidden="true" tabindex="-1" href="#属性-2"><span class="icon icon-link"></span></a>属性</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2 col-span-3-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">属性</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>animation:</code></td><td align="left"><em>(<a href="#%E9%80%9F%E8%AE%B0-2">速记</a>)</em></td></tr><tr><td align="left"><code>animation-name:</code></td><td align="left">动画名 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-name">#</a></td></tr><tr><td align="left"><code>animation-duration:</code></td><td align="left">动画周期的时长 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-duration">#</a></td></tr><tr><td align="left"><code>animation-timing-function:</code></td><td align="left">缓动函数 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function">#</a></td></tr><tr><td align="left"><code>animation-delay:</code></td><td align="left">延迟 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-delay">#</a></td></tr><tr><td align="left"><code>animation-iteration-count:</code></td><td align="left">运行的次数 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-iteration-count">#</a></td></tr><tr><td align="left"><code>animation-direction:</code></td><td align="left">动画是否反向播放 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-direction">#</a></td></tr><tr><td align="left"><code>animation-fill-mode:</code></td><td align="left">如何将样式应用于其目标 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode">#</a></td></tr><tr><td align="left"><code>animation-play-state:</code></td><td align="left">是否运行或者暂停 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-play-state">#</a></td></tr></tbody></table>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation">动画(Animation)</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="示例-3"><a aria-hidden="true" tabindex="-1" href="#示例-3"><span class="icon icon-link"></span></a>示例</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token comment">/* @keyframes duration | timing-function | delay |
|
||
</span></span><span class="code-line"><span class="token comment"> iteration-count | direction | fill-mode | play-state | name */</span>
|
||
</span><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">s</span> ease-in <span class="token number">1</span><span class="token unit">s</span> <span class="token number">2</span> reverse both paused slidein<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">/* @keyframes duration | timing-function | delay | name */</span>
|
||
</span><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">s</span> linear <span class="token number">1</span><span class="token unit">s</span> slidein<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">/* @keyframes duration | name */</span>
|
||
</span><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">s</span> slidein<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> <span class="token number">4</span><span class="token unit">s</span> linear <span class="token number">0</span><span class="token unit">s</span> infinite alternate move_eye<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> bounce <span class="token number">300</span><span class="token unit">ms</span> linear <span class="token number">0</span><span class="token unit">s</span> infinite normal<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> bounce <span class="token number">300</span><span class="token unit">ms</span> linear infinite<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> bounce <span class="token number">300</span><span class="token unit">ms</span> linear infinite alternate-reverse<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">animation</span><span class="token punctuation">:</span> bounce <span class="token number">300</span><span class="token unit">ms</span> linear <span class="token number">2</span><span class="token unit">s</span> infinite alternate-reverse forwards normal<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="javascript-事件"><a aria-hidden="true" tabindex="-1" href="#javascript-事件"><span class="icon icon-link"></span></a>Javascript 事件</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">.</span><span class="token method function property-access">one</span><span class="token punctuation">(</span><span class="token string">'webkitAnimationEnd oanimationend msAnimationEnd animationend'</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-flexbox"><a aria-hidden="true" tabindex="-1" href="#css-flexbox"><span class="icon icon-link"></span></a>CSS Flexbox</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="简单实例"><a aria-hidden="true" tabindex="-1" href="#简单实例"><span class="icon icon-link"></span></a>简单实例</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span> <span class="token combinator">></span> div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span> <span class="token number">1</span> auto<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="容器"><a aria-hidden="true" tabindex="-1" href="#容器"><span class="icon icon-link"></span></a>容器</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"> <span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span> <span class="token comment">/* ltr - 行(左向右) ▶ */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">flex-direction</span><span class="token punctuation">:</span> row-reverse<span class="token punctuation">;</span> <span class="token comment">/* rtl - 行(右向左) ◀ */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span> <span class="token comment">/* top-bottom ▼ */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column-reverse<span class="token punctuation">;</span> <span class="token comment">/* bottom-top ▲ */</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token comment">/* 摆放到一行 */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span> <span class="token comment">/* 被打断到多个行中 */</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"> <span class="token property">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token comment">/* 垂直对齐 - 顶部 */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">align-items</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span> <span class="token comment">/* 垂直对齐 - 底部 */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* 垂直对齐 - 中间 */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">align-items</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span> <span class="token comment">/* 所有人都一样的高度 (默认) */</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token comment">/* [◀◀◀ ] */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* [ ■■■ ] */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span> <span class="token comment">/* [ ▶▶▶] */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> <span class="token comment">/* [◀ ■ ▶] */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span> <span class="token comment">/* [ ■ ■ ■ ] */</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-evenly<span class="token punctuation">;</span> <span class="token comment">/* [ ■ ■ ■ ] */</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="子元素"><a aria-hidden="true" tabindex="-1" href="#子元素"><span class="icon icon-link"></span></a>子元素</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span> <span class="token combinator">></span> div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">/* 这个: */</span>
|
||
</span><span class="code-line"> <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span> <span class="token number">0</span> auto<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 相当于这个： */</span>
|
||
</span><span class="code-line"> <span class="token property">flex-grow</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">flex-shrink</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">flex-basis</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token property">order</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token property">align-self</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token comment">/* left */</span>
|
||
</span><span class="code-line"> <span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token comment">/* right */</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="justify-content"><a aria-hidden="true" tabindex="-1" href="#justify-content"><span class="icon icon-link"></span></a>justify-content</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start | flex-end | center | space-between
|
||
</span></code></pre>
|
||
<p><code>flex-start</code>：左对齐(默认值)</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆╭┈┈╮╭┈╮╭┈┈┈╮ ┆
|
||
</span><span class="code-line">┆╰┈┈╯╰┈╯╰┈┈┈╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span></code></pre>
|
||
<p><code>flex-end</code>：右对齐</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭┈┈╮╭┈╮╭┈┈┈╮┆
|
||
</span><span class="code-line">┆ ╰┈┈╯╰┈╯╰┈┈┈╯┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span></code></pre>
|
||
<p><code>center</code>： 居中</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭┈┈╮╭┈╮╭┈┈┈╮ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯╰┈╯╰┈┈┈╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span></code></pre>
|
||
<p><code>space-between</code>：两端对齐，项目之间的间隔都相等</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆╭┈┈╮ ╭┈╮ ╭┈┈┈╮┆
|
||
</span><span class="code-line">┆╰┈┈╯ ╰┈╯ ╰┈┈┈╯┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span></code></pre>
|
||
<p><code>space-around</code>：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭┈┈╮ ╭┈╮ ╭┈┈┈╮ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯ ╰┈╯ ╰┈┈┈╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span></code></pre>
|
||
<p>上面示例，假设主轴为从左到右</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flex-wrap"><a aria-hidden="true" tabindex="-1" href="#flex-wrap"><span class="icon icon-link"></span></a>flex-wrap</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap | wrap | wrap-reverse<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><code>nowrap</code>：不换行(默认)</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line">╭<span class="token number">1</span>╮╭<span class="token number">2</span>╮╭<span class="token number">3</span>╮╭<span class="token number">4</span>╮╭<span class="token number">5</span>╮╭<span class="token number">6</span>╮╭<span class="token number">7</span>╮╭<span class="token number">8</span>╮╭<span class="token number">9</span>╮╭<span class="token number">10</span>╮
|
||
</span><span class="code-line">╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈┈╯
|
||
</span></code></pre>
|
||
<p><code>wrap</code>：换行，第一行在 <strong><code>上方</code></strong></p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line">╭<span class="token number">1</span>┈╮ ╭<span class="token number">2</span>┈╮ ╭<span class="token number">3</span>┈╮ ╭<span class="token number">4</span>┈╮ ╭<span class="token number">5</span>┈╮ ╭<span class="token number">6</span>┈╮ ╭<span class="token number">7</span>┈╮
|
||
</span><span class="code-line">╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯
|
||
</span><span class="code-line">╭<span class="token number">8</span>┈╮ ╭<span class="token number">9</span>┈╮ ╭<span class="token number">10</span>╮
|
||
</span><span class="code-line">╰┈┈╯ ╰┈┈╯ ╰┈┈╯
|
||
</span></code></pre>
|
||
<p><code>wrap-reverse</code>：换行，第一行在 <strong><code>下方</code></strong></p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line">╭<span class="token number">8</span>┈╮ ╭<span class="token number">9</span>┈╮ ╭<span class="token number">10</span>╮
|
||
</span><span class="code-line">╰┈┈╯ ╰┈┈╯ ╰┈┈╯
|
||
</span><span class="code-line">╭<span class="token number">1</span>┈╮ ╭<span class="token number">2</span>┈╮ ╭<span class="token number">3</span>┈╮ ╭<span class="token number">4</span>┈╮ ╭<span class="token number">5</span>┈╮ ╭<span class="token number">6</span>┈╮ ╭<span class="token number">7</span>┈╮
|
||
</span><span class="code-line">╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯
|
||
</span></code></pre>
|
||
<p>项目都排在一条线（又称"轴线"）上</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flex-direction"><a aria-hidden="true" tabindex="-1" href="#flex-direction"><span class="icon icon-link"></span></a>flex-direction</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">flex-direction</span><span class="token punctuation">:</span> row | row-reverse | column | column-reverse<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">╭┈┈╮ ▲ ╭┈┈╮ ┆
|
||
</span><span class="code-line">╰┈┈╯ ┆ ╰┈┈╯ ┆
|
||
</span><span class="code-line">╭┈┈╮ ┆ ╭┈┈╮ ┆
|
||
</span><span class="code-line">╰┈┈╯ ┆ ╰┈┈╯ ┆ ┈┈┈┈┈┈┈┈┈┈┈▶ ◀┈┈┈┈┈┈┈┈┈┈┈
|
||
</span><span class="code-line">╭┈┈╮ ┆ ╭┈┈╮ ┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮
|
||
</span><span class="code-line">╰┈┈╯ ┆ ╰┈┈╯ ▼ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯
|
||
</span><span class="code-line">┈┬┈┈┈┈┈┈ ┈┬┈┈┈┈┈┈ ┈┬┈┈┈┈┈┈┈┈┈┈┈ ┈┬┈┈┈┈┈┈┈┈┈┈┈
|
||
</span><span class="code-line">column-reverse <span class="token function">column</span> row row-reverse
|
||
</span></code></pre>
|
||
<p>属性决定主轴的方向（即项目的排列方向）</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="align-items"><a aria-hidden="true" tabindex="-1" href="#align-items"><span class="icon icon-link"></span></a>align-items</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">align-items</span><span class="token punctuation">:</span> flex-start | flex-end | center | baseline | stretch<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"> ▶ <span class="token function">flex-start</span><span class="token punctuation">(</span>起点对齐<span class="token punctuation">)</span> ▶ <span class="token function">flex-end</span><span class="token punctuation">(</span>终点对齐<span class="token punctuation">)</span>
|
||
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆ ┆ ┆
|
||
</span><span class="code-line">┆ ┆ ┆ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ╭┈┈╮ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯ ┆ ┆ ╰┈┈╯ ┆ ┆ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ┆ ┆ ╭┈┈╮ ┆ ┆ ┆
|
||
</span><span class="code-line">┆ ┆ ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span><span class="code-line"> ▶ <span class="token function">center</span><span class="token punctuation">(</span>中点对齐<span class="token punctuation">)</span> ▶ <span class="token function">stretch</span><span class="token punctuation">(</span>占满整个容器的高度<span class="token punctuation">)</span>
|
||
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆
|
||
</span><span class="code-line">┆ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆
|
||
</span><span class="code-line">┆ ┆ ┆ ┆ ┆ ╭┈┈╮ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆
|
||
</span><span class="code-line">┆ ┆ ┆ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯ ┆ ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span><span class="code-line"> ▶ <span class="token function">baseline</span><span class="token punctuation">(</span>第一行文字的基线对齐<span class="token punctuation">)</span>
|
||
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈╮ ┆
|
||
</span><span class="code-line">┆ ┆ ┆ ╭┈┈┈┈╮ ╭┈┈┈┈╮ ┆ ┆ ╭┈┈┈┈╮╭┈┈┈┈╮┆
|
||
</span><span class="code-line">┆ ┆ text ┆ ┆text┆ ┆text┆ ┆ text ┆ ┆text┆┆text┆┆
|
||
</span><span class="code-line">┆ ┆ ┆ ╰┈┈┈┈╯ ┆ ┆ ┆ ┆ ╰┈┈┈┈╯┆ ┆┆
|
||
</span><span class="code-line">┆ ╰┈┈┈┈┈┈╯ ╰┈┈┈┈╯ ╰┈┈┈┈┈┈╯ ╰┈┈┈┈╯┆
|
||
</span><span class="code-line">┆ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="align-content"><a aria-hidden="true" tabindex="-1" href="#align-content"><span class="icon icon-link"></span></a>align-content</h3><div class="wrap-body">
|
||
<pre class="wrap-text "><code class="language-css code-highlight"><span class="code-line"><span class="token property">align-content</span><span class="token punctuation">:</span> flex-start | flex-end | center | space-between | space-around | stretch<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
<hr>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"> ▶ <span class="token function">flex-start</span><span class="token punctuation">(</span>起点对齐<span class="token punctuation">)</span> ▶ <span class="token function">flex-end</span><span class="token punctuation">(</span>终点对齐<span class="token punctuation">)</span>
|
||
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆ ┆ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆ ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆
|
||
</span><span class="code-line">┆ ╭┈┈┈╮╭╮ ┆ ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆
|
||
</span><span class="code-line">┆ ╰┈┈┈╯╰╯ ┆ ┆ ╭┈┈┈╮╭╮ ┆
|
||
</span><span class="code-line">┆ ┆ ┆ ╰┈┈┈╯╰╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span><span class="code-line"> ▶ <span class="token function">center</span><span class="token punctuation">(</span>中点对齐<span class="token punctuation">)</span> ▶ <span class="token function">stretch</span><span class="token punctuation">(</span>满整个交叉轴<span class="token punctuation">)</span>
|
||
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ┆ ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆
|
||
</span><span class="code-line">┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆ ┆ ┆ ┆┆ ┆┆ ┆┆┆┆ ┆ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆ ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆
|
||
</span><span class="code-line">┆ ╭┈┈┈╮╭╮ ┆ ┆ ╭┈┈┈╮╭╮╭┈╮ ┆
|
||
</span><span class="code-line">┆ ╰┈┈┈╯╰╯ ┆ ┆ ┆ ┆┆┆┆ ┆ ┆
|
||
</span><span class="code-line">┆ ┆ ┆ ╰┈┈┈╯╰╯╰┈╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span><span class="code-line"> ▶ <span class="token function">space-between</span><span class="token punctuation">(</span>两端对齐<span class="token punctuation">)</span> ▶ <span class="token function">space-around</span><span class="token punctuation">(</span>均匀分布项目<span class="token punctuation">)</span>
|
||
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆ ┆ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆ ┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆
|
||
</span><span class="code-line">┆ ┆ ┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆
|
||
</span><span class="code-line">┆ ┆ ┆ ┆
|
||
</span><span class="code-line">┆ ┆ ┆ ╭┈┈╮ ┆
|
||
</span><span class="code-line">┆ ╭┈┈╮ ┆ ┆ ╰┈┈╯ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯ ┆ ┆ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="order"><a aria-hidden="true" tabindex="-1" href="#order"><span class="icon icon-link"></span></a>order</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.item</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">order</span><span class="token punctuation">:</span> <integer><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭<span class="token number">1</span>┈╮ ╭<span class="token number">1</span>┈┈╮ ╭<span class="token number">1</span>┈╮ ╭<span class="token number">2</span>┈╮ ╭<span class="token number">3</span>┈┈┈┈┈┈╮ ┆ ┆ ╭<span class="token number">2</span>┈┈┈┈╮ ┆
|
||
</span><span class="code-line">┆ ╰┈┈╯ ╰┈┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈┈┈┈┈┈╯ ┆ ┆ ╰┈┈┈┈┈╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ╭<span class="token number">2</span>┈┈┈┈╮ ┆
|
||
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈╯ ┆
|
||
</span><span class="code-line">┆ ╭-┈┈╮ ╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮ ┆ ┆ ╭<span class="token number">99</span>┈┈┈╮ ┆
|
||
</span><span class="code-line">┆ ┆<span class="token number">-1</span> ┆ ┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">5</span> ┆ ┆ ┆ ┆ ┆ ┆
|
||
</span><span class="code-line">┆ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯ ┆ ┆ ╰┈┈┈┈┈╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
|
||
</span></code></pre>
|
||
<p>属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/order">order</a> 定义项目的排列顺序。数值越小，排列越靠前，默认为 <code>0</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flex-grow"><a aria-hidden="true" tabindex="-1" href="#flex-grow"><span class="icon icon-link"></span></a>flex-grow</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.item</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">flex-grow</span><span class="token punctuation">:</span> <number><span class="token punctuation">;</span> <span class="token comment">/* default 0 */</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭┈┈<span class="token number">1</span>┈┈╮╭┈┈<span class="token number">2</span>┈┈╮╭┈┈<span class="token number">1</span>┈┈╮ ┆
|
||
</span><span class="code-line">┆ ╰┈┈┈┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈┈╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ ╭┈<span class="token number">1</span>┈╮╭┈┈┈┈<span class="token number">2</span>┈┈┈┈╮╭┈<span class="token number">1</span>┈╮ ┆
|
||
</span><span class="code-line">┆ ╰┈┈┈╯╰┈┈┈┈┈┈┈┈┈╯╰┈┈┈╯ ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span></code></pre>
|
||
<p>属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow">flex-grow</a> 定义项目的放大比例，默认为<code>0</code>，即如果存在剩余空间，也不放大</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-flexbox-技巧"><a aria-hidden="true" tabindex="-1" href="#css-flexbox-技巧"><span class="icon icon-link"></span></a>CSS Flexbox 技巧</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="垂直中心"><a aria-hidden="true" tabindex="-1" href="#垂直中心"><span class="icon icon-link"></span></a>垂直中心</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token class">.container</span> <span class="token combinator">></span> div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="垂直中心-2"><a aria-hidden="true" tabindex="-1" href="#垂直中心-2"><span class="icon icon-link"></span></a>垂直中心 (2)</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 垂直的 */</span>
|
||
</span><span class="code-line"> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 水平的 */</span>
|
||
</span><span class="code-line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="重新排序"><a aria-hidden="true" tabindex="-1" href="#重新排序"><span class="icon icon-link"></span></a>重新排序</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span> <span class="token combinator">></span> <span class="token class">.top</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">order</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token class">.container</span> <span class="token combinator">></span> <span class="token class">.bottom</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">order</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="移动布局"><a aria-hidden="true" tabindex="-1" href="#移动布局"><span class="icon icon-link"></span></a>移动布局</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token class">.container</span> <span class="token combinator">></span> <span class="token class">.top</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token class">.container</span> <span class="token combinator">></span> <span class="token class">.content</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span> <span class="token number">0</span> auto<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>一个固定高度的顶部栏和一个动态高度的内容区域</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="table-like-像表格"><a aria-hidden="true" tabindex="-1" href="#table-like-像表格"><span class="icon icon-link"></span></a>Table-like 像表格</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">/* 这里的“px”值只是建议的百分比 */</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token class">.container</span> <span class="token combinator">></span> <span class="token class">.checkbox</span></span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span> <span class="token number">0</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token class">.container</span> <span class="token combinator">></span> <span class="token class">.subject</span></span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span> <span class="token number">0</span> <span class="token number">400</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token class">.container</span> <span class="token combinator">></span> <span class="token class">.date</span></span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span> <span class="token number">0</span> <span class="token number">120</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>这会创建具有不同宽度的列，但会根据情况相应地调整大小</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="vertical-垂直的"><a aria-hidden="true" tabindex="-1" href="#vertical-垂直的"><span class="icon icon-link"></span></a>Vertical 垂直的</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>垂直居中所有项目</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="左和右"><a aria-hidden="true" tabindex="-1" href="#左和右"><span class="icon icon-link"></span></a>左和右</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.menu</span> <span class="token combinator">></span> <span class="token class">.left</span></span> <span class="token punctuation">{</span> <span class="token property">align-self</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token class">.menu</span> <span class="token combinator">></span> <span class="token class">.right</span></span> <span class="token punctuation">{</span> <span class="token property">align-self</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-grid-网格布局"><a aria-hidden="true" tabindex="-1" href="#css-grid-网格布局"><span class="icon icon-link"></span></a>CSS Grid 网格布局</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="网格模板列"><a aria-hidden="true" tabindex="-1" href="#网格模板列"><span class="icon icon-link"></span></a>网格模板列</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token id">#grid-container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span> <span class="token number">20</span><span class="token unit">%</span> <span class="token number">60</span><span class="token unit">%</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="fr-相对单位"><a aria-hidden="true" tabindex="-1" href="#fr-相对单位"><span class="icon icon-link"></span></a>fr 相对单位</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.grid</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">fr</span> <span class="token number">60</span><span class="token unit">px</span> <span class="token number">1</span><span class="token unit">fr</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="grid-gap-网格间隙"><a aria-hidden="true" tabindex="-1" href="#grid-gap-网格间隙"><span class="icon icon-link"></span></a>Grid Gap 网格间隙</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token comment">/* 行间距为 20px */</span>
|
||
</span><span class="code-line"><span class="token comment">/* 列之间的距离是 10px */</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token id">#grid-container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-gap</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="css-网格行"><a aria-hidden="true" tabindex="-1" href="#css-网格行"><span class="icon icon-link"></span></a>CSS 网格行</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>CSS 语法:</p>
|
||
<ul>
|
||
<li>grid-row: grid-row-start / grid-row-end;</li>
|
||
</ul>
|
||
</div></div><div class="h3wrap-body"><h4 id="实例"><a aria-hidden="true" tabindex="-1" href="#实例"><span class="icon icon-link"></span></a>实例</h4>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.item</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">grid-row</span><span class="token punctuation">:</span> <span class="token number">1</span> <span class="token operator">/</span> span <span class="token number">2</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-块级网格"><a aria-hidden="true" tabindex="-1" href="#css-块级网格"><span class="icon icon-link"></span></a>CSS 块级网格</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token id">#grid-container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-内联级别网格"><a aria-hidden="true" tabindex="-1" href="#css-内联级别网格"><span class="icon icon-link"></span></a>CSS 内联级别网格</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token id">#grid-container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> inline-grid<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-网格行间隙"><a aria-hidden="true" tabindex="-1" href="#css-网格行间隙"><span class="icon icon-link"></span></a>CSS 网格行间隙</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">grid-row-gap</span><span class="token punctuation">:</span> length<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>任何合法的长度值，例如 <code>px</code> 或 <code>%</code>。<code>0</code> 是默认值</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-网格区域"><a aria-hidden="true" tabindex="-1" href="#css-网格区域"><span class="icon icon-link"></span></a>CSS 网格区域</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.item1</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token number">2</span> <span class="token operator">/</span> <span class="token number">1</span> <span class="token operator">/</span> span <span class="token number">2</span> <span class="token operator">/</span> span <span class="token number">3</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="minmax-函数"><a aria-hidden="true" tabindex="-1" href="#minmax-函数"><span class="icon icon-link"></span></a>minmax() 函数</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="wrap-text "><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.grid</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span> <span class="token function">minmax</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token unit">px</span><span class="token punctuation">)</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
<p>定义了一个长宽范围的闭区间</p>
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="grid-row-start--grid-row-end"><a aria-hidden="true" tabindex="-1" href="#grid-row-start--grid-row-end"><span class="icon icon-link"></span></a>grid-row-start & grid-row-end</h3><div class="wrap-body">
|
||
<p>CSS 语法:</p>
|
||
<ul>
|
||
<li>grid-row-start: auto|row-line;</li>
|
||
<li>grid-row-end: auto|row-line|span n;</li>
|
||
</ul>
|
||
</div></div><div class="h3wrap-body"><h4 id="实例-1"><a aria-hidden="true" tabindex="-1" href="#实例-1"><span class="icon icon-link"></span></a>实例</h4>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">grid-row-start</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">grid-row-end</span><span class="token punctuation">:</span> span <span class="token number">2</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="对齐项目"><a aria-hidden="true" tabindex="-1" href="#对齐项目"><span class="icon icon-link"></span></a>对齐项目</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token id">#container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">justify-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">fr</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">fr</span> <span class="token number">1</span><span class="token unit">fr</span> <span class="token number">1</span><span class="token unit">fr</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-gap</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-网格模板区域"><a aria-hidden="true" tabindex="-1" href="#css-网格模板区域"><span class="icon icon-link"></span></a>CSS 网格模板区域</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.item</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">grid-area</span><span class="token punctuation">:</span> nav<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token class">.grid-container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span>
|
||
</span><span class="code-line"> <span class="token string">'nav nav . .'</span>
|
||
</span><span class="code-line"> <span class="token string">'nav nav . .'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="justify-self"><a aria-hidden="true" tabindex="-1" href="#justify-self"><span class="icon icon-link"></span></a>Justify Self</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token id">#grid-container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">justify-items</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector"><span class="token class">.grid-items</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">justify-self</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>网格项目位于行的右侧（末尾）</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="对齐项目-1"><a aria-hidden="true" tabindex="-1" href="#对齐项目-1"><span class="icon icon-link"></span></a>对齐项目</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token id">#container</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">align-items</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">fr</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">fr</span> <span class="token number">1</span><span class="token unit">fr</span> <span class="token number">1</span><span class="token unit">fr</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">grid-gap</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-动态内容"><a aria-hidden="true" tabindex="-1" href="#css-动态内容"><span class="icon icon-link"></span></a>CSS 动态内容</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="变量"><a aria-hidden="true" tabindex="-1" href="#变量"><span class="icon icon-link"></span></a>变量</h3><div class="wrap-body">
|
||
<p>定义 CSS 变量</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token pseudo-class">:root</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token variable">--first-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#16f</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token variable">--second-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#ff7</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>变量用法</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token id">#firstParagraph</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span><span class="token variable">--first-color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span><span class="token variable">--second-color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*">CSS Variable</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="计数器"><a aria-hidden="true" tabindex="-1" href="#计数器"><span class="icon icon-link"></span></a>计数器</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token comment">/* Set "my-counter" to 0 */</span>
|
||
</span><span class="code-line"><span class="token property">counter-set</span><span class="token punctuation">:</span> my-counter<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token comment">/* Increment "my-counter" by 1 */</span>
|
||
</span><span class="code-line"><span class="token property">counter-increment</span><span class="token punctuation">:</span> my-counter<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token comment">/* Decrement "my-counter" by 1 */</span>
|
||
</span><span class="code-line"><span class="token property">counter-increment</span><span class="token punctuation">:</span> my-counter <span class="token number">-1</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token comment">/* Reset "my-counter" to 0 */</span>
|
||
</span><span class="code-line"><span class="token property">counter-reset</span><span class="token punctuation">:</span> my-counter<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>另见: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set">Counter set</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用计数器"><a aria-hidden="true" tabindex="-1" href="#使用计数器"><span class="icon icon-link"></span></a>使用计数器</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">counter-reset</span><span class="token punctuation">:</span> section<span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector">h3<span class="token pseudo-element">::before</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">counter-increment</span><span class="token punctuation">:</span> section<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Section."</span> <span class="token function">counter</span><span class="token punctuation">(</span>section<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">ol</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">counter-reset</span><span class="token punctuation">:</span> section<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector">li<span class="token pseudo-element">::before</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">counter-increment</span><span class="token punctuation">:</span> section<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counters</span><span class="token punctuation">(</span>section<span class="token punctuation">,</span> <span class="token string">"."</span><span class="token punctuation">)</span> <span class="token string">" "</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-3-技巧"><a aria-hidden="true" tabindex="-1" href="#css-3-技巧"><span class="icon icon-link"></span></a>Css 3 技巧</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="滚动条平滑"><a aria-hidden="true" tabindex="-1" href="#滚动条平滑"><span class="icon icon-link"></span></a>滚动条平滑</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">html</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">scroll-behavior</span><span class="token punctuation">:</span> smooth<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><a href="#%E5%85%A5%E9%97%A8">点击我</a>页面会平滑滚动到入门</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="忽略用作间距的换行符-br-"><a aria-hidden="true" tabindex="-1" href="#忽略用作间距的换行符-br-"><span class="icon icon-link"></span></a>忽略用作间距的换行符 <br /></h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">br <span class="token combinator">+</span> br</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-empty-隐藏空-html-元素"><a aria-hidden="true" tabindex="-1" href="#使用-empty-隐藏空-html-元素"><span class="icon icon-link"></span></a>使用 :empty 隐藏空 HTML 元素</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token pseudo-class">:empty</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-重置"><a aria-hidden="true" tabindex="-1" href="#css-重置"><span class="icon icon-link"></span></a>CSS 重置</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">html</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector">*<span class="token punctuation">,</span> *<span class="token pseudo-element">::before</span><span class="token punctuation">,</span> *<span class="token pseudo-element">::after</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>有助于在不同的浏览器之间强制样式一致性，并为样式元素提供干净的盒子</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用图像作为光标"><a aria-hidden="true" tabindex="-1" href="#使用图像作为光标"><span class="icon icon-link"></span></a>使用图像作为光标</h3><div class="wrap-body">
|
||
<pre class="wrap-text "><code class="language-css code-highlight"><span class="code-line"><span class="token selector">div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">cursor</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">'path-to-image.png'</span><span class="token punctuation">)</span></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">'path-to-fallback-image.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">,</span> auto<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 表情符号作为光标 */</span>
|
||
</span><span class="code-line"> <span class="token property">cursor</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">"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"</span><span class="token punctuation">)</span></span><span class="token punctuation">,</span> auto<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="文本溢出显示省略号"><a aria-hidden="true" tabindex="-1" href="#文本溢出显示省略号"><span class="icon icon-link"></span></a>文本溢出显示省略号</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.overflow-ellipsis</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>一行文本截断显示省略号 <em>(...)</em></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="将文本截断到特定的行数"><a aria-hidden="true" tabindex="-1" href="#将文本截断到特定的行数"><span class="icon icon-link"></span></a>将文本截断到特定的行数</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.overflow-truncate</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>多行文本截断到特定的行数，末尾显示省略号 <em>(...)</em></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="计算函数"><a aria-hidden="true" tabindex="-1" href="#计算函数"><span class="icon icon-link"></span></a>计算函数</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token unit">%</span> <span class="token operator">-</span> <span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token unit">%</span> <span class="token operator">-</span> <span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc"><code>calc()</code></a> CSS 函数允许您在指定 CSS 属性值时执行计算</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="粘性定位元素"><a aria-hidden="true" tabindex="-1" href="#粘性定位元素"><span class="icon icon-link"></span></a>粘性定位元素</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.sticky</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#sticky">sticky</a> 能在滚动到顶部的位置固定住元素</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用带有空链接的属性选择器"><a aria-hidden="true" tabindex="-1" href="#使用带有空链接的属性选择器"><span class="icon icon-link"></span></a>使用带有空链接的属性选择器</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">a<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">href</span><span class="token operator">^=</span><span class="token attr-value">"http"</span><span class="token punctuation">]</span></span><span class="token pseudo-class">:empty</span><span class="token pseudo-element">::before</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>href<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>如果你的 <code><a></code> 标签里面没有内容，将 <code>href</code> 的值作为内容展示</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-root-表示灵活类型"><a aria-hidden="true" tabindex="-1" href="#使用-root-表示灵活类型"><span class="icon icon-link"></span></a>使用 :root 表示灵活类型</h3><div class="wrap-body">
|
||
<p>响应式布局中的字体大小应该能够根据每个视口进行调整，您可以使用 <code>:root</code> 根据视口高度和宽度计算字体大小</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token pseudo-class">:root</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token unit">vw</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token unit">vh</span> <span class="token operator">+</span> <span class="token number">.5</span><span class="token unit">vmin</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>现在您可以根据 <code>:root</code> 计算的值使用根 <code>em</code> 单位：</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">font</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">rem</span>/<span class="token number">1.6</span> sans-serif<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||
<ul>
|
||
<li><a href="https://frontend30.com/css-selectors-cheatsheet/">CSS selectors cheatsheet</a> <em>(frontend30.com)</em></li>
|
||
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Flexible_boxes">MDN: Using CSS flexbox</a></li>
|
||
<li><a href="http://www.sketchingwithcss.com/samplechapter/cheatsheet.html">Ultimate flexbox cheatsheet</a></li>
|
||
<li><a href="http://grid.malven.co/">GRID: A simple visual cheatsheet</a></li>
|
||
<li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS Tricks: A Complete Guide to Grid</a></li>
|
||
<li><a href="https://caniuse.com/#feat=css-grid">Browser support</a></li>
|
||
<li><a href="https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool">Flex 布局教程：语法篇</a></li>
|
||
<li><a href="https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN">CSS 专业技巧</a></li>
|
||
</ul>
|
||
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer><script>
|
||
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
|
||
window.onhashchange = function () {
|
||
anchorPoint()
|
||
updateAnchor()
|
||
};
|
||
}
|
||
function anchorPoint() {
|
||
const hash = window.location.hash?.replace(/^#/, '') || '';
|
||
const elm = document.getElementById(decodeURIComponent(hash));
|
||
Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
|
||
if (elm?.tagName === 'H3') {
|
||
elm?.parentElement?.parentElement?.classList.add('active');
|
||
}
|
||
}
|
||
anchorPoint();
|
||
|
||
function updateAnchor(element) {
|
||
const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||
anchorContainer.forEach((tocanchor) => {
|
||
tocanchor.classList.remove('is-active-link');
|
||
});
|
||
const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
|
||
if (anchor) {
|
||
anchor.classList.add('is-active-link');
|
||
}
|
||
}
|
||
// toc 定位
|
||
updateAnchor()
|
||
const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||
anchor.forEach((item) => {
|
||
item.addEventListener('click', (e) => {
|
||
updateAnchor()
|
||
})
|
||
})
|
||
</script></body>
|
||
</html>
|