background-image - CSS：层叠样式表

background-image
================

CSS **`background-image`** 属性用于为一个元素设置一个或者多个背景图像。

尝试一下
----

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

然后元素的边框 border 会在它们之上被绘制，而 `background-color` 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在 CSS 属性`background-clip` 和 `background-origin` 中定义。

如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 `none`。

**备注：** 即使图像是不透明的，背景色在通常情况下并不会被显示，web 开发者仍然应该指定 `background-color` 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。

语法
--

每个背景图像被明确规定为关键字 `none` 或是一个 `<image>` 值。

可以提供由逗号分隔的多个值来指定多个背景图像：

```css
background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");
```

### 取值

`none`

是一个表示无背景图的关键字。

`<image>`

`<image>` 用来标记将要显示的图片。支持多背景 (en-US)设置，背景之间以逗号隔开。

### 正规语法
```

background-image =
  <bg-image>#

<bg-image> =
  <image>  |
  none

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

示例
--

注意星星图片部分透明且位于猫图片上方。

#### HTML

```html
<div>
  <p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>
```

#### CSS

```css
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn\_logo\_only\_color.png");
}

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}
```

#### 结果

无障碍相关
-----

浏览器不会向辅助技术提供有关背景图像的任何特殊信息。这对于屏幕阅读器来说非常重要，因为屏幕阅读器不会告知用户它的存在，因而不能向用户传达任何信息。如果图像包含对理解页面总体目的至关重要的信息，则最好在文档中作出语义性地描述（describe it semantically）。

* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-image |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| 计算值 | as specified, but with `url` values made absolute |
| Animation type | discrete |

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

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

[1] 如果 `about:config` 中 `browser.display.use_document_colors` 被设置为 `false`, 背景图像将不会展示。

[2] 当前的 iOS Safari 版本 (5.0) CSS 背景属性对 SVG 的支持并不完善。iOS Safari (5.0) 之前的版本亦是如此。

参见
--

* Implementing image sprites in CSS
* `<img>`
* 与图像相关的数据类型：`<image>`, `<gradient>`
* 与图像相关的函数：`linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-linear-gradient()` (en-US), `repeating-radial-gradient()` (en-US), `element()`, `image()` (en-US), `image-set()` (en-US), `url()`


inset-block-end - CSS：层叠样式表

inset-block-end
===============

CSS 属性 **`inset-block-end`** 定义了元素的逻辑块末偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `top`、`right`、`bottom` 或 `left` 属性。

尝试一下
----

语法
--

```css
/\* 长度值 \*/
inset-block-end: 3px;
inset-block-end: 2.4em;

/\* 包含块的宽度或高度的百分比 \*/
inset-block-end: 10%;

/\* 关键词值 \*/
inset-block-end: auto;

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

### 取值

`inset-block-end` 属性的取值与 `left` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | logical-height of containing block |
| 计算值 | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

inset-block-end =
  auto                 |
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

```

示例
--

### 设置块末偏移

#### HTML

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

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-block-end: 20px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-properties |

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

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

参见
--

* 定义其他偏移的属性：`inset-block-start`、`inset-inline-start` 和 `inset-inline-end`
* 对应的实体属性：`top`、`right`、`bottom` 和 `left`
* `writing-mode`、`direction`、`text-orientation`


<time> - CSS：层叠样式表

<time>
======

**`<time>`** CSS 数据类型 表达了以秒（s）或毫秒（ms）为单位的时间的值。于`animation`、`transition`及相关属性中使用。

语法
--

`<time>` 数据类型由 `<number>`后加下方列出的单位之一组成。前方也可选择添加一个`+` 或 `-`。单位与数字之间无空格。

**备注：** 尽管数字 `0` 不管在何种单位下均相等，但其单位不可去除。换句话说， `0` 是无效的，并不代表 `0s` 或 `0ms`。

### 单位

**`s`**

以秒为单位的时间。例： `0s`, `1.5s`, `-60s`。

**`ms`**

以毫秒为单位的时间。例： `0ms`, `150.25ms`, `-60000ms`。

**备注：** 秒 `s` 与毫秒 `ms` 间的转换为： `1s` = `1000ms`。

示例
--

### 有效时间
```

12s         正整数
-456ms      负整数
4.3ms       非整数
14mS        单位大小写不敏感，虽然不推荐大写
+0s         0 以及前置 + 号和单位
-0ms        0 以及前置 - 号和单位
```

### 无效时间
```

0           尽管<length>中允许 0，其在<time>中无效。
12.0        此为<number>而非<time>。其缺乏单位。
7 ms        数字与单位间不允许有空格。
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # time |

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

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


overflow-wrap - CSS：层叠样式表

overflow-wrap
=============

尝试一下
----

CSS 属性 **`overflow-wrap`** 应用于行级元素，用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出其行向盒。

**备注：** 与 `word-break` 相比，`overflow-wrap` 仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生换行。

这个属性原本属于微软扩展的一个非标准、无前缀的属性，叫做 `word-wrap`，后来在大多数浏览器中以相同的名称实现。目前它已被更名为 `overflow-wrap`，`word-wrap` 相当于其别称。

语法
--

```css
/\* 关键词值 \*/
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/\* 全局值 \*/
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: revert-layer;
overflow-wrap: unset;
```

将 `overflow-wrap` 属性指定为从下面的值列表中选择的单个关键字。

### 值

`normal`

行只能在正常的单词断点（例如两个单词之间的空格）处换行。

`anywhere`

为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。在断点处不会插入连字符。在计算最小内容内在大小时，会考虑由单词换行引入的软换行机会。

`break-word`

与 anywhere 值相同，如果行中没有其他可接受的断点，则允许在任意点将通常不可断的单词换行，但在计算最小内容内在大小时不考虑断字引入的软换行机会。

形式语法
----
```

overflow-wrap =
  normal      |
  break-word  |
  anywhere

```

示例
--

### 比较 overflow-wrap、word-break 和 hyphens

本示例比较分解长单词时，`overflow-wrap`、`word-break`、`hyphens` 的结果。

#### HTML

```html
<p>
  They say the fishing is excellent at Lake
  <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>normal</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: break-word</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>word-break</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, without
  <code>lang</code> attribute)
</p>
<p lang="en">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, English rules)
</p>
<p class="hyphens" lang="de">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, German rules)
</p>
```

#### CSS

```css
p {
  width: 13em;
  margin: 2px;
  background: gold;
}

.ow-anywhere {
  overflow-wrap: anywhere;
}

.ow-break-word {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # overflow-wrap-property |

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

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

参见
--

* `word-break`
* `hyphens`
* `text-overflow`
* 换行和折行文本的指引 (en-US)


scrollbar-color - CSS：层叠样式表

scrollbar-color
===============

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

\*\*`scrollbar-color`\*\*该CSS属性设置滚动条轨道和拇指的颜色

\*\*track（轨道）\*\*是指滚动条，其一般是固定的而不管滚动位置的背景。

**thumb**（**拇指**）是指滚动条通常漂浮在轨道的顶部上的移动部分。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | scrolling boxes |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | by computed value type |

语法
--

```css
/\* Keyword values \*/
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/\* <color> values \*/
scrollbar-color: rebeccapurple green; /\* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. \*/

/\* Global values \*/
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;
```

### 值

`<scrollbar-color>`

定义滚动条的颜色。

| 值 | 描述 |
| --- | --- |
| `auto` | 在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分默认平台渲染。 |
| `dark` | 显示黑色滚动条，可以是平台提供的滚动条的深色变体，也可以是带深色的自定义滚动条。 |
| `light` | 显示一个轻量滚动条，可以是平台提供的滚动条的轻微变体，也可以是带有浅色的自定义滚动条。 |
| `<color> <color>` | 将第一种颜色应用于滚动条拇指，第二种颜色应用于滚动条轨道。 |

**备注：** 用户代理必须将`scrollbar-color`根元素上设置的任何值应用于视口。

### 形式语法
```

scrollbar-color =
  auto        |
  <color>{2}

```

示例
--

### CSS

```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
}
```

### HTML

```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

### 结果

无障碍问题
-----

使用`scrollbar-color`具有特定颜色值的属性时，作者应确保指定的颜色在它们之间具有足够的对比度。对于关键字值，UA 应确保其使用的颜色具有足够的对比度。参见WCAG 2.0 的技术：G183：使用 3:1 的对比度。

规范
--

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |

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

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


border-image-width - CSS：层叠样式表

border-image-width
==================

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

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

* Learn more
* See full compatibility
* Report feedback
CSS属性 **`border-image-width`** 指定了 边界图像 (border image) 的宽度

尝试一下
----

如果本属性值大于元素的 `border-width`，边界图像将会向 padding 边缘延展

语法
--

```css
/\* 关键字 \*/
border-image-width: auto;

/\* 长度 \*/
border-image-width: 1rem;

/\* 百分比 \*/
border-image-width: 25%;

/\* 数值 \*/
border-image-width: 3;

/\* 垂直 | 水平 \*/
border-image-width: 2em 3em;

/\* 上 | 横向 | 下 \*/
border-image-width: 5% 15% 10%;

/\* 上 | 右 | 下 | 左 \*/
border-image-width: 5% 2em 10% auto;

/\* 全局值 \*/
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;
```

`border-image-width` 属性的值可用以下方式进行设定：

* 当指定 **一个** 值时，它将作用到 **四个方向** ；
* 当指定 **两个** 值时，它将分别作用到 **垂直方向** 和 **水平方向** ；
* 当指定 **三个** 值时，它将分别作用到 **上方**、**水平方向**、和**下方**；
* 当指定 **四个** 值时，它将分别作用到 **上方**、**右方**、**下方和左方。**
### 取值

`<长度 - 百分比>`

