【前端】CSS备忘清单（超级详细！）

文章目录 入门介绍外部样式表 `<link>`内部样式表 `<style>`内联样式 `style` 添加 class 类!important选择器文本颜色背景字体定位动画注释Flex 布局Grid 布局变量和计数器 CSS 选择器示例组选择器链选择器属性选择器第一个子选择器无子选择器 基础组合器属性选择器用户操作伪类伪类输入伪类结构伪类 CSS 字体属性速记示例大小写@font-face CSS 颜色命名颜色十六进制颜色rgb() 颜色HSL 颜色其它全局值 CSS 背景属性速记示例 CSS 盒子模型最大值/最小值边距/补白Box-sizing能见度Auto 关键字溢出(Overflow) CSS 动画速记属性示例Javascript 事件 CSS Flexbox简单实例容器子元素justify-contentflex-wrapflex-directionalign-itemsalign-contentorderflex-grow CSS Flexbox 技巧垂直中心垂直中心 (2)重新排序移动布局Table-like 像表格Vertical 垂直的左和右 CSS Grid 网格布局网格模板列fr 相对单位Grid Gap 网格间隙CSS 网格行实例 CSS 块级网格CSS 内联级别网格CSS 网格行间隙CSS 网格区域minmax() 函数grid-row-start & grid-row-end实例 对齐项目CSS 网格模板区域Justify Self对齐项目 CSS 动态内容变量计数器使用计数器 CSS 函数calc()clamp()attr()counter()counters()env()fit-content()max()min()minmax()repeat() 轨道列表的重复片段url()var() CSS 技巧强制不换行强制换行滚动条平滑修改浏览器自动填充 input 样式修改 input type="color" 样式忽略用作间距的换行符 \<br />使用 :empty 隐藏空 HTML 元素CSS 重置设置光标样式设置整个页面灰色`<textarea>`自动增加其高度定义容器的长宽比使用 unset 而不是重置所有属性超出显示省略号给正文添加行高使用图像作为光标文本溢出显示省略号将文本截断到特定的行数粘性定位元素使用带有空链接的属性选择器使用 :root 表示灵活类型吸附滚动类似 contenteditable 的样式等宽表格单元格利用属性选择器来选择空链接给 “默认” 链接定义样式用 rem 调整全局大小；用 em 调整局部大小隐藏没有静音、自动播放的影片为更好的移动体验，为表单元素设置字体大小使用指针事件来控制鼠标事件子元素选中父元素在用作间距的换行符上设置 `display: none`给 `body` 添加行高检查本地是否安装了字体获取 HTML 元素的属性为表单元素设置 `:focus`垂直居中任何东西图片对齐不变形多行截断，展示省略号逗号分隔列表表格中数字使用制表数字 另见

这是一份关于 CSS 优点的快速参考备忘单，列出了选择器语法、属性、单位和其他有用的信息

入门 介绍

CSS 功能丰富，不仅仅是布局页面

外部样式表 <link> <link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css" > 内部样式表 <style> <style> body { background-color: linen; } </style> 内联样式 style <h2 style="text-align: center;"> 居中文本 </h2> <p style="color: blue; font-size: 18px;"> 蓝色，18像素文本 </p> 添加 class 类 <div class="classname"></div> <div class="class1 ... classn"></div>

支持一个元素上的多个类

!important .post-title { color: blue !important; }

覆盖所有以前的样式规则

选择器 h1 { } #job-title { } div.hero { } div > p { } 文本颜色 color: #2a2aff; color: green; color: rgb(34, 12, 64, 0.6); color: hsla(30 100% 50% / 0.6); 背景 background-color: blue; background-image: url("nyan-cat.gif"); background-image: url("../image.png"); 字体 .page-title { font-weight: bold; font-size: 30px; font-family: "Courier New"; } 定位 .box { position: relative; top: 20px; left: 20px; }

另见: Position

