备忘清单

列出了选择器语法、属性、单位和其他有用的信息

1<link
2  href="./path/to/stylesheet/style.css"
3  rel="stylesheet"
4  type="text/css"
5>

内部样式表 <style>

1<style>
2  body {
3    background-color: linen;
4  }
5</style>

内联样式 style

1<h2 style="text-align: center;">
2  居中文本
3</h2>
4<p style="color: blue; font-size: 18px;">
5  蓝色，18像素文本
6</p>

添加 class 类

1<div class="classname"></div>
2<div class="class1 ... classn"></div>

支持一个元素上的多个类

!important

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

覆盖所有以前的样式规则

选择器

1h1 { } 
2#job-title { }
3div.hero { }
4div > p { }

查看: CSS 选择器

文本颜色

1color: #2a2aff;
2color: green;
3color: rgb(34, 12, 64, 0.6);
4color: hsla(30 100% 50% / 0.6);

查看: Colors

背景

1background-color: blue;
2background-image: url("nyan-cat.gif");
3background-image: url("../image.png");

查看: Backgrounds

字体

1.page-title {
2  font-weight: bold;
3  font-size: 30px;
4  font-family: "Courier New";
5}

查看: Fonts

定位

1.box {
2  position: relative;
3  top: 20px;
4  left: 20px;
5}

动画

1animation: 300ms linear 0s infinite;
2animation: bounce 300ms linear infinite;

查看: Animation

注释

1/* 这是一行注释 */
2/* 这是
3   多行注释 */

Flex 布局

1div {
2  display: flex;
3  justify-content: center;
4}
5div {
6  display: flex;
7  justify-content: flex-start;
8}

查看: Flexbox | Flex Tricks

Grid 布局

1#container {
2  display: grid;
3s  grid: repeat(2, 60px) / auto-flow 80px;
4}
5#container > div {
6  background-color: #8ca0ff;
7  width: 50px;
8  height: 50px;
9}

查看: Grid Layout

变量和计数器

1counter-set: subsection;
2counter-increment: subsection;
3counter-reset: subsection 0;
4:root {
5  --bg-color: brown;
6}
7element {
8  background-color: var(--bg-color);
9}

查看: 动态内容

CSS 选择器

示例

组选择器

1h1, h2 {
2    color: red;
3}

链选择器

1h3.section-heading {
2    color: blue;
3}

属性选择器

1div[attribute="SomeValue"] {
2    background-color: red;
3}

第一个子选择器

1p:first-child {
2    font-weight: bold;
3}

无子选择器

1.box:empty {
2  background: lime;
3  height: 80px;
4  width: 80px;
5}

基础

选择器 说明
* 所有元素
div 所有 div 标签
.classname 具有类的所有元素
#idname 带 ID 的元素
div,p 所有 div 和段落
#idname * #idname 中的所有元素

组合器

选择器 说明
div.classname 具有特定类名的 div
div#idname 具有特定 ID 的 div
div p div 中的所有段落
div > p 父元素是 div 的 P 标签
div + p div 之后的第一个同级 P 标签
div ~ p div 之后所有的同级 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 访问链接 # 
1/* 未访问链接 */
2a:link { color: blue; }        
3/* 已访问链接 */
4a:visited { color: purple; }   
5/* 用户鼠标悬停 */
6a:hover { background: yellow; }
7/* 激活链接 */
8a:active { color: red; }

伪类