边界的宽度，可按 `<length>` 或 `<percentage>` 指定。百分比是相较于水平（垂直）方向上的边框图像区域宽度（高度）的偏移量，不能为负。

`<数值>`

边框宽度，指定为 `border-width` 的相应倍数，不能为负。

`auto`

将等同于内部对应的 `border-image-slice` 的宽或高（可用的话）。如果图像没有需要的相应的属性，将相对于 `border-width` 进行指定。

正式定义
----

|  |  |
| --- | --- |
| 初始值 | `1` |
| 适用元素 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width or height of the border image area |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | by computed value type |

正式语法
----
```

border-image-width =
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

<length-percentage> =
  <length>      |
  <percentage>

```

示例
--

### Tiling a border image

示例使用了下方 90\*90 像素的 ".png" 图像。

![](/zh-CN/docs/Web/CSS/border-image-width/border.png)

因此，每个圆圈为 30\*30 像素。

#### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
```

#### CSS

```css
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-width |

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

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


background-position - CSS：层叠样式表

background-position
===================

**`background-position`** CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 `background-origin` 定义的位置图层的。

尝试一下
----

语法
--

```css
/\* Keyword values \*/
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/\* <percentage> values \*/
background-position: 25% 75%;

/\* <length> values \*/
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/\* Multiple images \*/
background-position:
  0 0,
  center;

/\* Edge offsets values \*/
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/\* Global values \*/
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: unset;
```

`background-position` 属性被指定为一个或多个 `<position>` 值，用逗号隔开。

### 值

`<position>`

一个 `<position>` 定义一组 x/y 坐标（相对于一个元素盒子模型的边界），来放置项目（原文为 item）。它可以使用一到四个值进行定义。如果使用两个非关键字值，第一个值表示水平位置，第二个值表示垂直位置。如果仅指定一个值，则第二个值默认是 `center`。如果使用三个或四个值，则长度百分比值是前面关键字值的偏移量。

**一个值的语法：** 值可能是：

* 关键字 `center`，用来居中背景图片。
* 关键字 `top`、`left`、`bottom`、`right` 中的一个。用来指定把这个项目（原文为 item）放在哪一个边界。另一个维度被设置成 50%，所以这个项目（原文为 item）被放在指定边界的中间位置。
* `<length>` 或 `<percentage>`。指定相对于左边界的 x 坐标，y 坐标被设置成 50%。

**两个值的语法：** 一个定义 x 坐标，另一个定义 y 坐标。每个值可以是：

* 关键字 `top`、`left`、`bottom`、`right` 中的一个。如果这里给出 `left` 或 `right`，那么这个值定义 x 轴位置，另一个值定义 y 轴位置。如果这里给出 `top` 或 `bottom`，那么这个值定义 y 轴位置，另一个值定义 x 轴位置。
* `<length>` 或 `<percentage>`。如果另一个值是 `left` 或 `right`，则该值定义相对于顶部边界的 Y。如果另一个值是 `top` 或 `bottom`，则该值定义相对于左边界的 X。如果两个值都是 `<length>` 或 `<percentage>` 值，则第一个定义 X，第二个定义 Y。
* 注意：如果一个值是 `top` 或 `bottom`，那么另一个值不可能是 `top` 或 `bottom`。如果一个值是 `left` 或 `right`，那么另一个值不可能是 `left` 或 `right`。也就是说，例如，`top top` 和 `left right` 是无效的。
* 排序：配对关键字时，位置并不重要，因为浏览器可以重新排序，写成 `top left` 或 `left top` 其产生的效果是相同的。使用 `<length>` 或 `<percentage>` 与关键字配对时顺序非常重要，定义 X 的值放在前面，然后是定义 Y 的值， `right 20px` 和 `20px right` 的效果是不相同的，前者有效但后者无效。`left 20%` 或 `20% bottom` 是有效的，因为 X 和 Y 值已明确定义且位置正确。
* 默认值是 `left top` 或者 `0% 0%`。

**三个值的语法：** 两个值是关键字值，第三个是前面值的偏移量：

* 第一个值是关键字 `top`、`left`、`bottom`、`right`，或者 `center`。如果设置为 `left` 或 `right`，则定义了 X。如果设置为 `top` 或 `bottom`，则定义了 Y，另一个关键字值定义了 X。
* `<length>` 或 `<percentage>`，如果是第二个值，则是第一个值的偏移量。如果是第三个值，则是第二个值的偏移量。
* 单个长度或百分比值是其前面的关键字值的偏移量。一个关键字与两个 `<length>` 或 `<percentage>` 值的组合无效。

**四个值的语法：** 第一个和第三个值是定义 X 和 Y 的关键字值。第二个和第四个值是前面 X 和 Y 关键字值的偏移量：

* 第一个值和第三个值是关键字值 `top`、`left`、`bottom`、 `right` 之一。如果设置为 `left` 或 `right`，则定义了 X。如果设置为 `top` 或 `bottom`，则定义了 Y，另一个关键字值定义了 X。
* 第二个和第四个值是 `<length>` 或 `<percentage>`。第二个值是第一个关键字的偏移量。第四个值是第二个关键字的偏移量。

### 关于百分比：

给定背景图像位置的百分比偏移量是相对于容器的。值 0% 表示背景图像的左（或上）边界与容器的相应左（或上）边界对齐，或者说图像的 0% 标记将位于容器的 0% 标记上。值为 100% 表示背景图像的 *右*（或 *下*）边界与容器的 *右*（或 *下*）边界对齐，或者说图像的 100% 标记将位于容器的 100% 标记上。因此 50% 的值表示水平或垂直居中背景图像，因为图像的 50% 将位于容器的 50% 标记处。类似的，`background-position: 25% 75%` 表示图像上的左侧 25% 和顶部 75% 的位置将放置在距容器左侧 25% 和距容器顶部 75% 的容器位置。

基本上发生的情况是从相应的容器尺寸中*减去*背景图像尺寸，然后将结果值的百分比用作从左（或顶部）边界的直接偏移量。
```

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)
```

以 X 轴为例，假设我们有一个 300px 宽的图像，我们在一个 100px 宽的容器中使用它，`background-size` 设置为 `auto`：
```

100px - 300px = -200px (container & image difference)
```

因此，位置百分比为 -25%、0%、50%、100%、125%，我们得到这些图像到容器边界偏移值：
```

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px
```

因此，对于我们的示例，使用这些结果值，让**图像**的**左边界**从**容器**的**左边界**偏移：

* + 50px（将图像左边界放在 100px 宽容器的中心）
* 0px（图像左边界与容器左边界重合）
* -100px (将图片相对容器左移 100px，这意味着图片中部的 100px 内容将出现在容器中)
* -200px (将图片相对容器左移 200px，这意味着图片右部分的 100px 内容将出现在容器中)
* -250px (将图片相对容器左移 250px，这意味着图片的右边界对齐容器的中线)

值得一提的是，如果你的 `background-size` 等于给定轴的容器大小，那么该轴的 *百分比* 位置将不起作用，因为“容器图像差异”将为零。你将需要使用绝对值进行偏移。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0% 0%` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets |
| 计算值 | as each of the properties of the shorthand:* `background-position-x`: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
* `background-position-y`: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
 |
| Animation type | a repeatable list |

形式语法
----
```

background-position =
  <bg-position>#

<bg-position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

<length-percentage> =
  <length>      |
  <percentage>

```

示例
--

### 定位背景图像

下面三个例子每一个都使用 `background` 来创建一个包含一个星星的黄色长方形元素。每个例子中，星星的位置是不一样的。第三个例子阐明了如何为两个不同的背景图片指定位置。

#### HTML

```html
<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>
```

#### CSS

```css
/\* 被所有 div 共享 \*/
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/\* 这些例子使用 `background` 缩写 \*/
.exampleone {
  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}

/\* 多背景图片：每个图片依次和相应的 `background-position` 匹配 \*/
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position:
    0px 0px,
    right 3em bottom 2em;
}
```

#### 效果

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-position |

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

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

参阅
--

* `background-position-x`
* `background-position-y`
* Using multiple backgrounds
* `transform-origin`


::file-selector-button - CSS：层叠样式表

::file-selector-button
======================

**`::file-selector-button`** CSS 伪元素代表 `type="file"` 的 `<input>` 的按钮。

尝试一下
----

语法
--

```css
selector::file-selector-button
```

示例
--

### 基本示例

#### HTML

```html
<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload" />
</form>
```

#### CSS
```

form {
  display: flex;
  gap: 1em;
  align-items: center;
}
```

```css
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}
```

#### 结果

请注意 `::file-selector-button` 是一个完整元素，因此与 UA 样式表中的规则相匹配。特别是，字体和颜色不一定会从 `input` 元素继承。

### 回退示例

#### HTML

```html
<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload" />
</form>
```

#### CSS
```

form {
  display: flex;
  gap: 1em;
  align-items: center;
}
```

```css
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::-ms-browse:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo |

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

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

参见
--

* WebKit CSS 扩展
* Microsoft CSS 扩展
* 文件与目录条目 API
* Firefox 对文件与目录条目 API 的支持
* `<input type="file">`


动画性 CSS 属性 - CSS：层叠样式表

动画性 CSS 属性
==========

CSS 动画和过渡依赖于**动画性**属性这一概念，且所有 CSS 属性除非另有规定否则均有动画性。每个属性的*动画类型*决定了此属性的值如何结合——插值、相加或累积。过渡仅涉及插值，而动画可能使用所有三种结合方法。

**备注：** 每个 CSS 属性的动画类型列于其“形式定义”表格中（如 `color`）。

**备注：** 每个 CSS 数据类型的插值方法描述于其“插值”一节中（如 `<length>`）。

动画类型
----

在 Web 动画规范中主要定义了四种动画类型：

无动画性