动画 animation: 300ms linear 0s infinite; animation: bounce 300ms linear infinite; 注释 /* 这是一行注释 */ /* 这是 多行注释 */ Flex 布局 div { display: flex; justify-content: center; } div { display: flex; justify-content: flex-start; } Grid 布局 #container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; } 变量和计数器 counter-set: subsection; counter-increment: subsection; counter-reset: subsection 0; :root { --bg-color: brown; } element { background-color: var(--bg-color); } CSS 选择器 示例 组选择器 h1, h2 { color: red; } 链选择器 h3.section-heading { color: blue; } 属性选择器 div[attribute="SomeValue"] { background-color: red; } 第一个子选择器 p:first-child { font-weight: bold; } 无子选择器 .box:empty { background: lime; height: 80px; width: 80px; } 基础 选择器说明*所有元素div所有 div 标签.classname具有类的所有元素#idname带 ID 的元素div,p所有 div 和段落#idname *#idname 中的所有元素

另见: 元素 / 类 / ID / 通配 选择器

组合器 选择器说明div.classname具有特定类名的 divdiv#idname具有特定 ID 的 divdiv pdiv 中的所有段落div > p父元素是 div 的 P 标签div + pdiv 之后的第一个同级 P 标签div ~ pdiv 之后所有的同级 P 标签

另见: 相邻兄弟 / 通用兄弟 / 子 选择器

属性选择器 选择器说明a[target]带有 target 属性 #a[target="_blank"]在新标签中打开 #a[href^="/index"]以 /index 开头 #[class|="chair"]以chair开头 #[class*="chair"]包含chair #[title~="chair"]包含单词 chair #a[href$=".doc"]以 .doc 结尾 #[type="button"]指定类型 #

另见: 属性选择器

用户操作伪类 选择器说明a:link链接正常 #a:active链接处于点击状态 #a:hover鼠标悬停链接 #a:visited访问链接 #

---

/* 未访问链接 */ a:link { color: blue; } /* 已访问链接 */ a:visited { color: purple; } /* 用户鼠标悬停 */ a:hover { background: yellow; } /* 激活链接 */ a:active { color: red; } 伪类 选择器说明p::after在 p 之后添加内容 #p::before在 p 之前添加内容 #p::first-letterp中的第一个字母 #p::first-linep 中的第一行 #::selection由用户选择 #::placeholder占位符 属性 #:root文档根元素 #:target突出显示活动锚点 #div:empty没有子元素的元素 #p:lang(en)带有 en 语言属性的 P #:not(span)不是跨度的元素 #:hostshadowDOM 中选择自定义元素 #::backdrop处于全屏模式的元素样式 #::markerli 项目符号或者数字 #::file-selector-buttontype=“file” input 按钮 # 输入伪类 选择器说明input:checked检查 input #input:disabled禁用 input #input:enabled启用的 input #input:default有默认值的元素 #input:blank空的输入框 #input:focusinput 有焦点 #input:in-range范围内的值 #input:out-of-rangeinput 值超出范围 #input:validinput 有效值 #input:invalidinput 无效值 #input:optional没有必需的属性 #input:required带有必需属性的 input #input:read-only具有只读属性 #input:read-write没有只读属性 #input:indeterminate带有 indeterminate 状态 # 结构伪类 选择器说明p:first-child第一个孩子 #p:last-child最后一个孩子 #p:first-of-type第一个 p 类型的元素 #p:last-of-type某种类型的最后一个 #p:nth-child(2)其父母的第二个孩子 #p:nth-child(3n42)Nth-child(an + b) 公式 #p:nth-last-child(2)后面的二孩 #p:nth-of-type(2)其父级的第二个 p #p:nth-last-of-type(2)…从后面 #p:only-of-type其父级的唯一性 #p:only-child其父母的唯一孩子 #:is(header, div) p可以选择的元素 #:where(header, div) p与 :is 相同 #a:has(> img)包含 img 元素的 a 元素 #::first-letter第一行的第一个字母 #::first-line第一行应用样式 # CSS 字体 属性 属性说明font-family:字体族名或通用字体族名 #font-size:字体的大小 #letter-spacing:文本字符的间距 #line-height:多行文本间距 #font-weight:粗细程度 #font-style:字体样式 #text-decoration:文本的修饰线外观 #text-align:相对它的块父元素对齐 #text-transform:指定文本大小写 #

另见: Font

