recursal/MDN huggingface dataset:
vertical-align
==============

CSS 的属性 **`vertical-align`** 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

尝试一下
----

vertical-align 属性可被用于两种环境：

* 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片`<img>`：
* 垂直对齐表格单元内容。

注意 `vertical-align` 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。

语法
--


```css
/\* Keyword values \*/
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/\* <length> values \*/
vertical-align: 10em;
vertical-align: 4px;

/\* <percentage> values \*/
vertical-align: 20%;

/\* Global values \*/
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
```


`vertical-align` 属性指定为下面列出的值之一。

### 行内元素的值

#### 相对父元素的值

这些值使元素相对其父元素垂直对齐：

`baseline`

使元素的基线与父元素的基线对齐。HTML 规范没有详细说明部分可替换元素的基线，如`<textarea>` ，这意味着这些元素使用此值的表现因浏览器而异。

`sub`

使元素的基线与父元素的下标基线对齐。

`super`

使元素的基线与父元素的上标基线对齐。

`text-top`

使元素的顶部与父元素的字体顶部对齐。

`text-bottom`

使元素的底部与父元素的字体底部对齐。

`middle`

使元素的中部与父元素的基线加上父元素 x-height（译注：x 高度）的一半对齐。

`<length>`

使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。

`<percentage>`

使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是`line-height`属性的百分比。可以是负数。

#### 相对行的值

下列值使元素相对整行垂直对齐：

`top`

使元素及其后代元素的顶部与整行的顶部对齐。

`bottom`

使元素及其后代元素的底部与整行的底部对齐。

没有基线的元素，使用外边距的下边缘替代。

### 表格单元格的值

`baseline` (以及 `sub`, `super`, `text-top`, `text-bottom`, `<length>`, `<percentage>`)

使单元格的基线，与该行中所有以基线对齐的其他单元格的基线对齐。

`top`

使单元格内边距的上边缘与该行顶部对齐。

`middle`

使单元格内边距盒模型在该行内居中对齐。

`bottom`

使单元格内边距的下边缘与该行底部对齐。

可以是负数。

### 形式语法
```

vertical-align =   
  [ first | last ]        ||  
  <'alignment-baseline'>  ||  
  <'baseline-shift'>        
  
```

示例
--

### HTML


```html
<div>
  An <img src="frame\_image.svg" alt="link" width="32" height="32" /> image with
  a default alignment.
</div>
<div>
  An
  <img class="top" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a text-top alignment.
</div>
<div>
  An
  <img class="bottom" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a text-bottom alignment.
</div>
<div>
  An
  <img class="middle" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a middle alignment.
</div>
```

### CSS


```css
img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.middle {
  vertical-align: middle;
}
```

### 结果

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |

|  |  |
| --- | --- |
| 初始值 | `baseline` |
| 适用元素 | inline-level and table-cell elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the `line-height` of the element itself |
| 计算值 | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | a length |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Typical use cases of Flexbox, section "Center item"
* `line-height`, `text-align`, `margin`
* Understanding `vertical-align`, or "How (Not) To Vertically Center Content"
* Vertical-Align: All You Need To Know
transform-style
===============

CSS 属性 **`transform-style`** 设置元素的子元素是位于 3D 空间中还是平面中。

尝试一下
----

如果选择平面，元素的子元素将不会有 3D 的遮挡关系。

由于这个属性不会被继承，因此必须为元素的所有非叶子子元素设置它。

语法
--


```css
/\* Keyword values \*/
transform-style: flat;
transform-style: preserve-3d;

/\* Global values \*/
transform-style: inherit;
transform-style: initial;
transform-style: unset;
```

### 值

`flat`

设置元素的子元素位于该元素的平面中。

`preserve-3d`

指示元素的子元素应位于 3D 空间中。

### 正式语法
```

transform-style =   
  flat         |  
  preserve-3d    
  
```

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-style-property |