此属性无动画性。此属性在列于动画关键帧中时不被处理，且不受过渡影响。

**备注：** 仅针对无动画性属性的动画效果仍将表现出动画效果的通常行为（如触发 `animationstart` 事件）。

离散

此属性的值不可加，且插值在 `50%` 处从开始值换为结束值。具体而言，记 `p` 为进度值：

* 若 `p < 0.5`，则 `V_结果 = V_开始`；
* 若 `p ≥ 0.5`，则 `V_结果 = V_结束`。

按计算值

计算值对应的各个分量使用其值类型所标示的流程相结合。若分量数量或对应分量的类型不符，或有任意分量值使用离散动画且两个对应值不符，则属性值按离散相结合。

可重复列表

与按计算值相同，但若两个列表有不同数量的元素，则先将两个列表重复至元素数量的最小公倍数，再将每个元素按计算值相结合。若某对值无法结合或有任意分量值使用离散动画，则属性值按离散相结合。

某些属性具有未被这四种类型所涵盖的特定的插值行为。在此情形下，请参照此属性的“插值”一节（如 `visibility`）。

为自定义属性赋予动画
----------

对于使用 `registerProperty()` (en-US) 方法所注册的自定义属性，其动画类型为按计算值，且其计算值类型由此属性的语法定义所决定。

对于未注册的自定义属性，其动画类型为离散。

参见
--

* 使用 CSS 动画
* 使用 CSS 过渡


CSS 盒子对齐 - CSS：层叠样式表

CSS 盒子对齐
========

CSS 盒子对齐 (Box Alignment) 模块指定了在各种 CSS 盒子布局模型，如块布局，表布局，弹性布局和网格布局中，与盒子对齐有关的 CSS 功能。该模块旨在建立一种能一致地在 CSS 中指定对齐的方法。这份文档详述了出现在该规范中的一般概念。

**备注：** 每种布局方法的文档都将详细说明在其中是如何应用“盒子对齐”的

较老的对齐方法
-------

传统上，CSS 的对齐功能非常有限。我们可以利用 `text-align` 对齐文本，利用 auto `margin` 对齐块，并且利用 `vertical-align` 属性在表格 (table) 或者行内块 (inline-block) 布局中对齐块。现在 Inline Layout 与 CSS Text 模块中涵盖了文本对齐的内容，而盒子对齐模块让我们第一次拥有了完整的水平与垂直对齐的能力。

如果你最初学习过弹性盒子（Flexbox），你可能会觉得这些属性是弹性盒子规范的一部分。确实，某些属性是列在弹性盒子的 Level 1 标准中，不过规范指出我们应该提到盒子对齐规范，因为它可能会弹性盒子的基础上增加额外的功能。

基本示例
----

下面的例子演示了部分盒子对齐属性在网格和弹性盒子中是如何被使用的。

### CSS 网格布局对齐示例

下面使用网格布局的示例中，在行内轴 (inline axis)（主轴 (main axis)）上布局了固定宽度的轨道后，网格容器中有一些多余的空间。这些空间是使用 `justify-content` 来分配的。在块轴 (block axis)（交叉轴 (cross axis)）上，项目在他们的网格区域内的对齐是用 `align-items` 来控制的。第一个项目通过将 `align-self` 设置为 `center`，重载了组内设置的 `align-items` 属性。

### 弹性盒子对齐示例

在下面的示例中，三个弹性项目分别利用 `justify-content` 和 `align-items` 属性在主轴和交叉轴上对齐。第一个项目通过将 `align-self` 设置为 `center`，重载了组内设置的 `align-items` 属性。

关键概念与术语
-------

规范详细介绍了一些对齐术语，让我们能更容易地在特定布局方法内的具体实现之外讨论这些对齐属性。另外其中还有一些对于所有布局方法都通用的关键概念。

### 与书写模式的关系

对齐方式与书写模式有关，因为在对齐项目时，我们不会考虑是否将其对齐到顶部，右侧，底部和左侧的物理尺寸。与此相反，我们根据正在使用的特定维度的开始和结束来描述对齐方式。这样可确保不管文档具有怎样的书写模式，对齐方式总是以相同的方式工作。

### 对齐的两个维度

使用盒子对齐属性时，我们会在两个轴的其中之一上对齐内容——行内轴 (inline axis)（或称主轴 (main axis)）和块轴 (block axis)（或称交叉轴 (cross axis)）。内联轴是在使用特定写作模式中，沿句子单词的流动方向的轴。比如对于英语或者中文来说，内联轴是水平的。块轴是沿块 (block)（比如段落元素）的布局方向延伸的轴，它会垂直穿过行内轴。

![](/zh-CN/docs/Web/CSS/CSS_box_alignment/two-axes.png)

当在行内轴上对齐项目时，你将用到以 `justify-` 开头的属性：

* `justify-items`
* `justify-self`
* `justify-content`

当在块轴上对齐项目时，你将用到以 `align-` 开头的属性：

* `align-items`
* `align-self`
* `align-content`

在弹性盒子布局中，情况要更复杂些，因为当 `flex-direction` 设置为 `row` 时，上面的这些说法都是对的。但当弹性盒子设为 `column` 时则恰好相反（行内轴上的对齐用 `justify-` 指定，块轴上用 `align-` ）。因此，当使用弹性盒子时，用主轴和交叉轴来思考要比用行内轴和块轴来思考更直观些。 `justify-` 属性总是用来对齐主轴，而 `align-` 属性总是用来对齐交叉轴的。

### 对齐主体

**对齐主体** 指的是被对齐的物体。对于 `justify-self` 或 `align-self` ，或者将以上两值用 `justify-items` 或 `align-items` 成组设置时，对齐主体将是使用此属性的元素的外边距盒子 (margin box)。 `justify-content` 和 `align-content` 属性因布局方法而异。

### 对齐容器

**对齐容器** 指的是对齐主体被对齐时所处的盒子。这一般指的是包含对齐主体的块。一个对齐容器可能包含一个或多个对齐主体。

下图展示了一个内部包含两个对齐主体的对齐容器。

![](/zh-CN/docs/Web/CSS/CSS_box_alignment/align-container-subjects.png)

### 回退对齐

如果设置的对齐方式无法实现，那么 **回退对齐** 将派上用场并且处理可用的空间。这一回退对齐是为每种布局方法分别指定的，且在方法的对应页面上有详细说明。

对齐的种类
-----

规范中详述了三种不同的对齐方式；这些对齐使用关键字值。

* **位置对齐 (Positional alignment)**：通过对齐主体与它的对齐容器间的关系来指定对齐主体的位置。
* **基线对齐 (Baseline alignment)**：这些关键字把对齐看作在一个对齐上下文中多个对齐主体的基线 (baseline) 之间的关系。
* **分布对齐 (Distributed alignment)**：这些关键字把对齐看作多个对齐主体间空间的分布
### 位置对齐关键字的值

以下这些值是为位置对齐定义的，并且可以用于指定内容对齐的 `justify-content` 和 `align-content` 属性与指定自对齐的 `justify-self` 和 `align-self` 属性上。

* `center`
* `start`
* `end`
* `self-start`
* `self-end`
* `flex-start` 仅用于弹性盒子布局
* `flex-end` 仅用于弹性盒子布局
* `left`
* `right`

除了与屏幕的物理属性相关的物理值 `left` 与 `right` 之外，其他的所有值都是与内容的书写模式相关的逻辑值。

比如，当使用 CSS 网格布局时，如果你使用了英语并且把 `justify-content` 设为 `start` ，那么这一设置将会在行内维度上把项目移动到起始位置，也就是左侧，因为英语中句子的开头就在左侧。如果你使用的是阿拉伯语，一种从左到右书写的语言，那么相同的 `start` 值会导致项目移动到右侧，因为页面的右手边才是阿拉伯语中句子的开头。

这两个例子都设置了 `justify-content: start`，但是起始位置却随着书写模式而改变了。

![](/zh-CN/docs/Web/CSS/CSS_box_alignment/writing-mode-start.png)

### 基线对齐

基线对齐的关键词是用于对齐一组对齐主体的盒子的基线的。他们可以用于指定内容对齐的 `justify-content` 和 `align-content` 属性与指定自对齐的 `justify-self` 和 `align-self` 属性上。

* `baseline`
* `first baseline`
* `last baseline`

基线内容对齐——为 `justify-content` 或 `align-content` 指定基线对齐——适用于把项目按行排列的布局方法。通过在盒子内添加填充，使对齐主体的基线彼此对齐。

基线自对齐通过在盒子外部增加外边距，从而移动盒子，实现对齐。自对齐是指当使用 `justify-self` 或 `align-self`，又或者或者将以上两值用 `justify-items` 或 `align-items` 成组设置的情况。

### 分布对齐

**分布对齐关键字** 是用于 `align-content` 和 `justify-content` 属性的。这些关键字定义了在已经显示对齐主体后，其余的所有空间会发生什么。取值如下：

* `stretch`
* `space-between`
* `space-around`
* `space-evenly`

例如在弹性布局中，初始时是通过 `flex-start` 对齐项目的。在使用水平的，自上而下的书写模式（如英文或中文）时，若 `flex-direction` 设为 `row` ，那么项目将从最左边开始，显示项目后的所有可用空间都放置在项目之后。

![](/zh-CN/docs/Web/CSS/CSS_box_alignment/justify-content-start.png)

如果你在弹性容器上设置了 `justify-content: space-between` ，那么可用空间会被共享并放置在项目之间。

![](/zh-CN/docs/Web/CSS/CSS_box_alignment/justify-content-space-between.png)

为了使这些关键字生效，在项目要对齐的维度上必须有可用空间。没有空间，就没有空间可以分布。

溢出对齐
----