选择器 说明
p::after 在 p 之后添加内容 #
p::before 在 p 之前添加内容 #
p::first-letter p中的第一个字母 #
p::first-line p 中的第一行 #
::selection 由用户选择 #
::placeholder 占位符 属性 [#](https://developer.mozilla.org/zh-CN/docs/
:root 文档根元素 #
:target 突出显示活动锚点 #
div:empty 没有子元素的元素 #
p:lang(en) 带有 en 语言属性的 P #
:not(span) 不是跨度的元素 #
:host shadowDOM 中选择自定义元素 #
::backdrop 处于全屏模式的元素样式 #
::marker li 项目符号或者数字 #
::file-selector-button type=“file” input 按钮 #

输入伪类

选择器 说明
input:checked 检查 input #
input:disabled 禁用 input #
input:enabled 启用的 input #
input:default 有默认值的元素 #
input:blank 空的输入框 #
input:focus input 有焦点 #
input:in-range 范围内的值 #
input:out-of-range input 值超出范围 #
input:valid input 有效值 #
input:invalid input 无效值 #
input:optional 没有必需的属性 #
input:required 带有必需属性的 input #
input:read-only 具有只读属性 #
input:read-write 没有只读属性 #
input:indeterminate 带有 indeterminate 状态 [#](https://

结构伪类

选择器 说明
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: 指定文本大小写 #

速记

1font: italic    400     14px    /     1.5        sans-serif
2      ┈┈┬┈┈┈    ┈┬┈     ┈┬┈┈          ┈┬┈        ┈┬┈┈┈┈┈┈┈┈
3       样式      粗细    大小(必需的)    行高        字体(必需的)

示例

1font-family: Arial, sans-serif;
2font-size: 12pt;
3letter-spacing: 0.02em;

大小写

1div {
2  /* 首字母大写 Hello */
3  text-transform: capitalize;
4  /* 字母大写 HELLO */
5  text-transform: uppercase;
6  /* 字母小写 hello */
7  text-transform: lowercase;
8}

@font-face

1@font-face {
2  font-family: 'Glegoo';
3  src: url('../Glegoo.woff');
4}

CSS 颜色

命名颜色

1color: red;
2color: orange;
3color: tan;
4color: rebeccapurple;

更多标准颜色名称

十六进制颜色

1color: #090;
2color: #009900;
3color: #090a;
4color: #009900aa;

rgb() 颜色

1color: rgb(34, 12, 64, 0.6);
2color: rgba(34, 12, 64, 0.6);
3color: rgb(34 12 64 / 0.6);
4color: rgba(34 12 64 / 0.3);
5color: rgb(34.0 12 64 / 60%);
6color: rgba(34.6 12 64 / 30%);

HSL 颜色

1color: hsl(30, 100%, 50%, 0.6);
2color: hsla(30, 100%, 50%, 0.6);
3color: hsl(30 100% 50% / 0.6);
4color: hsla(30 100% 50% / 0.6);
5color: hsl(30.0 100% 50% / 60%);
6color: hsla(30.2 100% 50% / 60%);

其它

1color: inherit;
2color: initial;
3color: unset;
4color: transparent;
5color: currentcolor; /* 关键字 */

全局值

1/* 全局值 */
2color: inherit;
3color: initial;
4color: unset;

CSS 背景

属性

属性 说明
background: (速记)
background-color: 查看: Colors
background-image: 一个或者多个背景图像
background-position: 背景图片设置初始位置
background-size: 背景图片大小
background-clip: 背景(图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面
background-repeat: 图像重复方式
background-attachment: scroll/fixed/local

速记

1background: #ff0   url(a.jpg)   left     top    /  100px auto   no-repeat   fixed;
2            #abc   url(b.png)   center   center /  cover        repeat-x    local;
3            ┈┬┈┈    ┈┬┈┈┈┈┈┈┈   ┈┬┈┈     ┈┬┈       ┈┈┬┈┈┈┈┈┈┈   ┈┈┬┈┈┈┈┈┈   ┈┈┬┈┈┈
4            颜色     图片         位置x    位置x       图片大小     图像重复方式  位置是在视口内固定

示例

1background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
2background: url(img_man.jpg) no-repeat center;
3background: rgb(2,0,36);
4background: linear-gradient(90deg, rgba(2,0,36,1) 0%,
5  rgba(13,232,230,1) 35%,
6  rgba(0,212,255,1) 100%);

CSS 盒子模型

最大值/最小值

1.column {
2  max-width: 200px; /* 最大宽度 200 像素 */
3  width: 500px;     /* 宽度 500 像素 */
4}

边距/补白

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

Box-sizing

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

能见度

1.invisible-elements {
2  visibility: hidden; /* 隐藏元素 */
3}

Auto 关键字

1div {
2  /* 览器自己选择一个合适的外边距 */
3  margin: auto;
4}

溢出(Overflow)

1.small-block {
2  /* 浏览器总是显示滚动条 */
3  overflow: scroll;
4}

CSS 动画

速记

1animation:  bounce   300ms      linear     100ms    infinite   alternate-reverse  both                   reverse  
2            ┈┬┈┈     ┈┬┈┈┈      ┈┬┈┈┈┈     ┈┈┬┈┈    ┈┈┈┬┈┈┈┈   ┈┈┬┈┈┈┈┈┈┈┈┈┈┈┈┈┈  ┈┈┬┈┈┈                 ┈┈┬┈┈┈
3            动画名    动画时间     缓动函数    延迟     运行的次数   动画是否反向播放      如何将样式应用于其目标    是否运行或者暂停

属性

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

示例

 1/* @keyframes duration | timing-function | delay |
 2   iteration-count | direction | fill-mode | play-state | name */
 3animation: 3s ease-in 1s 2 reverse both paused slidein;
 4/* @keyframes duration | timing-function | delay | name */
 5animation: 3s linear 1s slidein;
 6/* @keyframes duration | name */
 7animation: 3s slidein;
 8animation: 4s linear 0s infinite alternate move_eye;
 9animation: bounce 300ms linear 0s infinite normal;
10animation: bounce 300ms linear infinite;
11animation: bounce 300ms linear infinite alternate-reverse;
12animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

Javascript 事件

1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')

CSS Flexbox

简单实例

1.container {
2  display: flex;
3}
1.container > div {
2  flex: 1 1 auto;
3}

容器

 1.container {
 2  display: flex;
 3  display: inline-flex;
 4  
 5  flex-direction: row;            /* ltr - 行(左向右) ▶ */
 6  flex-direction: row-reverse;    /* rtl - 行(右向左) ◀ */
 7  flex-direction: column;         /* top-bottom ▼ */
 8  flex-direction: column-reverse; /* bottom-top ▲ */
 9  
10  flex-wrap: nowrap;       /* 摆放到一行 */
11  flex-wrap: wrap;         /* 被打断到多个行中 */
12  
13  align-items: flex-start; /* 垂直对齐 - 顶部 */
14  align-items: flex-end;   /* 垂直对齐 - 底部 */
15  align-items: center;     /* 垂直对齐 - 中间 */
16  align-items: stretch;    /* 所有人都一样的高度 (默认) */
17  
18  justify-content: flex-start;    /* [◀◀◀        ] */
19  justify-content: center;        /* [    ■■■    ] */
20  justify-content: flex-end;      /* [        ▶▶▶] */
21  justify-content: space-between; /* [◀    ■    ▶] */
22  justify-content: space-around;  /* [ ■   ■   ■ ] */
23  justify-content: space-evenly;  /* [  ■  ■  ■  ] */
24}

子元素

 1.container > div {
 2
 3  /* 这个: */
 4  flex: 1 0 auto;
 5  /* 相当于这个： */
 6  flex-grow: 1;
 7  flex-shrink: 0;
 8  flex-basis: auto;
 9
10  order: 1;
11
12  align-self: flex-start;  /* left */
13  margin-left: auto;       /* right */
14}

justify-content

1justify-content: flex-start | flex-end | center | space-between

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

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

flex-end：右对齐

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

center： 居中

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

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

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

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

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

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

flex-wrap

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

nowrap：不换行(默认)

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

wrap：换行，第一行在 上方

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

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

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

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

flex-direction

1flex-direction: row | row-reverse | column | column-reverse;
1╭┈┈╮  ▲         ╭┈┈╮  ┆
2╰┈┈╯  ┆         ╰┈┈╯  ┆
3╭┈┈╮  ┆         ╭┈┈╮  ┆
4╰┈┈╯  ┆         ╰┈┈╯  ┆     ┈┈┈┈┈┈┈┈┈┈┈▶    ◀┈┈┈┈┈┈┈┈┈┈┈
5╭┈┈╮  ┆         ╭┈┈╮  ┆    ╭┈┈╮ ╭┈┈╮ ╭┈┈╮  ╭┈┈╮ ╭┈┈╮ ╭┈┈╮
6╰┈┈╯  ┆         ╰┈┈╯  ▼    ╰┈┈╯ ╰┈┈╯ ╰┈┈╯  ╰┈┈╯ ╰┈┈╯ ╰┈┈╯
7┈┬┈┈┈┈┈┈        ┈┬┈┈┈┈┈┈    ┈┬┈┈┈┈┈┈┈┈┈┈┈   ┈┬┈┈┈┈┈┈┈┈┈┈┈ 
8column-reverse  column       row             row-reverse

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

align-items

1align-items: flex-start | flex-end | center | baseline | stretch;
 1  ▶ flex-start(起点对齐)    ▶ flex-end(终点对齐)
 2╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
 3┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆  ┆                     ┆
 4┆ ┆  ┆ ┆  ┆ ╰┈┈╯ ┆  ┆ ┆  ┆      ╭┈┈╮           ┆
 5┆ ╰┈┈╯ ┆  ┆      ╰┈┈╯ ┆  ┆ ╭┈┈╮ ┆  ┆      ╭┈┈╮ ┆
 6┆      ╰┈┈╯           ┆  ┆ ┆  ┆ ┆  ┆ ╭┈┈╮ ┆  ┆ ┆
 7┆                     ┆  ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆
 8╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
 9  ▶ center(中点对齐)        ▶ stretch(占满整个容器的高度)
10╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
11┆      ╭┈┈╮           ┆  ┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆
12┆ ╭┈┈╮ ┆  ┆      ╭┈┈╮ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
13┆ ┆  ┆ ┆  ┆ ╭┈┈╮ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
14┆ ┆  ┆ ┆  ┆ ╰┈┈╯ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
15┆ ╰┈┈╯ ┆  ┆      ╰┈┈╯ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
16┆      ╰┈┈╯           ┆  ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆
17╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
18  ▶ baseline(第一行文字的基线对齐)
19╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
20┆  ╭┈┈┈┈┈┈╮               ╭┈┈┈┈┈┈╮             ┆
21┆  ┆      ┆ ╭┈┈┈┈╮ ╭┈┈┈┈╮ ┆      ┆ ╭┈┈┈┈╮╭┈┈┈┈╮┆
22┆  ┆ text ┆ ┆text┆ ┆text┆ ┆ text ┆ ┆text┆┆text┆┆
23┆  ┆      ┆ ╰┈┈┈┈╯ ┆    ┆ ┆      ┆ ╰┈┈┈┈╯┆    ┆┆
24┆  ╰┈┈┈┈┈┈╯        ╰┈┈┈┈╯ ╰┈┈┈┈┈┈╯       ╰┈┈┈┈╯┆
25┆                                              ┆
26╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

align-content

1align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 1 ▶ flex-start(起点对齐)     ▶ flex-end(终点对齐)
 2╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
 3┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆  ┆                      ┆
 4┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆  ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆
 5┆ ╭┈┈┈╮╭╮              ┆  ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆
 6┆ ╰┈┈┈╯╰╯              ┆  ┆ ╭┈┈┈╮╭╮              ┆
 7┆                      ┆  ┆ ╰┈┈┈╯╰╯              ┆
 8╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
 9 ▶ center(中点对齐)         ▶ stretch(满整个交叉轴)
10╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
11┆                      ┆  ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆
12┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆  ┆ ┆  ┆┆ ┆┆   ┆┆┆┆    ┆ ┆
13┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆  ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆
14┆ ╭┈┈┈╮╭╮              ┆  ┆ ╭┈┈┈╮╭╮╭┈╮           ┆
15┆ ╰┈┈┈╯╰╯              ┆  ┆ ┆   ┆┆┆┆ ┆           ┆
16┆                      ┆  ┆ ╰┈┈┈╯╰╯╰┈╯           ┆
17╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
18 ▶ space-between(两端对齐)  ▶ space-around(均匀分布项目)
19╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ 
20┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆  ┆                      ┆ 
21┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆  ┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆ 
22┆                      ┆  ┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆ 
23┆                      ┆  ┆                      ┆ 
24┆                      ┆  ┆ ╭┈┈╮                 ┆ 
25┆ ╭┈┈╮                 ┆  ┆ ╰┈┈╯                 ┆ 
26┆ ╰┈┈╯                 ┆  ┆                      ┆ 
27╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

order

1.item {
2  order: <integer>;
3}
1╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
2┆ ╭1┈╮ ╭1┈┈╮ ╭1┈╮ ╭2┈╮ ╭3┈┈┈┈┈┈╮ ┆ ┆ ╭2┈┈┈┈╮ ┆
3┆ ╰┈┈╯ ╰┈┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈┈┈┈┈┈╯ ┆ ┆ ╰┈┈┈┈┈╯ ┆
4╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ╭2┈┈┈┈╮ ┆
5╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈╯ ┆
6┆ ╭-┈┈╮ ╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮   ┆ ┆ ╭99┈┈┈╮ ┆
7┆ ┆-1 ┆ ┆ 1 ┆ ┆ 2      ┆ ┆ 5 ┆   ┆ ┆ ┆     ┆ ┆
8┆ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯   ┆ ┆ ╰┈┈┈┈┈╯ ┆
9╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

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

flex-grow

1.item {
2  flex-grow: <number>; /* default 0 */
3}
1╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
2┆ ╭┈┈1┈┈╮╭┈┈2┈┈╮╭┈┈1┈┈╮ ┆
3┆ ╰┈┈┈┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈┈╯ ┆
4╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
5╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
6┆ ╭┈1┈╮╭┈┈┈┈2┈┈┈┈╮╭┈1┈╮ ┆
7┆ ╰┈┈┈╯╰┈┈┈┈┈┈┈┈┈╯╰┈┈┈╯ ┆
8╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

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

CSS Flexbox 技巧

垂直中心

1.container {
2  display: flex;
3}
4.container > div {
5  width: 100px;
6  height: 100px;
7  margin: auto;
8}

垂直中心 (2)

1.container {
2  display: flex;
3  /* 垂直的 */
4  align-items: center; 
5  /* 水平的 */
6  justify-content: center;
7}

重新排序

1.container > .top {
2 order: 1;
3}
4.container > .bottom {
5 order: 2;
6}

移动布局

 1.container {
 2  display: flex;
 3  flex-direction: column;
 4}
 5.container > .top {
 6  flex: 0 0 100px;
 7}
 8.container > .content {
 9  flex: 1 0 auto;
10}

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

Table-like 像表格

1.container {
2  display: flex;
3}
4/* 这里的“px”值只是建议的百分比 */
5.container > .checkbox { flex: 1 0 20px; }
6.container > .subject  { flex: 1 0 400px; }
7.container > .date     { flex: 1 0 120px; }

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

Vertical 垂直的

1.container {
2  align-items: center;
3}

垂直居中所有项目

左和右

1.menu > .left  { align-self: flex-start; }
2.menu > .right { align-self: flex-end; }

CSS Grid 网格布局

网格模板列

1#grid-container {
2  display: grid;
3  width: 100px;
4  grid-template-columns: 20px 20% 60%;
5}

fr 相对单位

1.grid {
2  display: grid;
3  width: 100px;
4  grid-template-columns: 1fr 60px 1fr;
5}

Grid Gap 网格间隙

1/* 行间距为 20px */
2/* 列之间的距离是 10px */
3#grid-container {
4  display: grid;
5  grid-gap: 20px 10px;
6}

CSS 网格行

CSS 语法:

  • grid-row: grid-row-start / grid-row-end;

实例

1.item {
2  grid-row: 1 / span 2;
3}

CSS 块级网格

1#grid-container {
2    display: block;
3}