速记 font: italic 400 14px / 1.5 sans-serif ┈┈┬┈┈┈ ┈┬┈ ┈┬┈┈ ┈┬┈ ┈┬┈┈┈┈┈┈┈┈ 样式 粗细 大小(必需的) 行高 字体(必需的) 示例 font-family: Arial, sans-serif; font-size: 12pt; letter-spacing: 0.02em; 大小写 div { /* 首字母大写 Hello */ text-transform: capitalize; /* 字母大写 HELLO */ text-transform: uppercase; /* 字母小写 hello */ text-transform: lowercase; } @font-face @font-face { font-family: 'Glegoo'; src: url('../Glegoo.woff'); } CSS 颜色 命名颜色 color: red; color: orange; color: tan; color: rebeccapurple;

更多标准颜色名称

十六进制颜色 color: #090; color: #009900; color: #090a; color: #009900aa; rgb() 颜色 color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34.0 12 64 / 60%); color: rgba(34.6 12 64 / 30%); HSL 颜色 color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30.0 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); 其它 color: inherit; color: initial; color: unset; color: transparent; color: currentcolor; /* 关键字 */ 全局值 /* 全局值 */ color: inherit; color: initial; color: unset; CSS 背景 属性 属性说明background:(速记)background-color:查看: Colorsbackground-image:一个或者多个背景图像background-position:背景图片设置初始位置background-size:背景图片大小background-clip:背景(图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面background-repeat:图像重复方式background-attachment:scroll/fixed/local 速记 background: #ff0 url(a.jpg) left top / 100px auto no-repeat fixed; #abc url(b.png) center center / cover repeat-x local; ┈┬┈┈ ┈┬┈┈┈┈┈┈┈ ┈┬┈┈ ┈┬┈ ┈┈┬┈┈┈┈┈┈┈ ┈┈┬┈┈┈┈┈┈ ┈┈┬┈┈┈ 颜色 图片 位置x 位置x 图片大小 图像重复方式 位置是在视口内固定 示例 background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; background: url(img_man.jpg) no-repeat center; background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(13,232,230,1) 35%, rgba(0,212,255,1) 100%); CSS 盒子模型 最大值/最小值 .column { max-width: 200px; /* 最大宽度 200 像素 */ width: 500px; /* 宽度 500 像素 */ }

另见: max-width / min-width / max-height / min-height

边距/补白 .block-one { margin: 20px; /* 边距 20 像素 */ padding: 10px; /* 补白 10 像素 */ }

另见: 边距(margin) / 补白(padding)

Box-sizing .container { /* 设置的边框和补白的值是包含在 width 内的 */ box-sizing: border-box; }

另见: box-sizing

能见度 .invisible-elements { visibility: hidden; /* 隐藏元素 */ }

另见: Visibility

Auto 关键字 div { /* 览器自己选择一个合适的外边距 */ margin: auto; }

另见: 边距(margin)

溢出(Overflow) .small-block { /* 浏览器总是显示滚动条 */ overflow: scroll; }

另见: 溢出(overflow)

CSS 动画 速记 animation: bounce 300ms linear 100ms infinite alternate-reverse both reverse ┈┬┈┈ ┈┬┈┈┈ ┈┬┈┈┈┈ ┈┈┬┈┈ ┈┈┈┬┈┈┈┈ ┈┈┬┈┈┈┈┈┈┈┈┈┈┈┈┈┈ ┈┈┬┈┈┈ ┈┈┬┈┈┈ 动画名 动画时间 缓动函数 延迟 运行的次数 动画是否反向播放 如何将样式应用于其目标 是否运行或者暂停 属性 属性说明animation:(速记)animation-name:动画名 #animation-duration:动画周期的时长 #animation-timing-function:缓动函数 #animation-delay:延迟 #animation-iteration-count:运行的次数 #animation-direction:动画是否反向播放 #animation-fill-mode:如何将样式应用于其目标 #animation-play-state:是否运行或者暂停 #

另见: 动画(Animation)