|  |  |
| --- | --- |
| 初始值 | `flat` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |
| Creates stacking context | yes |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using CSS transforms (en-US)
:-moz-first-node
================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**`:-moz-first-node`** CSS 伪类是一个 Mozilla 扩展 (en-US)，表示任何作为某个其他元素的第一个子节点的元素。它与 `:first-child` 不同，因为它不匹配在其前面有（非空白）文本的第一个子元素。

**备注：** 在确定 `:-moz-first-node` 时忽略元素开头的任何空白字符。

语法
--


```css
:-moz-first-node {
  /\* ... \*/
}
```

示例
--

### CSS


```css
span:-moz-first-node {
  background-color: lime;
}
```

### HTML


```html
<p>
  <span>This matches!</span>
  <span>This doesn't match.</span>
</p>

<p>
  Blahblah.
  <span>This doesn't match because it's preceded by text.</span>
</p>
```

### 结果

规范
--

不属于任何标准。

参见
--

* `:-moz-last-node` (en-US)
* `:first-child`
block-size
==========

CSS 属性 **`block-size`** 根据元素的书写模式定义了元素块的横向或纵向尺寸。根据 `writing-mode` 的值，此属性对应于 `width` 或 `height` 属性。

若为纵向书写模式，则 `block-size` 的值对应于元素的宽度；否则对应于元素的高度。与此相关的属性为 `inline-size`，此属性定义了元素另一方向的尺度。

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
block-size: 300px;
block-size: 25em;

/\* <percentage> 值 \*/
block-size: 75%;

/\* 关键词值 \*/
block-size: max-content;
block-size: min-content;
block-size: fit-content(20em);
block-size: auto;

/\* 全局值 \*/
block-size: inherit;
block-size: initial;
block-size: revert;
block-size: revert-layer;
block-size: unset;
```

### 取值

`block-size` 属性的取值与 `width` 和 `height` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | same as `width` and `height` |
| 是否是继承属性 | 否 |
| Percentages | block-size of containing block |
| 计算值 | same as `width` and `height` |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

block-size =   
  <'width'>    
  
```

示例
--

### 竖排文本的块向尺寸

#### HTML


```html
<p class="exampleText">示例文本</p>
```


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 对应的实体属性：`width` 和 `height`
* `writing-mode`
<display-outside>
=================

`<display-outside>` 关键字指定了元素的外侧显示（`display`）类型，即元素在流式布局中的角色。这些关键字用作 `display` 属性的值，且有作为单个关键字的旧式用法，或按第 3 级规范的定义与 `<display-inside>` (en-US) 关键字中的值一同使用。

语法
--

有效的 `<display-outside>` 值：

`block`

元素生成块级元素盒，且在正常流中时，在元素前后均生成断行。

`inline`

元素生成至少一个行级元素盒，这些盒子不在自身前后生成断行。在正常流中，若有空格则下一元素将在同一行上。


**备注：** 支持二值语法的浏览器在仅找到外侧值时（如指定 `display: block` 或 `display: inline` 时）会将内侧值设置为 `flow`，由此产生预期行为。例如若将元素指定为 block，你会期望此元素的子元素会参与块向和行向的正常流布局。

示例
--

在下列示例中，片段元素（通常显示为行级元素）设置为 `display: block`，故元素断入新行且在行向上扩张填充其容器。

### HTML


```html
<span>片段 1</span> <span>片段 2</span>
```

### CSS


```css
span {
  display: block;
  border: 1px solid rebeccapurple;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-outside |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `display`
    + `<display-inside>` (en-US)
    + `<display-listitem>` (en-US)
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* 正常流中的块向与行向布局
* 格式化上下文介绍
:default
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`:default`** CSS pseudo-class 表示一组相关元素中的默认表单元素。

该选择器可以在 `<button>`, `<input type="checkbox">`, `<input type="radio">`, 以及 `<option>` 上使用。


```css
/\* Selects any default <input> \*/
input:default {
  background-color: lime;
}
```


允许多个选择的分组元素也可以具有多个默认值，即，它们可以具有最初选择的多个项目。在这种情况下，所有默认值都使用 `:default` 伪类表示。例如，你可以在一组复选框之间设置默认复选框。

语法
--

Error: could not find syntax for this item示例
--

### HTML


```html
<input type="radio" name="season" id="spring" />
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked />
<label for="summer">Summer</label>