CSS 内联级别网格

1#grid-container {
2  display: inline-grid;
3}

CSS 网格行间隙

1grid-row-gap: length;

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

CSS 网格区域

1.item1 {
2  grid-area: 2 / 1 / span 2 / span 3;
3}

minmax() 函数

1.grid {
2  display: grid;
3  grid-template-columns: 100px minmax(100px, 500px) 100px; 
4}

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

grid-row-start & grid-row-end

CSS 语法:

  • grid-row-start: auto|row-line;
  • grid-row-end: auto|row-line|span n;

实例

1grid-row-start: 2;
2grid-row-end: span 2;

对齐项目

1#container {
2  display: grid;
3  justify-items: center;
4  grid-template-columns: 1fr;
5  grid-template-rows: 1fr 1fr 1fr;
6  grid-gap: 10px;
7}

CSS 网格模板区域

1.item {
2  grid-area: nav;
3}
4.grid-container {
5  display: grid;
6  grid-template-areas:
7  'nav nav . .'
8  'nav nav . .';
9}

Justify Self

1#grid-container {
2  display: grid;
3  justify-items: start;
4}
5.grid-items {
6  justify-self: end;
7}

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

对齐项目

1#container {
2  display: grid;
3  align-items: start;
4  grid-template-columns: 1fr;
5  grid-template-rows: 1fr 1fr 1fr;
6  grid-gap: 10px;
7}