示例 /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes duration | timing-function | delay | name */ animation: 3s linear 1s slidein; /* @keyframes duration | name */ animation: 3s slidein; animation: 4s linear 0s infinite alternate move_eye; animation: bounce 300ms linear 0s infinite normal; animation: bounce 300ms linear infinite; animation: bounce 300ms linear infinite alternate-reverse; animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal; Javascript 事件 .one('webkitAnimationEnd oanimationend msAnimationEnd animationend') CSS Flexbox 简单实例 .container { display: flex; } .container > div { flex: 1 1 auto; } 容器 .container { display: flex; display: inline-flex; flex-direction: row; /* ltr - 行(左向右) ▶ */ flex-direction: row-reverse; /* rtl - 行(右向左) ◀ */ flex-direction: column; /* top-bottom ▼ */ flex-direction: column-reverse; /* bottom-top ▲ */ flex-wrap: nowrap; /* 摆放到一行 */ flex-wrap: wrap; /* 被打断到多个行中 */ align-items: flex-start; /* 垂直对齐 - 顶部 */ align-items: flex-end; /* 垂直对齐 - 底部 */ align-items: center; /* 垂直对齐 - 中间 */ align-items: stretch; /* 所有人都一样的高度 (默认) */ justify-content: flex-start; /* [◀◀◀ ] */ justify-content: center; /* [ ■■■ ] */ justify-content: flex-end; /* [ ▶▶▶] */ justify-content: space-between; /* [◀ ■ ▶] */ justify-content: space-around; /* [ ■ ■ ■ ] */ justify-content: space-evenly; /* [ ■ ■ ■ ] */ } 子元素 .container > div { /* 这个: */ flex: 1 0 auto; /* 相当于这个： */ flex-grow: 1; flex-shrink: 0; flex-basis: auto; order: 1; align-self: flex-start; /* left */ margin-left: auto; /* right */ } justify-content justify-content: flex-start | flex-end | center | space-between

flex-start：左对齐(默认值)

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆╭┈┈╮╭┈╮╭┈┈┈╮ ┆ ┆╰┈┈╯╰┈╯╰┈┈┈╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

flex-end：右对齐

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈╮╭┈╮╭┈┈┈╮┆ ┆ ╰┈┈╯╰┈╯╰┈┈┈╯┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

center： 居中

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈╮╭┈╮╭┈┈┈╮ ┆ ┆ ╰┈┈╯╰┈╯╰┈┈┈╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

space-between：两端对齐，项目之间的间隔都相等

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆╭┈┈╮ ╭┈╮ ╭┈┈┈╮┆ ┆╰┈┈╯ ╰┈╯ ╰┈┈┈╯┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈╮ ╭┈╮ ╭┈┈┈╮ ┆ ┆ ╰┈┈╯ ╰┈╯ ╰┈┈┈╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

上面示例，假设主轴为从左到右

flex-wrap flex-wrap: nowrap | wrap | wrap-reverse;

nowrap：不换行(默认)

╭1╮╭2╮╭3╮╭4╮╭5╮╭6╮╭7╮╭8╮╭9╮╭10╮ ╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈┈╯

wrap：换行，第一行在 上方

╭1┈╮ ╭2┈╮ ╭3┈╮ ╭4┈╮ ╭5┈╮ ╭6┈╮ ╭7┈╮ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╭8┈╮ ╭9┈╮ ╭10╮ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯

wrap-reverse：换行，第一行在 下方

╭8┈╮ ╭9┈╮ ╭10╮ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╭1┈╮ ╭2┈╮ ╭3┈╮ ╭4┈╮ ╭5┈╮ ╭6┈╮ ╭7┈╮ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯

项目都排在一条线（又称"轴线"）上

flex-direction flex-direction: row | row-reverse | column | column-reverse;

---

╭┈┈╮ ▲ ╭┈┈╮ ┆ ╰┈┈╯ ┆ ╰┈┈╯ ┆ ╭┈┈╮ ┆ ╭┈┈╮ ┆ ╰┈┈╯ ┆ ╰┈┈╯ ┆ ┈┈┈┈┈┈┈┈┈┈┈▶ ◀┈┈┈┈┈┈┈┈┈┈┈ ╭┈┈╮ ┆ ╭┈┈╮ ┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╰┈┈╯ ┆ ╰┈┈╯ ▼ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┈┬┈┈┈┈┈┈ ┈┬┈┈┈┈┈┈ ┈┬┈┈┈┈┈┈┈┈┈┈┈ ┈┬┈┈┈┈┈┈┈┈┈┈┈ column-reverse column row row-reverse