<input type="radio" name="season" id="fall" />
<label for="fall">Fall</label>

<input type="radio" name="season" id="winter" />
<label for="winter">Winter</label>
```

### CSS


```css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-default |
| Selectors Level 4 # default-pseudo |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
inline-size
===========

CSS 属性 **`inline-size`** 根据元素的书写模式定义了元素区块的横向或纵向尺寸。根据 `writing-mode` 的值，此属性对应于 `width` 或 `height` 属性。

若为纵向书写模式，则 `inline-size` 的值对应于元素的高度；否则对应于元素的宽度。与此相关的属性为 `block-size`，此属性定义了元素另一方向的尺度。

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
inline-size: 300px;
inline-size: 25em;

/\* <percentage> 值 \*/
inline-size: 75%;

/\* 关键词值 \*/
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content(20em);
inline-size: auto;

/\* 全局值 \*/
inline-size: inherit;
inline-size: initial;
inline-size: revert;
inline-size: revert-layer;
inline-size: unset;
```

### 取值

`inline-size` 属性的取值与 `width` 和 `height` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | same as `width` and `height` |
| 是否是继承属性 | 否 |
| Percentages | inline-size of containing block |
| 计算值 | same as `width` and `height` |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

inline-size =   
  <'width'>    
  
```

示例
--

### 以像素为单位设置行向尺寸

#### HTML


```html
<p class="exampleText">示例文本</p>
```


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 对应的实体属性：`width` 和 `height`
* `writing-mode`
border-style
============

概述
--

`border-style` 是一个 CSS 简写属性，用来设定元素所有边框的样式。

**备注：** `border-style` 默认值是 `none`，这意味着如果你只修改 `border-width` 和 `border-color` 是不会出现边框的。

尝试一下
----

语法
--


```css
/\* Apply to all four sides \*/
border-style: dashed;

/\* horizontal | vertical \*/
border-style: dotted solid;

/\* top | horizontal | bottom \*/
border-style: hidden double dashed;

/\* top | right | bottom | left \*/
border-style: none solid dotted dashed;

/\* Global values \*/
border-style: inherit;
border-style: initial;
border-style: unset;
```

### 取值

`<br-style>`

关键字用于描述边框样式。它可以有以下取值：

| `none` |  | 和关键字 `hidden` 类似，不显示边框。在这种情况下，如果没有设定背景图片，`border-width` 计算后的值将是 `0`，即使先前已经指定过它的值。在单元格边框重叠情况下，`none` 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。 |
| --- | --- | --- |
| `hidden` |  | 和关键字 `none` 类似，不显示边框。在这种情况下，如果没有设定背景图片，`border-width` 计算后的值将是 `0`，即使先前已经指定过它的值。在单元格边框重叠情况下，`hidden` 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。 |
| `dotted` |  | 显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 `border-width` 计算值的一半。 |
| `dashed` |  | 显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。 |
| `solid` |  | 显示为一条实线。 |
| `double` |  | 显示为一条双实线，宽度是 `border-width` 。 |
| `groove` |  | 显示为有雕刻效果的边框，样式与 `ridge` 相反。 |
| `ridge` |  | 显示为有浮雕效果的边框，样式与 `groove` 相反。 |
| `inset` |  | 显示为有陷入效果的边框，样式与 `outset` 相反。当它指定到 `border-collapse` 为 `collapsed` 的单元格时，会显示为 `groove` 的样式。 |
| `outset` |  | 显示为有突出效果的边框，样式与 `inset` 相反。当它指定到 `border-collapse` 为 `collapsed` 的单元格时，会显示为 `ridge` 的样式。 |

