CSS 备忘清单

CSS 备忘清单

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

入门

介绍

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

外部样式表

<link
  href="./path/to/stylesheet/style.css"
  rel="stylesheet"
  type="text/css"
>

内部样式表

<style>
  body {
    background-color: linen;
  }
</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 { }

查看: CSS 选择器

文本颜色

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

查看: Colors

背景

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

查看: Backgrounds

字体

.page-title {
  font-weight: bold;
  font-size: 30px;
  font-family: "Courier New";
}

查看: Fonts

定位

.box {
  position: relative;
  top: 20px;
  left: 20px;
}

另见: Position

动画

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

查看: Animation

注释

/* 这是一行注释 */
/* 这是
   多行注释 */

Flex 布局

div {
  display: flex;
  justify-content: center;
}
div {
  display: flex;
  justify-content: flex-start;
}

查看: Flexbox | Flex Tricks

Grid 布局

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

查看: Grid Layout

变量和计数器

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`	具有特定类名的 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`	访问链接 #

/* 未访问链接 */
a:link { color: blue; }        
/* 已访问链接 */
a:visited { color: purple; }   
/* 用户鼠标悬停 */
a:hover { background: yellow; }
/* 激活链接 */
a:active { color: red; }

伪类

选择器	说明
`p::after`	在 p 之后添加内容 #
`p::before`	在 p 之前添加内容 #
`p::first-letter`	p中的第一个字母 #
`p::first-line`	p 中的第一行 #
`::selection`	由用户选择 #
`::placeholder`	占位符属性 #
`: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 状态 #

结构伪类

选择器	说明
`p:first-child`	第一个孩子 #
`p:last-child`	最后一个孩子 #
`p:first-of-type`	首先是某种类型 #
`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:`	查看: Colors
`background-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;
}

容器

```css {2-3,5-8,10-11,13-16,18-23} .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; / [ ■ ■ ■ ] / }


### 子元素
```css
.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() 函数

```css {.wrap} .grid { display: grid; grid-template-columns: 100px minmax(100px, 500px) 100px; }

<!--rehype:className=wrap-text -->
定义了一个长宽范围的闭区间
### grid-row-start & grid-row-end
CSS 语法: 
- grid-row-start: auto|row-line;
- grid-row-end: auto|row-line|span n;
#### 实例
```css
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 3 技巧

滚动条平滑

html {
  scroll-behavior: smooth;
}

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

忽略用作间距的换行符 \

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;
}

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

使用图像作为光标

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

文本溢出显示省略号

.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;
}

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

计算函数

div {
  width: calc(100% - 30px);
  height: calc(100% - 30px);
}

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

粘性定位元素

.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;
}