属性决定主轴的方向（即项目的排列方向）

align-items align-items: flex-start | flex-end | center | baseline | stretch;

---

▶ flex-start(起点对齐) ▶ flex-end(终点对齐) ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ╭┈┈╮ ┆ ┆ ╰┈┈╯ ┆ ┆ ╰┈┈╯ ┆ ┆ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ┆ ┆ ╭┈┈╮ ┆ ┆ ┆ ┆ ┆ ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ▶ center(中点对齐) ▶ stretch(占满整个容器的高度) ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ╭┈┈╮ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ╰┈┈╯ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ╰┈┈╯ ┆ ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ▶ baseline(第一行文字的基线对齐) ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈╮ ┆ ┆ ┆ ┆ ╭┈┈┈┈╮ ╭┈┈┈┈╮ ┆ ┆ ╭┈┈┈┈╮╭┈┈┈┈╮┆ ┆ ┆ text ┆ ┆text┆ ┆text┆ ┆ text ┆ ┆text┆┆text┆┆ ┆ ┆ ┆ ╰┈┈┈┈╯ ┆ ┆ ┆ ┆ ╰┈┈┈┈╯┆ ┆┆ ┆ ╰┈┈┈┈┈┈╯ ╰┈┈┈┈╯ ╰┈┈┈┈┈┈╯ ╰┈┈┈┈╯┆ ┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ align-content align-content: flex-start | flex-end | center | space-between | space-around | stretch;

---

▶ flex-start(起点对齐) ▶ flex-end(终点对齐) ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆ ┆ ┆ ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆ ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆ ┆ ╭┈┈┈╮╭╮ ┆ ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆ ┆ ╰┈┈┈╯╰╯ ┆ ┆ ╭┈┈┈╮╭╮ ┆ ┆ ┆ ┆ ╰┈┈┈╯╰╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ▶ center(中点对齐) ▶ stretch(满整个交叉轴) ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆ ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆ ┆ ┆ ┆┆ ┆┆ ┆┆┆┆ ┆ ┆ ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆ ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆ ┆ ╭┈┈┈╮╭╮ ┆ ┆ ╭┈┈┈╮╭╮╭┈╮ ┆ ┆ ╰┈┈┈╯╰╯ ┆ ┆ ┆ ┆┆┆┆ ┆ ┆ ┆ ┆ ┆ ╰┈┈┈╯╰╯╰┈╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ▶ space-between(两端对齐) ▶ space-around(均匀分布项目) ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆ ┆ ┆ ┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆ ┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆ ┆ ┆ ┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ┆ ┆ ╰┈┈╯ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ order .item { order: <integer>; }

---

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ ╭1┈╮ ╭1┈┈╮ ╭1┈╮ ╭2┈╮ ╭3┈┈┈┈┈┈╮ ┆ ┆ ╭2┈┈┈┈╮ ┆ ┆ ╰┈┈╯ ╰┈┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈┈┈┈┈┈╯ ┆ ┆ ╰┈┈┈┈┈╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ╭2┈┈┈┈╮ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈╯ ┆ ┆ ╭-┈┈╮ ╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮ ┆ ┆ ╭99┈┈┈╮ ┆ ┆ ┆-1 ┆ ┆ 1 ┆ ┆ 2 ┆ ┆ 5 ┆ ┆ ┆ ┆ ┆ ┆ ┆ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯ ┆ ┆ ╰┈┈┈┈┈╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

属性 order 定义项目的排列顺序。数值越小，排列越靠前，默认为 0

flex-grow .item { flex-grow: <number>; /* default 0 */ }

---

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈1┈┈╮╭┈┈2┈┈╮╭┈┈1┈┈╮ ┆ ┆ ╰┈┈┈┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈┈╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈1┈╮╭┈┈┈┈2┈┈┈┈╮╭┈1┈╮ ┆ ┆ ╰┈┈┈╯╰┈┈┈┈┈┈┈┈┈╯╰┈┈┈╯ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

属性 flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