`safe` 与 `unsafe` 关键字可以帮助我们定义当对齐主体比对齐容器更大时的表现。`safe` 关键字会在一个指定的对齐方式导致了溢出时对齐到 `start` ，其目的是避免“数据丢失”，即项目的一部分超出了对齐容器的边界并且无法滚动到该位置。

如果你指定 `unsafe` ，那么即使对齐方式会导致数据丢失也会按照该对齐方式来对齐。

盒子间的间隔
------

盒子对齐规范还包括 `gap`, `row-gap`，和 `column-gap` 属性。这些属性允许在一行或一列之间设置一致的间隔，只要布局是用这种方法排列项目的。

`gap` 属性是 `row-gap` 和 `column-gap` 属性的简写，让我们可以一次性的设置这些属性：

* `row-gap`
* `column-gap`
* `gap`

在下面的例子中，一个网格布局使用了 `gap` 简写来在行轨道上设置 `10px` 的间隙，在列轨道上设置 `2em` 的间隙。

下面这个例子在 `gap` 之外我还使用了 `grid-gap` (en-US) 属性。`gap` 属性原本在网格布局中是拥有 `grid-` 前缀的，而有些浏览器只支持这些有前缀的版本。

* `grid-row-gap` (en-US)
* `grid-column-gap` (en-US)
* `grid-gap` (en-US)

带前缀的版本将作为未带前缀版本的别名保留，不过你对于这些第三方的前缀你总是可以两者兼取，加上一个 `grid-gap` 属性然后再加上一个具有相同的值的 `gap` 属性。

另外，请注意其他的东西可能会增加显示的视觉间隔，例如使用空间分布关键字或为项目增加外边距。

详细说明各个对齐属性的页面
-------------

由于 CSS 盒子对齐属性的实现方式取决于与它们相交互的规范，因此请参见以下每种布局类型的页面，以获取关于如何将对齐属性与其一起使用的详细信息：

* Box alignment in Flexbox
* Box alignment in CSS Grid Layout (en-US)
* Box alignment in multiple-column layout (en-US)
* Box alignment for block, absolutely positioned and table layout
参考
--

### CSS 属性

* `justify-content`
* `align-content`
* `place-content`
* `justify-items`
* `align-items`
* `place-items`
* `justify-self`
* `align-self`
* `place-self` (en-US)
* `row-gap`
* `column-gap`
* `gap`
### 词汇表

* Cross axis
* Main axis
* Alignment container (en-US)
* Alignment subject (en-US)
* Fallback alignment (en-US)
指南
--

* CSS 弹性盒子指南：*Basic concepts of Flexbox*
* CSS 弹性盒子指南：*Aligning items in a flex container*
* CSS 网格指南：*Box alignment in CSS Grid layouts*
外部资源
----

* Box alignment cheatsheet
* CSS Grid, Flexbox and Box alignment
* Thoughts on partial implementations of Box alignment


outline-width - CSS：层叠样式表

outline-width
=============

CSS 属性 **`outline-width`** 用于设置一个元素的轮廓的厚度。元素轮廓是绘制于元素周围的一条线，位于 `border` 的外围。

尝试一下
----

大多情况下用简写属性 `outline` 定义轮廓外观会更方便。

Syntax
------

```css
/\* Keyword values \*/
outline-width: thin;
outline-width: medium;
outline-width: thick;

/\* <length> values \*/
outline-width: 1px;
outline-width: 0.1em;

/\* Global values \*/
outline-width: inherit;
```

`outline-width` 的值可以是下面列表中的任一项。

### Values

`<length>`

The width of the outline specified as a `<length>`.

`thin`

取决于用户代理。通常等同于桌面浏览器的 `1px` （包括 Firefox）。

`medium`

取决于用户代理。通常等同于桌面浏览器的 `3px` （包括 Firefox）。

`thick`

取决于用户代理。通常等同于桌面浏览器的 `5px`（包括 Firefox）。

### Formal syntax
```

outline-width =
  <line-width>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

```

Examples
--------

### HTML

```html
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
```

### CSS

```css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-width |

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | an absolute length; if the keyword `none` is specified, the computed value is `0` |
| Animation type | a length |

Browser compatibility
---------------------

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


<hue-interpolation-method> - CSS：层叠样式表

<hue-interpolation-method>
==========================

CSS 数据类型 **`<hue-interpolation-method>`** 表示用于在 `<hue>` (en-US) 值之间插值的算法。此插值方法指定了如何根据色轮求两个色相值之间的中点。此数据类型用作数据类型 `<color-interpolation-method>` 的分量。

在对 `<hue>` 值进行插值时，色相插值算法默认为 `shorter`。

语法
--

`<hue-interpolation-method>` 值由色相插值算法的名称后接字面标记 `hue` 所构成：
```

shorter hue
longer hue
increasing hue
decreasing hue
```

### 取值

任意一对色相角 `θ1` 和 `θ2` 对应色轮 (en-US)上的两条半径，且将圆周切为两段可用于插值的弧。两段弧均起于第一条半径并止于第二条半径，但一段为顺时针方向而另一段为逆时针方向。

**备注：** 下列描述和图示均基于色相角沿顺时针方向递增的色轮。注意在其他某些色轮中色相角递增对应逆时针操作。

有四种确定所用弧的算法：

`shorter`

使用劣弧。当两条半径重合时，此弧退化为单点。当两段弧长度相等时：

* 若 `θ1 < θ2`，则使用顺时针弧；
* 若 `θ1 > θ2`，则使用逆时针弧。

| `θ1 = 45deg`、`θ2 = 135deg` | `θ1 = -225deg`、`θ2 = 45deg` |
| --- | --- |
| shorter，θ1 = 45deg 且 θ2 = 135deg | shorter，θ1 = -225deg 且 θ2 = 45deg |

`longer`

使用优弧。当两条半径重合时：

* 若 `θ1 ≤ θ2`，则此弧变为顺时针定向的整个圆周。
* 若 `θ1 > θ2`，则此弧变为逆时针定向的整个圆周。

当两段弧长度相等时：

* 若 `θ1 < θ2`，则使用顺时针弧。
* 若 `θ1 > θ2`，则使用逆时针弧。

| `θ1 = 45deg`、`θ2 = -225deg` | `θ1 = 135deg`、`θ2 = 45deg` |
| --- | --- |
| longer，θ1 = 45deg 且 θ2 = -225deg | longer，θ1 = 135deg 且 θ2 = 45deg |

`increasing`

使用顺时针弧。当两条半径重合时：

* 若 `θ1 < θ2`，则此弧变为顺时针定向的整个圆周。
* 若 `θ1 ≥ θ2`，则此弧退化为单点。

| `θ1 = 45deg`、`θ2 = 135deg` | `θ1 = 495deg`、`θ2 = 45deg` |
| --- | --- |
| increasing，θ1 = 45deg 且 θ2 = 135deg | increasing，θ1 = 495deg 且 θ2 = 45deg |

`decreasing`

使用逆时针弧。当两条半径重合时：

* 若 `θ1 ≤ θ2`，则此弧退化为单点。
* 若 `θ1 > θ2`，则此弧变为逆时针定向的整个圆周。

| `θ1 = 45deg`、`θ2 = 495deg` | `θ1 = 135deg`、`θ2 = 45deg` |
| --- | --- |
| decreasing，θ1 = 45deg 且 θ2 = 495deg | decreasing，θ1 = 135deg 且 θ2 = 45deg |

形式语法
----
```

<hue-interpolation-method> =
  [ shorter | longer | increasing | decreasing ] hue

```

示例
--

### 比较各种色相插值算法

下列示例展示了在 `linear-gradient()` 中使用不同的色相插值算法的效果。

#### HTML

```html
<div class="hsl">
  <p>HSL</p>
</div>
<div class="hsl-increasing">
  <p>HSL increasing</p>
</div>
<div class="hsl-decreasing">
  <p>HSL decreasing</p>
</div>
<div class="hsl-longer">
  <p>HSL longer</p>
</div>
<div class="hsl-named">
  <p>HSL 具名颜色</p>
</div>
<div class="hsl-named-longer">
  <p>HSL 具名颜色（longer）</p>
</div>
```

#### CSS
```