### 形式语法
```

border-style =   
  <line-style>{1,4}    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

示例
--

### 包含所有属性取值的表格

以下是一个所有取值的例子

#### HTML


```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```


#### CSS


```css
/\* 定义表格外观 \*/
table {
  border-width: 3px;
  background-color: #52e396;
}
tr,
td {
  padding: 2px;
}

/\* border-style 示例 \*/
.b1 {
  border-style: none;
}
.b2 {
  border-style: hidden;
}
.b3 {
  border-style: dotted;
}
.b4 {
  border-style: dashed;
}
.b5 {
  border-style: solid;
}
.b6 {
  border-style: double;
}
.b7 {
  border-style: groove;
}
.b8 {
  border-style: ridge;
}
.b9 {
  border-style: inset;
}
.b10 {
  border-style: outset;
}
```


#### 输出

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-style |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 和边框有关的 CSS 简写属性：`border`, `border-width`, `border-color`, `border-radius`
可替换元素
=====

在 CSS 中，**可替换元素**（**replaced element**）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 `<iframe>` 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。有关详细信息，请参阅本文下面的控制内容框中的对象位置。

可替换元素
-----

典型的可替换元素有：

* `<iframe>`
* `<video>`
* `<embed>`
* `<img>`

有些元素仅在特定情况下被作为可替换元素处理，例如：

* `<option>`
* `<audio>`
* `<canvas>`
* `<object>`

HTML 规范也说了 `<input>` 元素可替换，因为 `"image"` 类型的 `<input>` 元素就像 `<img>` 一样被替换。但是其他形式的控制元素，包括其他类型的 `<input>` 元素，被明确地列为非可替换元素（non-replaced element）。该规范用术语小挂件（Widget）来描述它们默认的限定平台的渲染行为。

用 CSS `content` 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中，因此是“匿名的”。

CSS 与可替换元素
----------

CSS 在某些情况下会对可替换元素做一些特殊处理，比如计算外边距（`margin`）和一些 `auto` 的具体值。

需要注意的是，一部分（并非全部）可替换元素，其本身具有的尺寸和基线（baseline）会被一些 CSS 属性用到，加入计算之中，例如 `vertical-align`。只有可替换元素才能具有这种自带值。

### 控制内容框中的对象位置

某些 CSS 属性可用于指定 可替换元素中包含的内容对象 在该元素的盒区域内的位置或定位方式。这些属性的具体定义可以在 CSS3 Images 规范中找到：

`object-fit`

指定可替换元素的内容对象在元素盒区域中的填充方式。（有些类似于 `background-size` ）

`object-position`

指定可替换元素的内容对象在元素盒区域中的位置。（类似于 `background-position` ）

参见
--

* 可替换元素的 HTML 规范
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素
cos()
=====

CSS 函数 **`cos()`** 为三角函数，返回某数的余弦值，此值介于 `-1` 和 `1` 之间。此函数含有单个计算式，此式须将参数结果按弧度数解析为 `<number>` 或 `<angle>`，即 `cos(45deg)`、`cos(0.125turn)` 和 `cos(3.14159 / 4)` 均表示同一值，约为 `0.707`。

语法
--


```css
/\* 单个 <angle> 值 \*/
width: calc(100px * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));

/\* 单个 <number> 值 \*/
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));

/\* 其他值 \*/
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));
```

### 参数

`cos(angle)` 函数仅接受一值作为其参数。

`angle`

解析为 `<number>` 或 `<angle>` 的计算式。指定无单位数时，数理解为弧度数，表示 `<angle>`。

### 返回值

`angle` 的余弦值总将返回介于 `−1` 和 `1` 之间的数。

* 若 `angle` 为 `infinity`、`-infinity` 或 `NaN`，则结果为 `NaN`。
### 形式语法
```