CSS Flexbox 技巧 垂直中心 .container { display: flex; } .container > div { width: 100px; height: 100px; margin: auto; } 垂直中心 (2) .container { display: flex; /* 垂直的 */ align-items: center; /* 水平的 */ justify-content: center; } 重新排序 .container > .top { order: 1; } .container > .bottom { order: 2; } 移动布局 .container { display: flex; flex-direction: column; } .container > .top { flex: 0 0 100px; } .container > .content { flex: 1 0 auto; }

一个固定高度的顶部栏和一个动态高度的内容区域

Table-like 像表格 .container { display: flex; } /* 这里的“px”值只是建议的百分比 */ .container > .checkbox { flex: 1 0 20px; } .container > .subject { flex: 1 0 400px; } .container > .date { flex: 1 0 120px; }

这会创建具有不同宽度的列，但会根据情况相应地调整大小

Vertical 垂直的 .container { align-items: center; }

垂直居中所有项目

左和右 .menu > .left { align-self: flex-start; } .menu > .right { align-self: flex-end; } CSS Grid 网格布局 网格模板列 #grid-container { display: grid; width: 100px; grid-template-columns: 20px 20% 60%; } fr 相对单位 .grid { display: grid; width: 100px; grid-template-columns: 1fr 60px 1fr; } Grid Gap 网格间隙 /* 行间距为 20px */ /* 列之间的距离是 10px */ #grid-container { display: grid; grid-gap: 20px 10px; } CSS 网格行

CSS 语法:

grid-row: grid-row-start / grid-row-end; 实例 .item { grid-row: 1 / span 2; } CSS 块级网格 #grid-container { display: block; } CSS 内联级别网格 #grid-container { display: inline-grid; } CSS 网格行间隙 grid-row-gap: length;

任何合法的长度值，例如 px 或 %。0 是默认值

CSS 网格区域 .item1 { grid-area: 2 / 1 / span 2 / span 3; } minmax() 函数 .grid { display: grid; grid-template-columns: 100px minmax(100px, 500px) 100px; }

定义了一个长宽范围的闭区间

grid-row-start & grid-row-end

CSS 语法:

grid-row-start: auto|row-line;grid-row-end: auto|row-line|span n; 实例 grid-row-start: 2; grid-row-end: span 2; 对齐项目 #container { display: grid; justify-items: center; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } CSS 网格模板区域 .item { grid-area: nav; } .grid-container { display: grid; grid-template-areas: 'nav nav . .' 'nav nav . .'; } Justify Self #grid-container { display: grid; justify-items: start; } .grid-items { justify-self: end; }

网格项目位于行的右侧（末尾）

对齐项目 #container { display: grid; align-items: start; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } CSS 动态内容 变量

定义 CSS 变量

:root { --first-color: #16f; --second-color: #ff7; }

变量用法

#firstParagraph { background-color: var(--first-color); color: var(--second-color); }

另见: CSS Variable

计数器 /* Set "my-counter" to 0 */ counter-set: my-counter; /* Increment "my-counter" by 1 */ counter-increment: my-counter; /* Decrement "my-counter" by 1 */ counter-increment: my-counter -1; /* Reset "my-counter" to 0 */ counter-reset: my-counter;

另见: Counter set

使用计数器 body { counter-reset: section; } h3::before { counter-increment: section; content: "Section." counter(section); } ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section, ".") " "; } CSS 函数 calc() div { width: calc(100% - 30px); height: calc(100% - 30px); }

calc() CSS 函数允许您在指定 CSS 属性值时执行计算

clamp() font-size: clamp(1rem, 10vw, 2rem);

设置随窗口大小改变的字体大小

attr() p:before { content: attr(data-foo) " "; }

获取选择到的元素的某一 HTML 属性值

counter()

返回一个代表计数器的当前值的字符串

<ol> <li></li> <li></li> <li></li> </ol> ol { counter-reset: listCounter; } li { counter-increment: listCounter; } li::after { content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]"; }

显示

1. [1]==[I] 2. [2]==[II] 3. [3]==[III] counters() ol { counter-reset: count; } li { counter-increment: count; } li::marker { content: counters(count, '.', upper-alpha) ') '; } li::before { content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); }

嵌套计数器，返回表示指定计数器当前值的连接字符串

env() <meta name="viewport" content="... viewport-fit=cover">

---

body { padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); }

用户代理定义的环境变量值插入你的 CSS 中