div {
  border: 1px solid black;
  height: 50px;
  margin: 10px;
  width: 90%;
}
p {
  color: white;
  margin: 6px;
}
```

```css
.hsl {
  background: linear-gradient(
    to right in hsl,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right in hsl increasing hue,
    hsl(190deg 100% 50%),
    hsl(180deg 100% 50%)
  );
}
.hsl-decreasing {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-longer {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-named {
  background: linear-gradient(to right in hsl, orange, yellow);
}
.hsl-named-longer {
  background: linear-gradient(to right in hsl longer hue, orange, yellow);
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # hue-interpolation |

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

### css.types.color.color-mix

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

### css.types.image.gradient.conic-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.linear-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.radial-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.repeating-conic-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.repeating-linear-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.repeating-radial-gradient.hue\_interpolation\_method

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

参见
--

* `<color-interpolation-method>`
* `<hue>` (en-US)


::cue (:cue) - CSS：层叠样式表

::cue (:cue)
============

::cue CSS 伪元素匹配所选元素中的WebVTT提示。这可以用于在 VTT 轨道的媒体中使用字幕和其他线索。

只有 CSS 一小部分属性可以与 `::cue` 伪元素一起使用：

* `color`
* `opacity`
* `visibility`
* `text-decoration` and its longhand properties: `text-decoration-line`, `text-decoration-color`, and `text-decoration-style`
* `text-shadow`
* `background` and its longhand properties: `background-color`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, and `background-blend-mode`
* `outline` and its longhand properties: `outline-color`, `outline-style`, `outline-width`
* `font` and its longhand properties: `font-kerning`, `font-style`, `font-variant`, `font-variant-numeric`, `font-variant-position`, `font-variant-east-asian` (en-US), `font-variant-caps`, `font-variant-alternates`, `font-variant-ligatures`, `font-synthesis`, `font-feature-settings`, `font-language-override`, `font-weight`, `font-size`, `font-size-adjust`, `font-stretch`, and `font-family`
* `line-height`
* `white-space`
* `text-combine-upright` (en-US)
* `ruby-position` (en-US)

属性应用于整个提示集，就像它们是单个单元一样。唯一的例外是背景及其简写属性可以单独应用于每个提示，以避免创建框并遮盖意外大面积的媒体。

语法
--
```

::cue | ::cue( <selector> )
```

示例
--

以下 CSS 设置提示样式，使文本为白色，背景为半透明黑盒。

```css
::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}
```

规范
--

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |

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

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

参考
--

* 网络视频轨道格式（WebVTT）


左下边框圆角 - CSS：层叠样式表

左下边框圆角
======

**`border-bottom-left-radius`** 这个 css 属性设置元素左下角的圆角。圆角可以是圆或椭圆（注：应为圆或椭圆的一部分），或者当其中一个值为 0 时，圆角将不被设置，这时这个角将展示为直角。

![border-bottom-left-radius.png](/zh-CN/docs/Web/CSS/border-bottom-left-radius/border-bottom-left-radius.png)

一个无论是图像或颜色的背景，都会在边框上被裁剪，即使背景是圆角的; 裁剪的确切位置由 `background-clip` 属性定义。

**备注：** 如果该属性的值没有被一个在\*\*`border-bottom-left-radius`\*\* 属性后，作用于当前元素上的`border-radius`简写属性设置，那么该属性值将会被shorthand property重置为初始值。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the corresponding dimension of the border box |
| 计算值 | two absolute `length`s or `percentage`s |
| Animation type | a length, percentage or calc(); |

语法
--

```css
/\* 圆形 \*/
/\* border-bottom-left-radius: radius \*/
border-bottom-left-radius: 3px;

/\* 椭圆形 \*/
/\* border-bottom-left-radius: 水平方向 垂直方向 \*/
border-bottom-left-radius: 0.5em 1em;

border-bottom-left-radius: inherit;
```

where:

*radius*

Is a `<length>` or a `<percentage>` denoting the radius of the circle to use for the border in that corner.

*horizontal*

Is a `<length>` or a `<percentage>` denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner.

*vertical*

Is a `<length>` or a `<percentage>` denoting the vertical semi-major axis of the ellipsis to use for the border in that corner.

### Values

`<length-percentage>`

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. As absolute length it can be expressed in any unit allowed by the CSS `<length>` data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

### Formal syntax
```

border-bottom-left-radius =
  <length-percentage [0,∞]>{1,2}

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

| Live example | Code |
| --- | --- |
|
.
 | An arc of circle is used as the border

```css
div {
  border-bottom-left-radius: 40px 40px;
}
```

 |
|
.
 | An arc of ellipse is used as the border

```css
div {
  border-bottom-left-radius: 40px 20px;
}
```

 |
|
.
 | The box is a square: an arc of circle is used as the border

```css
div {
  border-bottom-left-radius: 40%;
}
```

 |
|
.
 | The box is not a square: an arc of ellipse is used as the border

```css
div {
  border-bottom-left-radius: 40%;
}
```

 |
|
.
 | The background color is clipped at the border

```css
div {
  border-bottom-left-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}
```

 |

Specifications
--------------

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

Browser compatibility
---------------------

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

See also
--------

The border-radius-related CSS properties: the CSS shorthand `border-radius`, the properties for the other corners: `border-top-right-radius`, `border-bottom-right-radius` (en-US), and `border-top-left-radius`.


border-block-start-width - CSS：层叠样式表

border-block-start-width
========================

CSS 属性 **`border-block-start-width`** 定义了元素的逻辑块首的边框宽度，并根据元素的书写模式、行内方向和文本朝向对应至实体边框宽度。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top-width`、`border-right-width`、`border-bottom-width` 或 `border-left-width` 属性。

尝试一下
----

语法
--

```css
/\* 边框宽度值 \*/
border-block-start-width: 5px;
border-block-start-width: thick;

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

与此相关的属性有 `border-block-end-width`、`border-inline-start-width` 和 `border-inline-end-width`，这些属性定义了元素其他边框的宽度。

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

### 取值

`<'border-width'>`

边框宽度。见 `border-width`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

形式语法
----
```

border-block-start-width =
  <line-width>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

```

示例
--

### 竖排文本的边框宽度

#### HTML

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

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-start-width: 5px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-width |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top-width`、`border-right-width`、`border-bottom-width` 和 `border-left-width`
* `writing-mode`、`direction`、`text-orientation`


grid-template-areas - CSS：层叠样式表

grid-template-areas
===================

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-template-areas`** CSS 属性是网格区域 grid areas 在 CSS 中的特定命名。

尝试一下
----

网格区块 (grid areas) 和网格项 (grid item) 沒有关联，但是它们可以和一些网格定位属性 (grid-placement properties) 关联起来，比如`grid-row-start` (en-US)， `grid-row-end` (en-US)， `grid-column-start` (en-US)和`grid-column-end` (en-US)；也可以和一些速记 (shorthands) 属性关联起来，比如`grid-row`，`grid-column` 和 `grid-area`。

语法
--

```css
/\* Keyword value \*/
grid-template-areas: none;

/\* <string> values \*/
grid-template-areas: "a b"; /\* 一行 两列 \*/
grid-template-areas:
  "a b b"
  "a c d"; /\* 两行 三列 \*/

/\* Global values \*/
grid-template-areas: inherit; /\* 继承 \*/
grid-template-areas: initial; /\* 默认值 \*/
grid-template-areas: unset; /\* 未设置 \*/
```

### 值

`none`

网格容器没有定义任何的网格区块 (grid areas)。

``<string>`+`

每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元 (cell) 会生成一列。多个同名的，跨越相邻行或列的单元称为网格区块 (grid area)。非矩形的网格区块是无效的。

### 形式语法
```

grid-template-areas =
  none       |
  <string>+

```

示例
--

### HTML

```html
<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>
```

### CSS

```css
#page {
  display: grid; /\* 1.设置 display 为 grid \*/
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav main"
    "nav foot"; /\* 2.区域划分 当前为 三行 两列 \*/
  grid-template-rows: 50px 1fr 30px; /\* 3.各区域 宽高设置 \*/
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head; /\* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 \*/
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-template-areas-property |

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

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

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

参见
--

* 相关 CSS 属性：`grid-template-rows`、`grid-template-columns`、`grid-template`
* Grid Layout 指南：*Grid template areas*
* 视频教程：*Grid Template Areas*


flex-wrap - CSS：层叠样式表

flex-wrap
=========

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

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

* Learn more
* See full compatibility
* Report feedback
概述
--

CSS 的 **`flex-wrap`** 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

尝试一下
----

参考 flex 布局的基本概念 查看更多的属性和信息。

语法
--

```css
flex-wrap: nowrap; /\* Default value \*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/\* Global values \*/
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: unset;
```

`flex-wrap` 属性可指定为以下取值列表中的任意一个关键字。

### 取值

`flex-wrap` 属性接受以下取值：

`nowrap`

flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。**cross-start** 会根据 `flex-direction` 的值等价于 **start** 或 **before**。为该属性的默认值。

wrap

flex 元素 被打断到多个行中。**cross-start** 会根据 `flex-direction` 的值等价于 **start** 或**before**。**cross-end** 为确定的 **cross-start** 的另一端。

`wrap-reverse`

和 wrap 的行为一样，但是 **cross-start** 和 **cross-end** 互换。

### 形式定义

|  |  |
| --- | --- |
| 初始值 | `nowrap` |
| 适用元素 | flex containers |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

### 形式语法
```

flex-wrap =
  nowrap        |
  wrap          |
  wrap-reverse

```

示例
--

### 设置 flex 容器堆叠形式

#### HTML

```html
<h4>这是一个关于 flex-wrap:wrap 的例子</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>这是一个关于 flex-wrap:nowrap 的例子</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>这是一个关于 flex-wrap:wrap-reverse 的例子</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
```

#### CSS

```css
/\* Common Styles \*/
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/\* Flexbox Styles \*/
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |

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

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

参见
--

* CSS 弹性盒子指南：flex 布局的基本概念
* CSS 弹性盒子指南：掌握弹性物件的包装


left - CSS：层叠样式表

left
====

CSS \*\*`left`\*\*属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。

```css
/\* <length> values \*/
left: 3px;
left: 2.4em;

/\* <percentage>s of the width of the containing block \*/
left: 10%;

/\* Keyword value \*/
left: auto;

/\* Global values \*/
left: inherit;
left: initial;
left: unset;
```

`left`的效果取决于元素的`position`属性：

* 当`position`设置为`absolute`或`fixed`时，`left`属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
* 当`position`设置为`relative`时，`left`属性指定了元素的左边界离开其正常位置的偏移。
* 当`position`设置为`sticky`时，如果元素在 viewport 里面，`left`属性的效果和 position 为`relative`等同；如果元素在 viewport 外面，`left`属性的效果和 position 为`fixed`等同。
* 当`position`设置为`static`时，`left`属性无效。

当`left`和`right` 同时指定时，元素的位置会被重复指定。当容器是从左到右时，`left`的值会被优先设定；当容器是从右到左时，`right`的值会被优先设定。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length, percentage or calc(); |

语法
--

### 值

`<length>`

可以是负的，正的 或者 null `<length>` 表示：

* 对于绝对定位的元素，元素左外边距边界与其包含块左边界之间的偏移。
* 对于相对定位定位的元素，元素的左边界离开其正常位置的偏移。

`<percentage>`

代表元素包含块的宽度的百分比 `<percentage>`。

`auto`

这个关键字表示：

* 对于绝对定位元素，元素将忽略此属性而以`right`属性为准，如果此时设置`width: auto`，将基于内容需要的宽度设置宽度；如果`right`也为`auto`的话，元素的水平位置就是它假如作为静态 (即 static) 元素时该在的位置。
* 对于相对定位元素，元素相对正常位置的偏移量将基于`right`属性；如果`right`也为`auto`的话，元素将不会有偏移。

`inherit`

这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为 `<length>`， `<percentage>` 或 `auto` 一样。

### 常用语法
```

left =
  auto                 |
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

```

示例
--

### CSS

```css
#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5c5c5c;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

#example\_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #d8f5ff;
}

#example\_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #c1ffdb;
}
#example\_3 {
  width: 600px;
  height: 400px;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #ffd7c2;
}

