mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 12:41:20 +08:00
1810 lines
254 KiB
HTML
1810 lines
254 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>CSS 备忘清单
|
||
& css cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="这是一份关于 CSS 优点的快速参考备忘单，列出了选择器语法、属性、单位和其他有用的信息
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="css,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</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="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/css.md" class="edit" 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 src="../js/dark.js?v=1.8.3"></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" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍">介绍</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#外部样式表-link">外部样式表 <link></a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#内部样式表-style">内部样式表 <style></a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#内联样式-style">内联样式 style</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#添加-class-类">添加 class 类</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#important">!important</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选择器">选择器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#文本颜色">文本颜色</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#背景">背景</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#字体">字体</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#定位">定位</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#动画">动画</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#注释">注释</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex-布局">Flex 布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grid-布局">Grid 布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#变量和计数器">变量和计数器</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-选择器">CSS 选择器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#示例">示例</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#组选择器">组选择器</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#链选择器">链选择器</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#属性选择器">属性选择器</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#第一个子选择器">第一个子选择器</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#无子选择器">无子选择器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#基础">基础</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组合器">组合器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#属性选择器-1">属性选择器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#用户操作伪类">用户操作伪类</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#伪类">伪类</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#输入伪类">输入伪类</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#结构伪类">结构伪类</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-字体">CSS 字体</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#属性">属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#速记">速记</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#示例-1">示例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#大小写">大小写</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#font-face">@font-face</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-颜色">CSS 颜色</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#命名颜色">命名颜色</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#十六进制颜色">十六进制颜色</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#rgb-颜色">rgb() 颜色</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#hsl-颜色">HSL 颜色</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#其它">其它</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#全局值">全局值</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-背景">CSS 背景</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#属性-1">属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#速记-1">速记</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#示例-2">示例</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-盒子模型">CSS 盒子模型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#最大值最小值">最大值/最小值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#边距补白">边距/补白</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#box-sizing">Box-sizing</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#能见度">能见度</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#auto-关键字">Auto 关键字</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#溢出overflow">溢出(Overflow)</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-动画">CSS 动画</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#速记-2">速记</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#属性-2">属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#示例-3">示例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#javascript-事件">Javascript 事件</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-flexbox">CSS Flexbox</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#简单实例">简单实例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#容器">容器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#子元素">子元素</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#justify-content">justify-content</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex-wrap">flex-wrap</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex-direction">flex-direction</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#align-items">align-items</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#align-content">align-content</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#order">order</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex-grow">flex-grow</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-flexbox-技巧">CSS Flexbox 技巧</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#垂直中心">垂直中心</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#垂直中心-2">垂直中心 (2)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#重新排序">重新排序</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#移动布局">移动布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#table-like-像表格">Table-like 像表格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#vertical-垂直的">Vertical 垂直的</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#左和右">左和右</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-grid-网格布局">CSS Grid 网格布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#网格模板列">网格模板列</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#fr-相对单位">fr 相对单位</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grid-gap-网格间隙">Grid Gap 网格间隙</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-网格行">CSS 网格行</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#实例">实例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-块级网格">CSS 块级网格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-内联级别网格">CSS 内联级别网格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-网格行间隙">CSS 网格行间隙</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-网格区域">CSS 网格区域</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#minmax-函数">minmax() 函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grid-row-start--grid-row-end">grid-row-start & grid-row-end</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#实例-1">实例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#对齐项目">对齐项目</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-网格模板区域">CSS 网格模板区域</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#justify-self">Justify Self</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#对齐项目-1">对齐项目</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-动态内容">CSS 动态内容</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#变量">变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#计数器">计数器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用计数器">使用计数器</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-函数">CSS 函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#calc">calc()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#clamp">clamp()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#attr">attr()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#counter">counter()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#counters">counters()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#env">env()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#fit-content">fit-content()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#max">max()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#min">min()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#minmax">minmax()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#repeat-轨道列表的重复片段">repeat() 轨道列表的重复片段</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#url">url()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#var">var()</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#css-技巧">CSS 技巧</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#强制不换行">强制不换行</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#强制换行">强制换行</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#滚动条平滑">滚动条平滑</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#修改浏览器自动填充-input-样式">修改浏览器自动填充 input 样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#修改-input-typecolor-样式">修改 input type="color" 样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#忽略用作间距的换行符-br-">忽略用作间距的换行符 <br /></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-empty-隐藏空-html-元素">使用 :empty 隐藏空 HTML 元素</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-重置">CSS 重置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#设置光标样式">设置光标样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#设置整个页面灰色">设置整个页面灰色</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#textarea自动增加其高度"><textarea>自动增加其高度</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#定义容器的长宽比">定义容器的长宽比</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-unset-而不是重置所有属性">使用 unset 而不是重置所有属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#超出显示省略号">超出显示省略号</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#给正文添加行高">给正文添加行高</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用图像作为光标">使用图像作为光标</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#文本溢出显示省略号">文本溢出显示省略号</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#将文本截断到特定的行数">将文本截断到特定的行数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#粘性定位元素">粘性定位元素</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用带有空链接的属性选择器">使用带有空链接的属性选择器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-root-表示灵活类型">使用 :root 表示灵活类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#吸附滚动">吸附滚动</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#类似-contenteditable-的样式">类似 contenteditable 的样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#等宽表格单元格">等宽表格单元格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#利用属性选择器来选择空链接">利用属性选择器来选择空链接</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#给-默认-链接定义样式">给 “默认” 链接定义样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#用-rem-调整全局大小用-em-调整局部大小">用 rem 调整全局大小；用 em 调整局部大小</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#隐藏没有静音自动播放的影片">隐藏没有静音、自动播放的影片</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为更好的移动体验为表单元素设置字体大小">为更好的移动体验，为表单元素设置字体大小</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用指针事件来控制鼠标事件">使用指针事件来控制鼠标事件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#子元素选中父元素">子元素选中父元素</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#在用作间距的换行符上设置-display-none">在用作间距的换行符上设置 display: none</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#给-body-添加行高">给 body 添加行高</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#检查本地是否安装了字体">检查本地是否安装了字体</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#获取-html-元素的属性">获取 HTML 元素的属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#为表单元素设置-focus">为表单元素设置 :focus</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#垂直居中任何东西">垂直居中任何东西</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#图片对齐不变形">图片对齐不变形</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#多行截断展示省略号">多行截断，展示省略号</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#逗号分隔列表">逗号分隔列表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#表格中数字使用制表数字">表格中数字使用制表数字</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" 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>
|
||
<h4 id="外部样式表-link"><a aria-hidden="true" tabindex="-1" href="#外部样式表-link"><span class="icon icon-link"></span></a>外部样式表 <code><link></code></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="内部样式表-style"><a aria-hidden="true" tabindex="-1" href="#内部样式表-style"><span class="icon icon-link"></span></a>内部样式表 <code><style></code></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="内联样式-style"><a aria-hidden="true" tabindex="-1" href="#内联样式-style"><span class="icon icon-link"></span></a>内联样式 <code>style</code></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><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-%E6%8A%80%E5%B7%A7">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="#grid-%E5%B8%83%E5%B1%80">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-->
|
||
<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><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">第一个 p 类型的元素 <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>
|
||
<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><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>
|
||
<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><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-函数"><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="calc"><a aria-hidden="true" tabindex="-1" href="#calc"><span class="icon icon-link"></span></a>calc()</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="clamp"><a aria-hidden="true" tabindex="-1" href="#clamp"><span class="icon icon-link"></span></a>clamp()</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token unit">rem</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token unit">vw</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token unit">rem</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="attr"><a aria-hidden="true" tabindex="-1" href="#attr"><span class="icon icon-link"></span></a>attr()</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">p<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>data-foo<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>
|
||
<p>获取选择到的元素的某一 HTML 属性值</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="counter"><a aria-hidden="true" tabindex="-1" href="#counter"><span class="icon icon-link"></span></a>counter()</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>返回一个代表计数器的当前值的字符串</p>
|
||
<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>ol</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>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></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> listCounter<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> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">counter-increment</span><span class="token punctuation">:</span> listCounter<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">::after</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 string">"["</span> <span class="token function">counter</span><span class="token punctuation">(</span>listCounter<span class="token punctuation">)</span> <span class="token string">"] == ["</span>
|
||
</span><span class="code-line"> <span class="token function">counter</span><span class="token punctuation">(</span>listCounter<span class="token punctuation">,</span> upper-roman<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>
|
||
<p>显示</p>
|
||
<pre><code class="code-highlight"><span class="code-line">1. [1]==[I]
|
||
</span><span class="code-line">2. [2]==[II]
|
||
</span><span class="code-line">3. [3]==[III]
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="counters"><a aria-hidden="true" tabindex="-1" href="#counters"><span class="icon icon-link"></span></a>counters()</h3><div class="wrap-body">
|
||
<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> count<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> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">counter-increment</span><span class="token punctuation">:</span> count<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">::marker</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">counters</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token string">'.'</span><span class="token punctuation">,</span> upper-alpha<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><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">content</span><span class="token punctuation">:</span> <span class="token function">counters</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token string">"."</span><span class="token punctuation">,</span> decimal-leading-zero<span class="token punctuation">)</span> <span class="token string">" == "</span> <span class="token function">counters</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token string">"."</span><span class="token punctuation">,</span> lower-alpha<span class="token punctuation">)</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="env"><a aria-hidden="true" tabindex="-1" href="#env"><span class="icon icon-link"></span></a>env()</h3><div class="wrap-body">
|
||
<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>... viewport-fit=cover<span class="token punctuation">"</span></span><span class="token punctuation">></span></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 selector">body</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span>
|
||
</span><span class="code-line"> <span class="token function">env</span><span class="token punctuation">(</span>safe-area-inset-top<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 function">env</span><span class="token punctuation">(</span>safe-area-inset-right<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 function">env</span><span class="token punctuation">(</span>safe-area-inset-bottom<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 function">env</span><span class="token punctuation">(</span>safe-area-inset-left<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 punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>用户代理定义的环境变量值插入你的 CSS 中</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="fit-content"><a aria-hidden="true" tabindex="-1" href="#fit-content"><span class="icon icon-link"></span></a>fit-content()</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token function">fit-content</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 function">fit-content</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token unit">cm</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">fit-content</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token unit">vw</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">fit-content</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token unit">ch</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="max"><a aria-hidden="true" tabindex="-1" href="#max"><span class="icon icon-link"></span></a>max()</h3><div class="wrap-body">
|
||
<p>从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">max</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token unit">vw</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token unit">em</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="min"><a aria-hidden="true" tabindex="-1" href="#min"><span class="icon icon-link"></span></a>min()</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">min</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token unit">vw</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token unit">em</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token function">minmax</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 number">1</span><span class="token unit">fr</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">minmax</span><span class="token punctuation">(</span><span class="token number">400</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">minmax</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token unit">%</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token unit">px</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><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> max-content<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">minmax</span><span class="token punctuation">(</span>min-content<span class="token punctuation">,</span> <span class="token number">400</span><span class="token unit">px</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">minmax</span><span class="token punctuation">(</span>max-content<span class="token punctuation">,</span> auto<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">minmax</span><span class="token punctuation">(</span>auto<span class="token punctuation">,</span> <span class="token number">300</span><span class="token unit">px</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">minmax</span><span class="token punctuation">(</span>min-content<span class="token punctuation">,</span> auto<span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="repeat-轨道列表的重复片段"><a aria-hidden="true" tabindex="-1" href="#repeat-轨道列表的重复片段"><span class="icon icon-link"></span></a>repeat() 轨道列表的重复片段</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token function">repeat</span><span class="token punctuation">(</span>auto-fill<span class="token punctuation">,</span> <span class="token number">250</span><span class="token unit">px</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">repeat</span><span class="token punctuation">(</span>auto-fit<span class="token punctuation">,</span> <span class="token number">250</span><span class="token unit">px</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">repeat</span><span class="token punctuation">(</span><span class="token number">4</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 function">repeat</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> [col-start] <span class="token number">250</span><span class="token unit">px</span> [col-end]<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">repeat</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> [col-start] <span class="token number">60</span><span class="token unit">%</span> [col-end]<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="url"><a aria-hidden="true" tabindex="-1" href="#url"><span class="icon icon-link"></span></a>url()</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><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><span class="token string url">"topbanner.png"</span><span class="token punctuation">)</span></span> <span class="token hexcode color">#00D</span> no-repeat fixed<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token property">list-style</span><span class="token punctuation">:</span> square <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>http://www.example.com/redball.png<span class="token punctuation">)</span></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="var"><a aria-hidden="true" tabindex="-1" href="#var"><span class="icon icon-link"></span></a>var()</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><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">--main-bg-color</span><span class="token punctuation">:</span> <span class="token color">pink</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token selector">body</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">--main-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>
|
||
<!--rehype:className=wrap-text-->
|
||
<p>代替元素中任何属性中的值的任何部分</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-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">p</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 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">p</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">word-break</span><span class="token punctuation">:</span>break-all<span class="token punctuation">;</span> <span class="token comment">/* 英文 */</span>
|
||
</span><span class="code-line"> <span class="token property">white-space</span><span class="token punctuation">:</span>pre-wrap<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">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="修改浏览器自动填充-input-样式"><a aria-hidden="true" tabindex="-1" href="#修改浏览器自动填充-input-样式"><span class="icon icon-link"></span></a>修改浏览器自动填充 input 样式</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">input<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">type</span><span class="token operator">=</span><span class="token attr-value">"text"</span><span class="token punctuation">]</span></span><span class="token pseudo-class">:autofill</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span> <span class="token number">0</span> <span class="token number">1000</span><span class="token unit">px</span> <span class="token hexcode color">#000</span> inset<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">-webkit-text-fill-color</span><span class="token punctuation">:</span> <span class="token color">white</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/en-US/docs/Web/CSS/:autofill">:autofill</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="修改-input-typecolor-样式"><a aria-hidden="true" tabindex="-1" href="#修改-input-typecolor-样式"><span class="icon icon-link"></span></a>修改 input type="color" 样式</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">input<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">type</span><span class="token operator">=</span><span class="token attr-value">"color"</span><span class="token punctuation">]</span></span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">border</span><span class="token punctuation">:</span> none<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">32</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">32</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">input<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">type</span><span class="token operator">=</span><span class="token attr-value">"color"</span><span class="token punctuation">]</span></span><span class="token pseudo-element">::-webkit-color-swatch-wrapper</span></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><span class="code-line"><span class="token selector">input<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">type</span><span class="token operator">=</span><span class="token attr-value">"color"</span><span class="token punctuation">]</span></span><span class="token pseudo-element">::-webkit-color-swatch</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">border</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="忽略用作间距的换行符-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 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-->
|
||
<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><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="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">caret-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>
|
||
</div></div></div><div class="wrap h3body-not-exist" style="-webkit-filter: grayscale(.95);"><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-style=-webkit-filter: grayscale(.95);-->
|
||
<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">-webkit-filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span><span class="token number">.95</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>上面示例设置了当前卡片灰色</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="textarea自动增加其高度"><a aria-hidden="true" tabindex="-1" href="#textarea自动增加其高度"><span class="icon icon-link"></span></a><code><textarea></code>自动增加其高度</h3><div class="wrap-body">
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">textarea</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">form-sizing</span><span class="token punctuation">:</span> normal
|
||
</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">div</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> <span class="token number">1</span>/<span class="token number">1</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/aspect-ratio">aspect-ratio</a> 可以非常容易的定义一个容器的长宽比</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-unset-而不是重置所有属性"><a aria-hidden="true" tabindex="-1" href="#使用-unset-而不是重置所有属性"><span class="icon icon-link"></span></a>使用 unset 而不是重置所有属性</h3><div class="wrap-body">
|
||
<p>使用 <code>all</code> 速记来指定元素的所有属性。将值设置为 <code>unset</code> 会将元素的属性更改为其初始值：</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">button</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">all</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>注意：<code>IE11</code> 不支持 <code>all</code> 和 <code>unset</code> 速记</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">p</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 class="token comment">/*超出部分隐藏*/</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 超出部分显示省略号 */</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 comment">/* 规定段落中的文本不进行换行 */</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">width</span><span class="token punctuation">:</span> <span class="token number">250</span><span class="token unit">px</span><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">
|
||
<p>您不需要为每个 <code><p></code>、<code><h*></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">line-height</span><span class="token punctuation">:</span> <span class="token number">1.5</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>这样文本元素可以很容易地从 <code>body</code> 继承</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="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"><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 row-span-2"><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">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<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 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"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">250</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">overflow-x</span><span class="token punctuation">:</span> scroll<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 highlight-line"> <span class="token property">scroll-snap-type</span><span class="token punctuation">:</span> x mandatory<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">column-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><span class="code-line"><span class="token selector"><span class="token class">.child</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">66</span><span class="token unit">%</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">250</span><span class="token unit">px</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">#663399</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token property">scroll-snap-align</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>可用于 <code>轮播图</code> 效果，<a href="https://codesandbox.io/embed/pensive-leftpad-w9p8rk?fontsize=14&hidenavigation=1&theme=dark">效果预览</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="类似-contenteditable-的样式"><a aria-hidden="true" tabindex="-1" href="#类似-contenteditable-的样式"><span class="icon icon-link"></span></a>类似 contenteditable 的样式</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">-webkit-user-modify</span><span class="token punctuation">:</span>
|
||
</span><span class="code-line"> read-write-plaintext-only<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
<p>通过样式来控制一个元素 <code>div</code> 是否可以编辑</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">
|
||
<p>尝试使用 <code>table-layout: fixed</code> 以保持单元格宽度相等：</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">table</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">table-layout</span><span class="token punctuation">:</span> fixed<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">
|
||
<p>当 <code><a></code> 元素没有文本内容，但有 <code>href</code> 属性的时候，显示它的 <code>href</code> 属性：</p>
|
||
<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>
|
||
</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">
|
||
<p>给 “默认” 链接定义样式：</p>
|
||
<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 punctuation">]</span></span><span class="token pseudo-class">:not</span><span class="token punctuation">(</span><span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">class</span><span class="token punctuation">]</span></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 hexcode color">#008000</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>通常没有 <code>class</code> 属性，以上样式可以甄别它们，而且不会影响其它样式</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="用-rem-调整全局大小用-em-调整局部大小"><a aria-hidden="true" tabindex="-1" href="#用-rem-调整全局大小用-em-调整局部大小"><span class="icon icon-link"></span></a>用 rem 调整全局大小；用 em 调整局部大小</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>在根元素设置基本字体大小后 (<code>html { font-size: 100%; }</code>), 使用 em 设置文本元素的字体大小:</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">h2</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 number">2</span><span class="token unit">em</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">p</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 number">1</span><span class="token unit">em</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>然后设置模块的字体大小为 rem:</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">article</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 number">1.25</span><span class="token unit">rem</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">aside <span class="token class">.module</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 number">.9</span><span class="token unit">rem</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">
|
||
<p>这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。如果没有静音，则不显示视频：</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">video<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">autoplay</span><span class="token punctuation">]</span></span><span class="token pseudo-class">:not</span><span class="token punctuation">(</span><span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">muted</span><span class="token punctuation">]</span></span><span class="token punctuation">)</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>
|
||
<p>再次，我们利用了 <code>:not()</code> 的优点</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">
|
||
<p>当触发 <code><select></code> 的下拉列表时，为了避免表单元素在移动浏览器（iOS Safari 和其它）上的缩放，加上font-size：</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">input<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">type</span><span class="token operator">=</span><span class="token attr-value">"text"</span><span class="token punctuation">]</span></span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token selector">input<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">type</span><span class="token operator">=</span><span class="token attr-value">"number"</span><span class="token punctuation">]</span></span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token selector">select<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token selector">textarea</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 number">16</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="使用指针事件来控制鼠标事件"><a aria-hidden="true" tabindex="-1" href="#使用指针事件来控制鼠标事件"><span class="icon icon-link"></span></a>使用指针事件来控制鼠标事件</h3><div class="wrap-body">
|
||
<p>指针事件允许您指定鼠标如何与其触摸的元素进行交互。要禁用按钮上的默认指针事件，例如：</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">button<span class="token pseudo-class">:disabled</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">.5</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">pointer-events</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>
|
||
<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">div<span class="token pseudo-class">:has</span><span class="token punctuation">(</span>img<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 color">black</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>设置包含子元素 <code>img</code> 的 <code>div</code> 元素样式，还可以嵌套：</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">div<span class="token pseudo-class">:has</span><span class="token punctuation">(</span>h2<span class="token punctuation">)</span><span class="token pseudo-class">:has</span><span class="token punctuation">(</span>ul<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 color">black</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="在用作间距的换行符上设置-display-none"><a aria-hidden="true" tabindex="-1" href="#在用作间距的换行符上设置-display-none"><span class="icon icon-link"></span></a>在用作间距的换行符上设置 <code>display: none</code></h3><div class="wrap-body">
|
||
<p>用户使用额外的换行符</p>
|
||
<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="给-body-添加行高"><a aria-hidden="true" tabindex="-1" href="#给-body-添加行高"><span class="icon icon-link"></span></a>给 <code>body</code> 添加行高</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><span class="code-line"> <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">1.5</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>您不需要为每个 <code><p></code>、<code><h*></code> 等分别添加行高。相反，将其添加到正文</p>
|
||
</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 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">"Dank Mono"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">src</span><span class="token punctuation">:</span>
|
||
</span><span class="code-line"> <span class="token comment">/* Full name */</span>
|
||
</span><span class="code-line"> <span class="token function">local</span><span class="token punctuation">(</span><span class="token string">"Dank Mono"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">/* Postscript name */</span>
|
||
</span><span class="code-line"> <span class="token function">local</span><span class="token punctuation">(</span><span class="token string">"Dank-Mono"</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 url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"//...a.server/DankMono.woff"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token selector">code</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">"Dank Mono"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> system-ui-monospace<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="获取-html-元素的属性"><a aria-hidden="true" tabindex="-1" href="#获取-html-元素的属性"><span class="icon icon-link"></span></a>获取 HTML 元素的属性</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>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com<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>a</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>attr HTML 元素的属性名。</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">a<span class="token pseudo-element">:after</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 string">" ("</span> <span class="token function">attr</span><span class="token punctuation">(</span>href<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 class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="为表单元素设置-focus"><a aria-hidden="true" tabindex="-1" href="#为表单元素设置-focus"><span class="icon icon-link"></span></a>为表单元素设置 <code>:focus</code></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 pseudo-class">:focus</span><span class="token punctuation">,</span> button<span class="token pseudo-class">:focus</span><span class="token punctuation">,</span> input<span class="token pseudo-class">:focus</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token selector">select<span class="token pseudo-class">:focus</span><span class="token punctuation">,</span> textarea<span class="token pseudo-class">:focus</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">box-shadow</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">outline</span><span class="token punctuation">:</span> <span class="token hexcode color">#000</span> dotted <span class="token number">2</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">outline-offset</span><span class="token punctuation">:</span> <span class="token number">.05</span><span class="token unit">em</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 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">html<span class="token punctuation">,</span> body</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">%</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">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">-webkit-align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">-ms-flex-align</span><span class="token punctuation">:</span> center<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 property">display</span><span class="token punctuation">:</span> -webkit-flex<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>
|
||
<p>...还有 CSS 网格：</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">display</span><span class="token punctuation">:</span> grid<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">vh</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">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">place-items</span><span class="token punctuation">:</span> center 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">img</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">height</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 comment">/** 确保图片按原始宽高比例进行缩放 */</span>
|
||
</span><span class="code-line"> <span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">object-position</span><span class="token punctuation">:</span> left top<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">transition</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">s</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">img<span class="token pseudo-class">:hover</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">object-position</span><span class="token punctuation">:</span> right bottom<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">.clamp</span></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 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-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">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><code>html</code> 文本超过 3 行将被截断，显示省略号...</p>
|
||
<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>p</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>clamp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 展示多行文本，超过 3 行将被截断，显示省略号...
|
||
</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>
|
||
</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">ul <span class="token combinator">></span> li<span class="token pseudo-class">:not</span><span class="token punctuation">(</span><span class="token pseudo-class">:last-child</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">content</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>
|
||
<p>使列表项看起来像一个真实的逗号分隔列表，使用 <code>:not()</code> 伪类，最后一项不会添加逗号</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">.revenue</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">font-variant-numeric</span><span class="token punctuation">:</span> tabular-nums<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>表格中一列数字列对其</p>
|
||
</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 class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|