fit-content() fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch)

将给定大小夹紧为可用大小

max()

从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值

width: max(10vw, 4em, 80px);

例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽

min() width: min(1vw, 4em, 80px);

从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值

minmax() minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) minmax(100px, max-content) minmax(min-content, 400px) minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) repeat() 轨道列表的重复片段 repeat(auto-fill, 250px) repeat(auto-fit, 250px) repeat(4, 1fr) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end])

定义了一个长宽范围的闭区间

url() background: url("topbanner.png") #00D no-repeat fixed; list-style: square url(http:// .example /redball.png) var() :root { --main-bg-color: pink; } body { background-color: var(--main-bg-color); }

代替元素中任何属性中的值的任何部分

CSS 技巧 强制不换行 p { white-space:nowrap; } 强制换行 p { word-break:break-all; /* 英文 */ white-space:pre-wrap; /* 中文 */ } 滚动条平滑 html { scroll-behavior: smooth; }

点击我页面会平滑滚动到入门

修改浏览器自动填充 input 样式 input[type="text"]:autofill { box-shadow: 0 0 0 1000px #000 inset; -webkit-text-fill-color: white; }

另见: :autofill

修改 input type=“color” 样式 input[type="color"] { -webkit-appearance: none; border: none; width: 32px; height: 32px; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none; } 忽略用作间距的换行符 <br /> br + br { display: none; } 使用 :empty 隐藏空 HTML 元素 :empty { display: none; } CSS 重置 html { box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

有助于在不同的浏览器之间强制样式一致性，并为样式元素提供干净的盒子

设置光标样式 body { caret-color: red; } 设置整个页面灰色 html { -webkit-filter: grayscale(.95); }

上面示例设置了当前卡片灰色

<textarea>自动增加其高度 textarea { form-sizing: normal } 定义容器的长宽比 div { aspect-ratio: 1/1 }

属性 aspect-ratio 可以非常容易的定义一个容器的长宽比

使用 unset 而不是重置所有属性

使用 all 速记来指定元素的所有属性。将值设置为 unset 会将元素的属性更改为其初始值：

button { all: unset; }

注意：IE11 不支持 all 和 unset 速记

超出显示省略号 p { overflow: hidden;/*超出部分隐藏*/ /* 超出部分显示省略号 */ text-overflow:ellipsis; /* 规定段落中的文本不进行换行 */ white-space: nowrap; width: 250px;/*需要配合宽度来使用*/ } 给正文添加行高

您不需要为每个 <p>、<h*> 等添加行高。相反，将其添加到正文：

body { line-height: 1.5; }

这样文本元素可以很容易地从 body 继承

使用图像作为光标 div { cursor: url('path-to-image.png'), url('path-to-fallback-image.png'), auto; /* 表情符号作为光标 */ cursor: url("data:image/svg+xml;utf8,<svg xmlns='http:// .w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"), auto; } 文本溢出显示省略号 .overflow-ellipsis { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

一行文本截断显示省略号 (…)

将文本截断到特定的行数 .overflow-truncate { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

多行文本截断到特定的行数，末尾显示省略号 (…)

粘性定位元素 .sticky { position: sticky; top: 0; }

属性 sticky 能在滚动到顶部的位置固定住元素

使用带有空链接的属性选择器 a[href^="http"]:empty::before { content: attr(href); }

如果 <a> 标签里面没有内容，将 href 的值作为内容展示

使用 :root 表示灵活类型

响应式布局中的字体大小应该能够根据每个视口进行调整，您可以使用 :root 根据视口高度和宽度计算字体大小

:root { font-size: calc(1vw + 1vh + .5vmin); }

您可以根据 :root 计算的值使用根 em 单位：

body { font: 1rem/1.6 sans-serif; } 吸附滚动 .container { height: 250px; overflow-x: scroll; display: flex; scroll-snap-type: x mandatory; column-gap: 10px; } .child { flex: 0 0 66%; width: 250px; background-color: #663399; scroll-snap-align: center; }

可用于 轮播图 效果，效果预览

类似 contenteditable 的样式 div { -webkit-user-modify: read-write-plaintext-only; }

通过样式来控制一个元素 div 是否可以编辑

等宽表格单元格

尝试使用 table-layout: fixed 以保持单元格宽度相等：

table { table-layout: fixed; } 利用属性选择器来选择空链接

当 <a> 元素没有文本内容，但有 href 属性的时候，显示它的 href 属性：

a[href^="http"]:empty::before { content: attr(href); } 给 “默认” 链接定义样式

给 “默认” 链接定义样式：

a[href]:not([class]) { color: #008000; text-decoration: underline; }

通常没有 class 属性，以上样式可以甄别它们，而且不会影响其它样式

用 rem 调整全局大小；用 em 调整局部大小

在根元素设置基本字体大小后 (html { font-size: 100%; }), 使用 em 设置文本元素的字体大小:

h2 { font-size: 2em; } p { font-size: 1em; }

然后设置模块的字体大小为 rem:

article { font-size: 1.25rem; } aside .module { font-size: .9rem; }

现在，每个模块变得独立，更容易、灵活的样式便于维护

隐藏没有静音、自动播放的影片

这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。如果没有静音，则不显示视频：

video[autoplay]:not([muted]) { display: none; }

再次，我们利用了 :not() 的优点

为更好的移动体验，为表单元素设置字体大小

当触发 <select> 的下拉列表时，为了避免表单元素在移动浏览器（iOS Safari 和其它）上的缩放，加上font-size：

input[type="text"], input[type="number"], select, textarea { font-size: 16px; } 使用指针事件来控制鼠标事件

指针事件允许您指定鼠标如何与其触摸的元素进行交互。要禁用按钮上的默认指针事件，例如：

button:disabled { opacity: .5; pointer-events: none; }

就这么简单

子元素选中父元素 div:has(img) { background: black; }

设置包含子元素 img 的 div 元素样式，还可以嵌套：

div:has(h2):has(ul) { background: black; } 在用作间距的换行符上设置 display: none

用户使用额外的换行符

br + br { display: none; } 给 body 添加行高 body { line-height: 1.5; }

您不需要为每个 <p>、<h*> 等分别添加行高。相反，将其添加到正文

检查本地是否安装了字体 @font-face { font-family: "Dank Mono"; src: /* Full name */ local("Dank Mono"), /* Postscript name */ local("Dank-Mono"), /* 否则，请下载它！ */ url("//...a.server/DankMono.woff"); } code { font-family: "Dank Mono", system-ui-monospace; }

您可以在远程获取字体之前检查是否在本地安装了字体，这也是一个很好的性能提示

获取 HTML 元素的属性 <a href=" example ">超链接</a>

attr HTML 元素的属性名。

a:after { content: " (" attr(href) ")"; } 为表单元素设置 :focus a:focus, button:focus, input:focus, select:focus, textarea:focus { box-shadow: none; outline: #000 dotted 2px; outline-offset: .05em; }

有视力的键盘用户依靠焦点来确定键盘事件在页面中的位置。使表单元素的焦点比浏览器的默认实现更加突出和一致

垂直居中任何东西 html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }

…还有 CSS 网格：

body { display: grid; height: 100vh; margin: 0; place-items: center center; } 图片对齐不变形 img { width: 200px; height: 200px; /** 确保图片按原始宽高比例进行缩放 */ object-fit: cover; object-position: left top; transition: 1s; } img:hover { /** 指定图片显示的位置，结合鼠标移动+过渡动画 */ object-position: right bottom; } 多行截断，展示省略号 .clamp { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

html 文本超过 3 行将被截断，显示省略号…

<p class="clamp"> 展示多行文本，超过 3 行将被截断，显示省略号... </p> 逗号分隔列表 ul > li:not(:last-child)::after { content: ","; }

使列表项看起来像一个真实的逗号分隔列表，使用 :not() 伪类，最后一项不会添加逗号

表格中数字使用制表数字 .revenue { font-variant-numeric: tabular-nums; }

表格中一列数字列对其

另见 CSS selectors cheatsheet (frontend30 )MDN: Using CSS flexboxUltimate flexbox cheatsheetGRID: A simple visual cheatsheetCSS Tricks: A Complete Guide to GridBrowser supportFlex 布局教程：语法篇CSS 专业技巧