#example\_4 {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 10px;
  right: 20px;
  background-color: #ffc7e4;
}
```

### HTML

```html
<div id="wrap">
  <div id="example\_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>
      The only containing element for this div is the main window, so it
      positions itself in relation to it.
    </p>
  </div>

  <div id="example\_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>Relative position in relation to its siblings.</p>
  </div>

  <div id="example\_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>Relative to its sibling div above, but removed from flow of content.</p>

    <div id="example\_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>
  </div>
</div>
```

### 案例

规范
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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

参见
--

* `position`, `right`, `top`, `bottom`


vertical-align - CSS：层叠样式表

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
===============

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)


display - CSS：层叠样式表

display
=======

CSS **`display`** 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

形式上，**`display`** 属性设置元素的内部和外部的*显示类型*。外部类型设置元素参与流式布局；内部类型设置子元素的布局。一些 `display` 值在它们自己的单独规范中完整定义；例如，在 CSS 弹性盒模型的规范中，定义了声明 `display: flex` 时会发生的细节。

语法
--

CSS `display` 规定使用的关键字。

```css
/\* precomposed values \*/
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/\* box generation \*/
display: none;
display: contents;

/\* two-value syntax \*/
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/\* other values \*/
display: table;
display: table-row; /\* all table elements have an equivalent CSS display value \*/
display: list-item;

/\* Global values \*/
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
```

分组的值
----

关键值可以被分组为六个种类。

### 外部表现

`<display-outside>`

这些关键字规定元素的外部显示类型，实际上就是其在流式布局中的角色：

`block`

该元素生成一个块级元素盒，在正常的流中，该元素之前和之后产生换行。

`inline`

该元素生成一个或多个内联元素盒，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。

**备注：** 浏览器支持双值语法，当仅发现外部值时，例如当指定 `display: block` 或 `display: inline`，其将内部值设置为 `flow`。这种行为是预期的；例如，如果你指定一个元素是块元素，你将期望该元素的子元素将同块和内联元素一样参与正常的流布局。

### 内部表现

`<display-inside>` (en-US)

这些关键字规定了元素的内部显示类型，其定义了该内容布局时的格式上下文的类型（假设它是一个非替换元素）：

`flow`
实验性

该元素使用流式布局（块和内联布局）来排布它的内容。

如果它的外部显示类型是 `inline` 或 `run-in`，并且它参与一个块或者内联格式上下文，那么它将生成一个内联盒子。否则它将生成一个块容器盒。

根据其他属性的值（例如 `position`、`float` 或 `overflow`）以及它自身是否参与到块或者内联格式化上下文，它要么为它的内容建立新的块级格式化上下文（BFC），要么将其内容集成到其父元素的格式化上下文中。

`flow-root`

该元素生成一个块级元素盒，其会建立一个新的块级格式化上下文，定义格式化上下文的根元素。

`table`

该元素的行为类似于 HTML 中的 `<table>` 元素。它定义了一个块级别的盒子。

`flex`

该元素的行为类似块级元素并且根据弹性盒模型布局它的内容。

`grid`

该元素的行为类似块级元素并且根据网格模型布局它的内容。

`ruby`
实验性

该元素的行为类似内联元素并且根据 ruby 格式化模型布局它的内容。它的行为像关联的 HTML 的 `<ruby>` 元素。

**备注：** 浏览器支持双值语法，当仅发现外部值时，例如当指定 `display: flex` 或 `display: grid`，其将外部值设置为 `block`。这种行为是预期的；例如，如果你指定一个元素是 `display: grid`，你将期望在网格容器中创建的盒子是块级别的盒子。

### 列表元素

`<display-listitem>` (en-US)

该元素为内容生成一个块级盒子和一个单独的列表元素内联盒子。

`list-item` 的单独值将导致元素的行为类似于一个列表元素。其可以与 `list-style-type` 和 `list-style-position` 一起使用。

`list-item` 也可以与任意的 `<display-outside>` 关键字和 `<display-inside>` (en-US) 中的 `flow` 或 `flow-root` 关键字组合。

**备注：** 浏览器支持双值语法，如果没有指定内部值，默认为 `flow`。如果没有指定外部值，主体盒子将具有 `block` 的外部显示类型。

### 内部

`<display-internal>`

一些布局模型，例如 `table` 和 `ruby` 有一个复杂的内置结构，它们的子孙后代可以扮演几个不同的角色。本节定义的这些“内部”display 值，仅在特定的布局模式下有用。

`table-row-group`

该元素的行为类似于 HTML 的 `<tbody>` 元素。

`table-header-group`

该元素的行为类似于 HTML 的 `<thead>` 元素。

`table-footer-group`

该元素的行为类似于 HTML 的 `<tfoot>` 元素。

`table-row`

该元素的行为类似于 HTML 的 `<tr>` 元素。

`table-cell`

该元素的行为类似于 HTML 的 `<td>` (en-US) 元素。

`table-column-group`

该元素的行为类似于 HTML 的 `<colgroup>` 元素。

`table-column`

该元素的行为类似于 HTML `<col>` 元素。

`table-caption`

该元素的行为类似于 HTML 的 `<caption>` 元素。

`ruby-base`
实验性

该元素的行为类似于 HTML 的 `<rb>` 元素。

`ruby-text`
实验性

该元素的行为类似于 HTML 的 `<rt>` 元素。

`ruby-base-container`
实验性

该元素是作为匿名盒子生成的。

`ruby-text-container`
实验性

该元素的行为类似于 HTML 的 `<rtc>` 元素。

### 盒

`<display-box>`

这些关键词定义一个元素到底是否产生 display 盒。

`contents`

这些元素自身不会产生特定的盒子。它们被伪盒子（pseudo-box）和子盒子取代。请注意，CSS Display Level 3 规范中定义了 `contents` 值如何影响“异常元素”——这些元素不是纯粹由 CSS 盒模型概念呈现的（例如替换元素）。更多的细节请参见附录 B：display 的影响：异常元素的内容。

*由于浏览器的一个错误，该元素目前不会被添加到无障碍树中——屏幕阅读器将不会看到里面的内容。更多细节，参见下面的无障碍问题。*

`none`

使元素不再显示，其对布局不会有影响（文档渲染得好像这个元素并不存在）。所有的后代元素也不会再显示。为了使元素占据一个它通常占据的空间，但实际上没有渲染任何东西，应该使用 `visibility` 属性。

### 预组合

`<display-legacy>`

CSS 2 为 `display` 属性使用单关键字的预组合的语法，对相同布局模式的块级和内联级变体需要单独的关键字。

`inline-block`

该元素生成块级元素盒，如果它是一个单独的内联盒，它将和周围的内容一起流动（行为类似于替换元素）。

它等同于 `inline flow-root`。

`inline-table`

`inline-table` 值在 HTML 中没有直接的映射。它行为类似于 HTML 的 `<table>` 元素，但实际是一个内联盒，而不是一个块级盒子。table 盒内部是一个块级上下文。

它等同于 `inline table`。

`inline-flex`

元素的行为类似于内联元素并且它的内容根据弹性盒模型布局。

它等同于 `inline flex`。

`inline-grid`

元素的行为类似于内联元素并且它的内容根据网格盒模型布局。

它等同于 `inline grid`。

### 你现在应该使用什么语法？

Level 3 规范中详细描述了 `display` 的双值属性——明确地启用外部和内部显示类型的规范——但浏览器尚未很好地支持这一点。

预组合 `<display-legacy>` 方法允许单关键字产生相同的结果，并且直到双关键值语法有着更好的支持之前，它应该被开发人员青睐。例如，你可以按以下方式使用双值语法指定一个内联的弹性容器：

```css
.container {
  display: inline flex;
}
```

目前可以使用单个值来指定。

```css
.container {
  display: inline-flex;
}
```

有关规范中的这些更改的更多信息，请参考这篇文章适应 display 的新的双值语法 (en-US).

### 全局值

```css
/\* Global values \*/
display: inherit;
display: initial;
display: unset;
```

描述
--

`display` 为不同类型的值设置了单独的页面，其中包含这些值的多个示例——请参阅语法部分。此外，请参阅以下资料，其中深度展示了 display 的各种值。

* 适应 display 的新双值语法 (en-US)
### CSS 流式布局（display: block、display: inline）

* 常规流中的块和内联布局
* 流布局和溢出
* 流布局和书写模式
* 格式化上下文简介
* 流式布局以及如何脱离流式布局
### display: flex

* 弹性盒基础概念
* 对齐弹性容器中的弹性项目
* 控制 Flex 子元素在主轴上的比例
* 掌握弹性物件的包装
* 弹性元素排序
* 弹性盒子与其他布局方法的联系
* 弹性盒的典型用例
### display: grid

* 网格布局的基本概念
* 网格布局和其他布局方法的联系
* 基于线的定位
* 网格模板区域
* 使用命名线布局
* 网格布局中的自动定位
* 网格布局中的盒模型对齐
* 网格、逻辑值和书写模式
* CSS 网格布局和无障碍
* CSS 网格布局和渐进增强
* 利用网格布局实现常用布局
无障碍问题
-----

### display: none

在一个元素中使用 `display` 的值为 `none` 将会从无障碍树中移除它。这将导致该元素及其所有后代元素不再通过屏幕阅读器技术展示。

如果你想要从视觉上隐藏元素，一个更好的替代方案是使用属性的组合将其直观地从屏幕删除，但是通过屏幕阅读器等辅助技术依然可以解析。

### display: contents

当前在大多数浏览器的实现是将任意 `display` 值为 `contents` 的元素从无障碍树中移除（但是保留后代元素）。这将导致该元素自身不再通过屏幕阅读器技术展示。根据 CSS 规范，这是错误的行为。

* 更多带有 display: contents 的无障碍标记 | Hidde de Vries
* Display: Contents Is Not a CSS Reset | Adrian Roselli
### 表格

将 `<table>` 元素的 `display` 值改为 `block`、`grid` 或 `flex`，这将改变它在无障碍树中的显示。这将导致表格不再通过屏幕阅读（screen reading）技术展示。

* 关于 CSS display 属性对表格语义的影响的简短说明——The Paciello Group
* 隐藏内容以获得更好的无障碍 | Go Make Things
* MDN Understanding WCAG，标准 1.3 解释 (en-US)
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
形式定义
----

|  |  |
| --- | --- |
| 初始值 | `inline` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified. |
| Animation type | Discrete behavior except when animating to or from `none` is visible for the entire duration |

形式语法
----
```

