## 入门

### 介绍

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;
    s  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]` | 带有 <yel>target</yel> 属性 #
`a[target="_blank"]` | 在新标签中打开 #
`a[href^="/index"]` | 以 <yel>/index</yel> 开头 #
`[class|="chair"]` | 以<yel>chair</yel>开头 #
`[class*="chair"]` | 包含<yel>chair</yel> #
`[title~="chair"]` | 包含单词 <yel>chair</yel> #
`a[href$=".doc"]` | 以 <yel>.doc</yel> 结尾 #
`[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 类型的元素 #
`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;
    }

### 容器

    .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 3 技巧

### 滚动条平滑

    html {
      scroll-behavior: smooth;
    }

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

### 忽略用作间距的换行符 <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;
    }

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

### 使用图像作为光标

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

### 吸附滚动

    .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` 是否可以编辑

### 定义容器的长宽比

    div {
      aspect-ratio: 1/1
    }

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

## 另见

- CSS selectors cheatsheet (frontend30.com)
- MDN: Using CSS flexbox
- Ultimate flexbox cheatsheet
- GRID: A simple visual cheatsheet
- CSS Tricks: A Complete Guide to Grid
- Browser support
- Flex 布局教程：语法篇
- CSS 专业技巧