<cos()> =   
  cos( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

示例
--

### 保持旋转盒子的尺寸不变

`cos()` 函数可用于保持旋转盒子的尺寸不变。

在用 `rotate()` 旋转元素时，元素将超出其初始尺寸。为修复此问题，我们将用 `cos()` 更新元素尺寸。

例如若将 `100px`/`100px` 的正方形旋转 `45deg`，则其产生的菱形将宽于和高于初始正方形。为将菱形缩小至为原始正方形分配的盒子中，需用此公式缩小菱形：`width = height = 100px * cos(45deg) = 100px * 0.707 = 70.7px`，还需调整 `transform-origin` 并添加 `translate()` 修正位置：

#### HTML


```html
<div class="original-square"></div>
<div class="rotated-diamond"></div>
<div class="rotated-scaled-diamond"></div>
```


#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```



```css
div.original-square {
  width: 100px;
  height: 100px;
  background-color: blue;
}
div.rotated-diamond {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}
div.rotated-scaled-diamond {
  width: calc(100px * cos(45deg));
  height: calc(100px * cos(45deg));
  margin: calc(100px / 4 * cos(45deg));
  transform: rotate(45deg);
  transform-origin: center;
  background-color: green;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `sin()`
* `tan()`
* `asin()`
* `acos()`
* `atan()`
* `atan2()`
网格布局
====

**CSS 网格布局**擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。

像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。

基本示例
----

以下示例显示了一个三列轨道的网格，其中创建的行最小为 100 像素，最大为自动。条目使用线性定位放置在网格上。
```

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233, 171, 88);
  border-radius: 5px;
  background-color: rgba(233, 171, 88, 0.5);
  padding: 1em;
  color: #d9480f;
}
```

### HTML


```html
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
```

### CSS


```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
```

参考
--

### CSS 属性

* `grid-template-columns`
* `grid-template-rows`
* `grid-template-areas`
* `grid-template`
* `grid-auto-columns`
* `grid-auto-rows`
* `grid-auto-flow`
* `grid`
* `grid-row-start` (en-US)
* `grid-column-start` (en-US)
* `grid-row-end` (en-US)
* `grid-column-end` (en-US)
* `grid-row`
* `grid-column`
* `grid-area`
* `grid-row-gap` (en-US)
* `grid-column-gap` (en-US)
* `grid-gap` (en-US)
### CSS 函数

* `repeat()`
* `minmax()`
* `fit-content()`
### CSS 数据类型

* `<flex>`
### 术语表

* 网格（Grid）
* 网格线（Grid lines）
* 网格轨道（Grid tracks）
* 网格单元格（Grid cell）
* 网格区域（Grid areas）
* 网格间隙（Gutters）
* 网格轴（Grid Axis）
* 网格行（Grid row）
* 网格列（Grid column）
指南
--

* Basic concepts of Grid Layout
* Relationship of Grid Layout to other layout methods
* Layout using named grid lines
* Grid template areas
* Layout using named grid lines
* Auto-placement in CSS Grid Layout
* Box alignment in CSS Grid Layout
* CSS Grid, Logical Values and Writing Modes
* CSS Grid Layout and accessibility
* CSS Grid and progressive enhancement
* Realising common layouts using CSS Grid (en-US)
外部资源
----

* Examples from Jen Simmons
* Grid by Example - a collection of usage examples and video tutorials
* Codrops Grid Reference
* Firefox DevTools CSS Grid Inspector (en-US)
* CSS Grid Playground
* Grid Garden - 一个学习 CSS 网格的游戏
* https://css-tricks.com/snippets/css/complete-guide-grid/
* https://css-tricks.com/snippets/css/css-grid-starter-layouts/
* https://css-tricks.com/getting-started-css-grid/
规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |
font-kerning
============

**`font-kerning`** CSS 属性设置是否使用字体中储存的字距信息。


```css
/\* Keyword values \*/
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/\* Global values \*/
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;
```


*Kerning*（字距）定义了字母的分布情况。对于良好地规定了字距的字体，字距特性使得字母分布更为统一，阅读体验更佳。如下图所示，左侧的示例没有应用字距，而右侧使用了：

![Example of font-kerning](/zh-CN/docs/Web/CSS/font-kerning/font-kerning.png)

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

语法
--

`font-kerning` 属性通过以下的关键字进行指定。

### 值

`auto`

浏览器来决定是否使用字体字距。比如，一些浏览器会在小字体的情况下禁用字距，因为这会使得文本可读性下降。

`normal`

必须应用字体中的字距信息。

`none`

禁用字体中的字距信息。

### 形式语法
```