display =
  [ <display-outside> || <display-inside> ]         |
  <display-listitem>                                |
  <display-internal>                                |
  <display-box>                                     |
  <display-legacy>                                  |
  <display-outside> || [ <display-inside> | math ]

<display-outside> =
  block   |
  inline  |
  run-in

<display-inside> =
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby

<display-listitem> =
  <display-outside>?     &&
  [ flow | flow-root ]?  &&
  list-item

<display-internal> =
  table-row-group      |
  table-header-group   |
  table-footer-group   |
  table-row            |
  table-cell           |
  table-column-group   |
  table-column         |
  table-caption        |
  ruby-base            |
  ruby-text            |
  ruby-base-container  |
  ruby-text-container

<display-box> =
  contents  |
  none

<display-legacy> =
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid

```

示例
--

### 比较 display 的值

在这个示例中，我们有两个块级的容器元素，每个元素有三个内联子元素。在下面，我们有一个选择菜单，允许你将不同的 `display` 值应用于容器，允许你去比较和对比不同的值如何影响元素及其他们子元素的布局。

我们在容器上以及它们的子元素中使用了 `padding` 和 `background-color`，以便更容易看到 display 值的影响。

**备注：** 我们没有包含任何现代化的双值语法，因为对此的支持仍然相当有限。

#### HTML

```html
<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<div>
  <label for="display">Choose a display value:</label>
  <select id="display">
    <option selected>block</option>
    <option>inline</option>
    <option>inline-block</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>table</option>
    <option>list-item</option>
  </select>
</div>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}
```

#### JavaScript

```js
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener("change", updateDisplay);

updateDisplay();
```

#### 结果

**备注：** 你可以在页面上找到上面链接的每个单独 display 数据类型的更多示例。

规范
--

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

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

参见
--

* 常规流中的块和内联布局
* 介绍格式化上下文
* `visibility`、`float`、`position`
* `grid`、`flex`


:-moz-first-node - CSS：层叠样式表

:-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
==========

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> - CSS：层叠样式表

<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>`
* 正常流中的块向与行向布局
* 格式化上下文介绍


white-space - CSS：层叠样式表

white-space
===========

CSS **`white-space`** 属性用于设置如何处理元素内的空白字符。

尝试一下
----

这个属性指定了两件事：

* 空白字符是否合并，以及如何合并。
* 是否换行，以及如何换行。

**备注：** 要使单词可以在*其内部*被截断，请使用 `overflow-wrap`、`word-break` 或 `hyphens` 代替。

语法
--

```css
/\* 单个关键字值 \*/
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/\* white-space-collapse 和 text-wrap 简写值 \*/
white-space: collapse balance;
white-space: preserve nowrap;

/\* 全局值 \*/
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;
```

### 值

`white-space` 属性可以被指定为从下面的值列表中选择的单个关键字，或者是表示 `white-space-collapse` (en-US) 和 `text-wrap` (en-US) 属性的简写的两个值。

`normal`

连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。

`nowrap`

和 `normal` 一样合并空白符，但阻止源码中的文本换行。

`pre`

连续的空白符会被保留。仅在遇到换行符或 `<br>` 元素时才会换行。

`pre-wrap`

连续的空白符会被保留。在遇到换行符或 `<br>` 元素时，或者根据填充行框盒子的需要换行。

`pre-line`

连续的空白符会被合并。在遇到换行符或 `<br>` 元素时，或者根据填充行框盒子的需要换行。

`break-spaces`

与 `pre-wrap` 的行为相同，除了：

* 任何保留的空白序列总是占用空间，包括行末的。
* 每个保留的空白字符后（包括空白字符之间）都可以被截断。
* 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容——`min-content`——大小和最大内容——`max-content`——大小）。

下面的表格总结了各种 `white-space` 关键字值的行为：

|  | 换行符 | 空格和制表符 | 文本换行 | 行末空格 | 行末的其他空白分隔符 |
| --- | --- | --- | --- | --- | --- |
| `normal` | 合并 | 合并 | 换行 | 移除 | 挂起 |
| `nowrap` | 合并 | 合并 | 不换行 | 移除 | 挂起 |
| `pre` | 保留 | 保留 | 不换行 | 保留 | 不换行 |
| `pre-wrap` | 保留 | 保留 | 换行 | 挂起 | 挂起 |
| `pre-line` | 保留 | 合并 | 换行 | 移除 | 挂起 |
| `break-spaces` | 保留 | 保留 | 换行 | 换行 | 换行 |

**备注：** **空格**和**其他空白分隔符**之间存在区别。定义如下：

空格

空格（U+0020）、制表符（U+0009）和分段符（例如换行）

其他空白分隔符

Unicode 中定义的所有其他空格分隔符（已定义为空格的分隔符除外）。

如果空白字符被*挂起*，那么它可能会影响框的固有尺寸的测量结果。

合并空白字符
------

`white-space-collapse` (en-US) 属性的页面解释了浏览器合并空白字符的算法 (en-US)。

形式定义
----

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

形式语法
----
```

white-space =
  normal        |
  pre           |
  nowrap        |
  pre-wrap      |
  break-spaces  |
  pre-line

```

示例
--

### 基础示例

```css
code {
  white-space: pre;
}
```

### <pre> 元素内的换行

```css
pre {
  white-space: pre-wrap;
}
```

### 试试看
```

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
    <option>preserve nowrap</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
```

```
.box {
  width: 300px;
  padding: 16px;
}

#css-code {
  background-color: rgb(220, 220, 220);
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
}

#results {
  background-color: rgb(230, 230, 230);
  overflow-x: scroll;
  white-space: normal;
  font-size: 14px;
}
```

```
const select = document.querySelector("#css-code select");
const results = document.querySelector("#results p");
select.addEventListener("change", (e) => {
  results.setAttribute("style", `white-space: ${e.target.value}`);
});
```

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # white-space-property |

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

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

参见
--

* 定义单词如何在*其内部*被截断的属性：`overflow-wrap`、`word-break`、`hyphens`


:default - CSS：层叠样式表