CSS 动态内容

变量

定义 CSS 变量

1:root {
2  --first-color: #16f;
3  --second-color: #ff7;
4}

变量用法

1#firstParagraph {
2  background-color: var(--first-color);
3  color: var(--second-color);
4}

计数器

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

使用计数器

1body { counter-reset: section; }
2h3::before {
3  counter-increment: section; 
4  content: "Section." counter(section);
5}
1ol {
2  counter-reset: section;   
3  list-style-type: none;
4}
5li::before {
6  counter-increment: section;
7  content: counters(section, ".") " "; 
8}

CSS 函数

calc()

1div {
2  width: calc(100% - 30px);
3  height: calc(100% - 30px);
4}

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

clamp()

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

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

attr()

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

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

counter()

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

1<ol>
2  <li></li>
3  <li></li>
4  <li></li>
5</ol>
 1ol {
 2  counter-reset: listCounter;
 3}
 4li {
 5  counter-increment: listCounter;
 6}
 7li::after {
 8  content: "[" counter(listCounter) "] == ["
 9    counter(listCounter, upper-roman) "]";
10}

显示

11. [1]==[I]
22. [2]==[II]
33. [3]==[III]

counters()

 1ol {
 2  counter-reset: count;
 3}
 4li {
 5  counter-increment: count;
 6}
 7li::marker {
 8   content: counters(count, '.', upper-alpha) ') ';
 9}