font-kerning =   
  auto    |  
  normal  |  
  none      
  
```

示例
--

### HTML


```html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
```

### CSS


```css
div {
  font-size: 2rem;
  font-family: serif;
}

#nokern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}
```

### JavaScript


```js
var input = document.getElementById("input"),
  kern = document.getElementById("kern"),
  nokern = document.getElementById("nokern");

input.addEventListener("keyup", function () {
  kern.textContent = input.value; /\* Update content \*/
  nokern.textContent = input.value;
});

kern.textContent = input.value; /\* Initialize content \*/
nokern.textContent = input.value;
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-kerning-prop |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `font-variant`, `font-variant-position`, `font-variant-east-asian` (en-US), `font-variant-caps`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-alternates`, `font-synthesis`, `letter-spacing`
view-transition-name
====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`view-transition-name`** CSS 属性为选中的元素提供了一个独特的标识名称（一个 `<custom-ident>`），并使其参与与根视图过渡分开的视图过渡——或者如果指定了 `none` 值，则不参与任何视图过渡。

语法
--


```css
/\* <custom-ident> 值示例 \*/
view-transition-name: header;
view-transition-name: figure-caption;

/\* 关键字值 \*/
view-transition-name: none;
```

### 值

`<custom-ident>`

一个独特的标识名称，使选中的元素参与与根视图过渡不同的视图过渡。标识符必须是唯一的。如果两个渲染元素在同一时间具有相同的 `view-transition-name`，`ViewTransition.ready` 将被拒绝，过渡将被跳过。

`none`

所选元素将不参与视图过渡。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----
```

view-transition-name =   
  none            |  
  auto            |  
  <custom-ident>    
  
```

示例
--


```css
figcaption {
  view-transition-name: figure-caption;
}
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # view-transition-name-prop |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 视图过渡 API
* 使用视图过渡 API 实现简单的平滑过渡效果
mask-mode
=========

**`mask-mode`**CSS属性指示由`mask-image` 指向的遮罩被视为亮度或阿尔法遮罩。


```css
/\* 关取值的键字 \*/
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/\* 多个类型的值 \*/
mask-mode: alpha, match-source;

/\* 全局变量的值 \*/
mask-mode: inherit;
mask-mode: initial;
mask-mode: unset;
```


|  |  |
| --- | --- |
| 初始值 | `match-source` |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

语法
--

下面列出 `mask-mode` 的一个或多个关键字值，以逗号分隔。

### Values

`alpha`

此关键字指示应使用掩码层图像的透明度（阿尔法通道）值作为掩码值。

`luminance`

此关键字指示掩膜层图像的亮度值应用作掩码值。

`match-source`

如果`mask-image`属性是`<mask-source>`类型，掩模层图像的亮度值会被作为掩模值。

如果它是类型`<image>`，掩码层图像的 alpha 值应用作掩码值。

### 形式语法
```

mask-mode =   
  <masking-mode>#    
  
<masking-mode> =   
  alpha         |  
  luminance     |  
  match-source    
  
```

示例
--

### CSS


```css
#masked {
  width: 227px;
  height: 200px;
  background: blue linear-gradient(red, blue);
  mask-image: url(mdn.svg);
  mask-mode: alpha; /\* Can be changed in the live sample \*/
}
```


```
<div id="masked"></div>
<select id="maskMode">
  <option value="alpha">alpha</option>
  <option value="luminance">luminance</option>
  <option value="match-source">match-source</option>
</select>
```


```
var maskMode = document.getElementById("maskMode");
maskMode.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskMode = evt.target.value;
});
```

### 结果

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-mode |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.