: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
===========

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`


@media - CSS：层叠样式表

@media
======

**`@media`** CSS at 规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。

**备注：** 在 JavaScript 中，可以使用 `CSSMediaRule` CSS 对象模型接口访问使用 `@media` 创建的规则。

尝试一下
----

语法
--

`@media` at 规则可置于你代码的顶层或嵌套至其他任何的 at 条件规则组中。

```css
/\* 在你的代码的顶层 \*/
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/\* 嵌套至其他的 at 条件规则中 \*/
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}
```

有关媒体查询语法的讨论，请参阅使用媒体查询。

描述
--

### 媒体类型

*媒体类型*（media type）描述设备的一般类别。除非使用 `not` 或 `only` 逻辑运算符，否则媒体类型是可选的，并且会（隐式地）应用 `all` 类型。

`all`

适用于所有设备。

`print`

适用于在打印预览模式下在屏幕上查看的分页材料和文档。（有关特定于这些格式的格式问题的信息，请参阅分页媒体。）

`screen`

主要用于屏幕。

**备注：** CSS2.1 和媒体查询第 3 版定义了一些额外的媒体类型（`tty`、`tv`、`projection`、`handheld`、`braille`、`embossed` 以及 `aural`），但是它们在媒体查询第 4 版中已被弃用，不应继续使用。

媒体特性
----

*媒体特性*（media feature）描述了用户代理、输出设备或环境的具体特征。媒体特性表达式是完全可选的，其用于测试这些特征是否存在以及它们的值。每个媒体特性表达式都必须用括号括起来。

`any-hover`

是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？于媒体查询第 4 版中被添加。

`any-pointer`

可用的输入机制中是否有任何指针设备，如果有，它的精度如何？于媒体查询第 4 版中被添加。

`aspect-ratio`

视口（viewport）的宽高比。

`color` (en-US)

输出设备每个颜色分量的比特值，如果设备不支持输出彩色，则该值为 0。

`color-gamut` (en-US)

用户代理和输出设备大致程度上支持的色域。于媒体查询第 4 版中被添加。

`color-index` (en-US)

输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0。

`device-aspect-ratio` (en-US)
已弃用

输出设备的宽高比。于媒体查询第 4 版中被弃用。

`device-height`
已弃用

输出设备渲染表面的高度。于媒体查询第 4 版中被弃用。

`device-width` (en-US)
已弃用

输出设备渲染表面的宽度。于媒体查询第 4 版中被弃用。

`display-mode` (en-US)

应用程序的显示模式，显示模式由 web 应用的清单（manifest）中的 `display` 成员所指定。定义于 Web App Manifest 规范。

`dynamic-range` (en-US)

用户代理和输出设备支持的亮度、对比度和色彩深度的组合。于媒体查询第 5 版中被添加。

`forced-colors` (en-US)

检测用户代理是否限制调色板。于媒体查询第 5 版中被添加。

`grid` (en-US)

输出设备使用网格屏幕还是点阵屏幕？

`height` (en-US)

视口的高度。

`hover`

主输入机制是否允许用户在元素上悬停。于媒体查询第 4 版中被添加。

`inverted-colors` (en-US)

用户代理或者底层操作系统是否反转了颜色。于媒体查询第 5 版中被添加。

`monochrome` (en-US)

输出设备单色帧缓冲区中每个像素的位深度。如果设备并非单色屏幕，则该值为 0。

`orientation`

视口的旋转方向。

`overflow-block`

输出设备如何处理沿块轴溢出视口的内容。于媒体查询第 4 版中被添加。

`overflow-inline`

沿行轴溢出视口的内容是否可以滚动。于媒体查询第 4 版中被添加。

`pointer` (en-US)

主输入机制是一个指针设备吗？如果是，它的精度如何？于媒体查询第 4 版中被添加。

`prefers-color-scheme`

检测用户倾向于选择亮色还是暗色的配色方案。于媒体查询第 5 版中被添加。

`prefers-contrast` (en-US)

检测用户是否有向系统要求提高或降低相近颜色之间的对比度。于媒体查询第 5 版中被添加。

`prefers-reduced-motion`

用户是否希望页面上出现更少的动态效果。于媒体查询第 5 版中被添加。

`resolution` (en-US)

输出设备的像素密度（分辨率）。

`scripting`

检测脚本（例如 JavaScript）是否可用。于媒体查询第 5 版中被添加。

`update` (en-US)
实验性

输出设备修改渲染内容的频率。于媒体查询第 4 版中被添加。

`video-dynamic-range` (en-US)

用户代理的视频平面（video plane）和输出设备支持的亮度、对比度及色彩深度的组合。于媒体查询第 5 版中被添加。

`width`

视口（包括纵向滚动条）的宽度。

### 逻辑运算符

*逻辑运算符*（logical operator）`not`、`and`、`only` 和 `or` 可用于联合构造复杂的媒体查询，你还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

`and`

用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为 `true`，它还用于将媒体特性与媒体类型结合在一起。

`not`

用于否定媒体查询，如果不满足这个条件则返回 `true`，否则返回 `false`。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 `not` 运算符，则*还必须*指定媒体类型。

**备注：** 在第 3 版中，`not` 关键字不能用于否定单个媒体特性表达式，而只能用于否定整个媒体查询。

`only`

仅在整个查询匹配时才应用样式。这对于防止较老的浏览器应用所选样式很有用。当不使用 `only` 时，较老的浏览器会将 `screen and (max-width: 500px)` 简单地解释为 `screen`，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 `only` 运算符，则*还必须*指定媒体类型。

`,`（逗号）

逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为 `true`，则整个媒体查询语句返回 `true`。换句话说，列表的行为类似于逻辑或（`or`）运算符。

`or`

等价于 `,` 运算符。于媒体查询第 4 版中被添加。

### 用户代理客户端提示

一些媒体查询有相应的用户代理客户端提示。这是请求特定媒体要求的预优化内容的 HTTP 标头，其包括 `Sec-CH-Prefers-Color-Scheme` (en-US) 和 `Sec-CH-Prefers-Reduced-Motion` (en-US)。

无障碍考虑
-----

为了最好地适应调整了网站文本大小的用户，当你需要在媒体查询中使用 `<length>` 时，请使用 `em` 单位。

`em` 和 `px` 都是有效单位，但如果用户更改浏览器文本大小，`em` 的效果会更好。

考虑使用媒体查询第 4 版来改善用户体验。例如，使用 `prefers-reduced-motion` 以检测用户是否已请求系统最小化其使用的动画或动作。

安全
--

由于媒体查询可以洞察用户正在使用的设备的功能（以及扩展的特性和设计），因此有可能滥用它们来构造“指纹 (en-US)”以识别设备，或者至少将其细分类别到用户可能不希望看到的程度。

由于存在这种潜在的安全问题，浏览器可能会选择以某种方式伪造返回的值，以防止它们被用于精确地标识计算机。浏览器可能还会在这方面提供额外措施。例如，如果启用了 Firefox 的“拦截指纹跟踪”设置，则许多媒体查询会报告默认值，而不是代表实际设备状态的值。

形式语法
----
```

@media =
  @media <media-query-list> { <rule-list> }

```

示例
--

### 测试 print 和 screen 媒体类型

```css
@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}
```

媒体查询第 4 版引入了一种新的范围语法，在测试接受范围的任何特性时允许更简洁的媒体查询，如下面的示例所示：

```css
@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}
```

更多示例，请查看使用媒体查询。

规范
--

| Specification |
| --- |
| Media Queries Level 4 # media-descriptor-table |
| CSS Conditional Rules Module Level 3 # at-media |

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

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

参见
--

* 使用媒体查询
* 在 JavaScript 中，可以通过 CSS 对象模型接口 `CSSMediaRule` 访问 `@media`。
* 扩展的 Mozilla 媒体特性 (en-US)
* 扩展的 WebKit 媒体特性


border-style - CSS：层叠样式表

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：层叠样式表

可替换元素
=====

在 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()
=====

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：层叠样式表

网格布局
====

**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 - CSS：层叠样式表

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 - CSS：层叠样式表

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 - CSS：层叠样式表

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.


border-inline-end-width - CSS：层叠样式表

border-inline-end-width
=======================

CSS 属性 **`border-inline-end-width`** 定义了元素的逻辑行末的边框宽度，并根据元素的书写模式、行内方向和文本朝向对应至实体边框宽度。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top-width`、`border-right-width`、`border-bottom-width` 或 `border-left-width` 属性。

尝试一下
----

语法
--

```css
/\* 边框宽度值 \*/
border-inline-end-width: 2px;
border-inline-end-width: thick;

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

与此相关的属性有 `border-block-start-width`、`border-block-end-width` 和 `border-inline-start-width`，这些属性定义了元素其他边框的宽度。

### 取值

`<'border-width'>`

边框宽度。见 `border-width`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

形式语法
----
```

border-inline-end-width =
  <line-width>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

```

示例
--

### 为竖排文本应用边框

#### HTML

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

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-end-width: 5px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-width |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top-width`、`border-right-width`、`border-bottom-width` 和 `border-left-width`
* `writing-mode`、`direction`、`text-orientation`


flex-basis - CSS：层叠样式表

flex-basis
==========

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

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

* Learn more
* See full compatibility
* Report feedback
CSS 属性 **`flex-basis`** 指定了 flex 元素在主轴方向上的初始大小。如果不使用 `box-sizing` 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

尝试一下
----

**备注：** 当一个元素同时被设置了 `flex-basis` (除值为 `auto` 外) 和 `width` (或者在 `flex-direction: column` 情况下设置了`height`) , `flex-basis` 具有更高的优先级。

语法
--

```css
/\* 指定<'width'> \*/
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/\* 固有的尺寸关键词 \*/
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/\* 在 flex item 内容上的自动尺寸 \*/
flex-basis: content;

/\* 全局数值 \*/
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
```

这个 `flex-basis` 属性 被指定为关键词 `content` 或者 `<'width'>`.

### 取值

`<'width'>`

width 值可以是 `<length>`; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的`百分数` 。负值是不被允许的。默认为 `auto`。

`content`

基于 flex 的元素的内容自动调整大小。

>
> \*\*备注：\*\*由于最初规范中没有包括这个值，在一些早期的浏览器实现的 flex 布局中，content 值无效，可以利用设置 (width 或 height) 为 auto 达到同样的效果。
>
>
>

**备注：** **简史**

* 最初，"flex-basis:auto" 的含义是 "参照我的`width`和`height`属性".
* 在此之后，"flex-basis:auto" 的含义变成了自动尺寸，而 "main-size" 变成了 "参照我的`width`和`height`属性"。实际执行于 bug 1032922.
* 然后呢，这个更改又在 bug 1093316 中被撤销了，所以 "auto" 变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 (Firefox bug 1105111 包括了增加这个关键字).

### 规范
```

flex-basis =
  content    |
  <'width'>

```

示例
--

### HTML

```html
<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>
```

### CSS

```css
.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6ab6d8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2e86bb;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.flex1 {
  flex-basis: auto;
}

.flex1:after {
  content: "auto";
}

.flex2 {
  flex-basis: max-content;
}

.flex2:after {
  content: "max-content";
}

.flex3 {
  flex-basis: min-content;
}

.flex3:after {
  content: "min-content";
}

.flex4 {
  flex-basis: fit-content;
}

.flex4:after {
  content: "fit-content";
}

.flex5 {
  flex-basis: content;
}

.flex5:after {
  content: "content";
}

.flex6 {
  flex-basis: fill;
}

.flex6:after {
  content: "fill/-webkit-fill-available/-moz-available";
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-basis-property |

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | flex items, including in-flow pseudo-elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the flex container's inner main size |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length, percentage or calc(); |

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

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

参见
--

* CSS 弹性盒子指南：*Basic Concepts of Flexbox*
* CSS 弹性盒子指南：*Controlling Ratios of flex items along the main axis*
* `width`