10li::before {
11  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
12}

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

env()

1<meta name="viewport" content="... viewport-fit=cover">
1body {
2  padding:
3    env(safe-area-inset-top, 20px)
4    env(safe-area-inset-right, 20px)
5    env(safe-area-inset-bottom, 20px)
6    env(safe-area-inset-left, 20px);
7}

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

fit-content()

1fit-content(200px)
2fit-content(5cm)
3fit-content(30vw)
4fit-content(100ch)

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

max()

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

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

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

min()

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

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

minmax()

1minmax(200px, 1fr)
2minmax(400px, 50%)
3minmax(30%, 300px)
4minmax(100px, max-content)
5minmax(min-content, 400px)
6minmax(max-content, auto)
7minmax(auto, 300px)
8minmax(min-content, auto)

repeat() 轨道列表的重复片段

1repeat(auto-fill, 250px)
2repeat(auto-fit, 250px)
3repeat(4, 1fr)
4repeat(4, [col-start] 250px [col-end])
5repeat(4, [col-start] 60% [col-end])

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

url()

1background: url("topbanner.png") #00D no-repeat fixed;
2list-style: square url(http://www.example.com/redball.png)

var()

1:root {
2  --main-bg-color: pink;
3}
4
5body {
6  background-color: var(--main-bg-color);
7}

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

CSS 技巧

强制不换行

1p {
2  white-space:nowrap;
3}

强制换行

1p {
2  word-break:break-all; /* 英文 */
3  white-space:pre-wrap; /* 中文 */
4}

滚动条平滑

1html {
2  scroll-behavior: smooth;
3}

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

修改浏览器自动填充 input 样式

1input[type="text"]:autofill {
2  box-shadow: 0 0 0 1000px #000 inset;
3  -webkit-text-fill-color: white;
4}

修改 input type=“color” 样式

 1input[type="color"] {
 2  -webkit-appearance: none;
 3  border: none;
 4  width: 32px;
 5  height: 32px;
 6}
 7input[type="color"]::-webkit-color-swatch-wrapper {
 8  padding: 0;
 9}
10input[type="color"]::-webkit-color-swatch {
11  border: none;
12}

忽略用作间距的换行符 <br />

1br + br {
2  display: none;
3}

使用 :empty 隐藏空 HTML 元素

1:empty {
2  display: none;
3}

CSS 重置

1html {
2  box-sizing: border-box;
3}
4
5*, *::before, *::after {
6  box-sizing: border-box;
7  margin: 0;
8  padding: 0;
9}

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

设置光标样式

1body {
2  caret-color: red;
3}

设置整个页面灰色

1html {
2  -webkit-filter: grayscale(.95);
3}

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

<textarea>自动增加其高度

1textarea {
2  form-sizing: normal
3}

定义容器的长宽比

1div {
2  aspect-ratio: 1/1 
3}

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

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

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

1button {
2  all: unset;
3}

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

超出显示省略号

1p {
2  overflow: hidden;/*超出部分隐藏*/
3  /* 超出部分显示省略号 */
4  text-overflow:ellipsis;
5  /* 规定段落中的文本不进行换行 */
6  white-space: nowrap;
7  width: 250px;/*需要配合宽度来使用*/
8}

给正文添加行高

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

1body {
2  line-height: 1.5;
3}

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

使用图像作为光标

1div {
2  cursor: url('path-to-image.png'), url('path-to-fallback-image.png'), auto;
3  /* 表情符号作为光标 */
4  cursor: 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>"), auto;
5}

文本溢出显示省略号

1.overflow-ellipsis {
2  width: 200px;
3  white-space: nowrap;
4  overflow: hidden;
5  text-overflow: ellipsis;
6}

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

将文本截断到特定的行数

1.overflow-truncate {
2  display: -webkit-box;
3  -webkit-box-orient: vertical;
4  -webkit-line-clamp: 3;
5  overflow: hidden;
6}

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

粘性定位元素

1.sticky {
2  position: sticky;
3  top: 0;
4}

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

使用带有空链接的属性选择器

1a[href^="http"]:empty::before {
2  content: attr(href);
3}

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

使用 :root 表示灵活类型

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

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

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

1body {
2  font: 1rem/1.6 sans-serif;
3}

吸附滚动

 1.container {
 2  height: 250px;
 3  overflow-x: scroll;
 4  display: flex;
 5  scroll-snap-type: x mandatory;
 6  column-gap: 10px;
 7}
 8.child {
 9  flex: 0 0 66%;
10  width: 250px;
11  background-color: #663399;
12  scroll-snap-align: center;
13}

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

类似 contenteditable 的样式

1div {
2  -webkit-user-modify: 
3    read-write-plaintext-only;
4}

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

等宽表格单元格

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

1table {
2  table-layout: fixed;
3}

利用属性选择器来选择空链接

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

1a[href^="http"]:empty::before {
2  content: attr(href);
3}

给 “默认” 链接定义样式

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

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

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

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

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

1h2 { 
2  font-size: 2em;
3}
4p {
5  font-size: 1em;
6}

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

1article {
2  font-size: 1.25rem;
3}
4aside .module {
5  font-size: .9rem;
6}

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

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

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

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

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

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

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

1input[type="text"],
2input[type="number"],
3select,
4textarea {
5  font-size: 16px;
6}

使用指针事件来控制鼠标事件

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

1button:disabled {
2  opacity: .5;
3  pointer-events: none;
4}

就这么简单

子元素选中父元素

1div:has(img) {
2  background: black;
3}

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

1div:has(h2):has(ul) {
2  background: black;
3}

在用作间距的换行符上设置 display: none

用户使用额外的换行符

1br + br {
2  display: none;
3}

给 body 添加行高

1body {
2  line-height: 1.5;
3}

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

检查本地是否安装了字体

 1@font-face {
 2  font-family: "Dank Mono";
 3  src:
 4    /* Full name */
 5    local("Dank Mono"),
 6    /* Postscript name */
 7    local("Dank-Mono"),
 8    /* 否则，请下载它！ */
 9    url("//...a.server/DankMono.woff");
10}
11
12code {
13  font-family: "Dank Mono",
14        system-ui-monospace;
15}

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

获取 HTML 元素的属性

1<a href="https://example.com">超链接</a>

attr HTML 元素的属性名。

1a:after {
2  content: " (" attr(href) ")";
3}

为表单元素设置 :focus

1a:focus, button:focus, input:focus,
2select:focus, textarea:focus {
3  box-shadow: none;
4  outline: #000 dotted 2px;
5  outline-offset: .05em;
6}

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

垂直居中任何东西

 1html, body {
 2  height: 100%;
 3  margin: 0;
 4}
 5
 6body {
 7  -webkit-align-items: center;
 8  -ms-flex-align: center;
 9  align-items: center;
10  display: -webkit-flex;
11  display: flex;
12}

…还有 CSS 网格：

1body {
2  display: grid;
3  height: 100vh;
4  margin: 0;
5  place-items: center center;
6}

图片对齐不变形

 1img {
 2  width: 200px;
 3  height: 200px;
 4  /** 确保图片按原始宽高比例进行缩放 */
 5  object-fit: cover;
 6  object-position: left top;
 7  transition: 1s;
 8}
 9img:hover {
10  /** 指定图片显示的位置，结合鼠标移动+过渡动画 */
11  object-position: right bottom;
12}

多行截断，展示省略号

1.clamp {
2  overflow: hidden;
3  display: -webkit-box;
4  -webkit-line-clamp: 3;
5  -webkit-box-orient: vertical;
6}

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

1<p class="clamp">
2  展示多行文本，超过 3 行将被截断，显示省略号...
3</p>

逗号分隔列表

1ul > li:not(:last-child)::after {
2  content: ",";
3}

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