scroll-margin - CSS：层叠样式表

scroll-margin
=============

简写属性 **`scroll-margin`** 同时设置元素的所有滚动外边距，其赋值方式较为类似 `margin` 属性为元素外边距赋值的方式。

尝试一下
----

属性构成
----

此属性为下列 CSS 属性的简写属性：

* `scroll-margin-bottom`
* `scroll-margin-left`
* `scroll-margin-right`
* `scroll-margin-top`
语法
--

```css
/\* <length> 值 \*/
scroll-margin: 10px;
scroll-margin: 1em 0.5em 1em 1em;

/\* 全局值 \*/
scroll-margin: inherit;
scroll-margin: initial;
scroll-margin: revert;
scroll-margin: revert-layer;
scroll-margin: unset;
```

### 取值

`<length>`

滚动容器对应边的外边距。

描述
--

通过滚动至示例内容两“页”之间的一点可见 `scroll-margin` 的效果。为 `scroll-margin` 指定的值决定了页面主要位于吸附口外的多少部分应保持可见。

因此 `scroll-margin` 值表示定义滚动吸附区域的外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `scroll-margin-bottom`: `0`
* `scroll-margin-left`: `0`
* `scroll-margin-right`: `0`
* `scroll-margin-top`: `0`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `scroll-margin-bottom`: as specified
* `scroll-margin-left`: as specified
* `scroll-margin-right`: as specified
* `scroll-margin-top`: as specified
 |
| Animation type | by computed value type |

形式语法
----
```

scroll-margin =
  <length>{1,4}

```

示例
--

### 简单演示

此示例所实现的内容与上述互动示例非常相似，但此处将解释其实现方法。

此处的目标为创建四个横向滚动区块，其中第二个和第三个吸附至指定位置——靠近但不恰好位于每个区块的左侧。

#### HTML

表示这些区块的 HTML 非常简单：

```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

#### CSS

一起来过一遍 CSS。外层容器有如下样式：

```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```

与滚动吸附相关的主要部分为 `overflow-x: scroll`——确保内容可滚动且不被隐藏——以及 `scroll-snap-type: x mandatory`——要求必须沿横轴出现滚动吸附，且滚动总将止于吸附点。

子元素有如下样式：

```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```

此处最相关的部分为 `scroll-snap-align: start`——指定左侧的边（即此情形中沿 x 轴的“首侧”）为吸附点。

最后指定滚动外边距的值，为第二个和第三个子元素指定不同的值：

```css
.scroller > div:nth-child(2) {
  scroll-margin: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin: 2rem;
}
```

这意味着当滚动过中间的子元素后，滚动将吸附至第二个 `<div>` 左侧边的 `1rem` 外处，及第三个 `<div>` 左侧边的 `2rems` 外处。

**备注：** 此处虽然在所有侧均设置了 `scroll-margin`，但真正相关的仅有首侧边。此处若仅在此边上设置滚动外边距，例如 `scroll-margin-inline-start: 1rem` 或 `scroll-margin: 0 0 0 1rem`，则效果相同。

#### 结果

请自行尝试：

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-margin |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动


<ratio> - CSS：层叠样式表

<ratio>
=======

<ratio> CSS 数据类型，用于描述媒体查询中的宽高比，表示两个无单位值之间的比例。

句法
--

在 Media Queries Level 3 中，<ratio>数据类型包括一个正数的<integer>值，后跟一个正斜杠（'/'，Unicode U + 002F SOLIDUS）和第二个正数的<integer>值。斜杠前后的空格是可选的。第一个数字代表宽度，第二个数字代表高度。

在 Media Queries Level 4 中，<ratio>数据类型包括一个正数的<number>值，后跟一个正斜杠（'/'，Unicode U + 002F SOLIDUS）和第二个正数的<number>值。此外，允许使用单个<number>作为值。

例子
--

### 在媒体查询中使用

```css
@media screen and (min-aspect-ratio: 16/9) { ... }
```

### 常见的宽高比

( (

|  | 比 | 用法 |
| --- | --- | --- |
| Ratio4_3.png | `4/3` | 在 20 传统电视制式格式。 |
| Ratio16_9.png | `16/9` | 现代"宽屏”电视格式。 |
| Ratio1_1.85.png | `185/100`= `91/50` *(不允许非整数除数和除数)* | 自 20 世纪 60 年代以来最常见的电影格式。 |
| Ratio1_2.39.png | `239/100` *(不允许使用非整数红利和除数)* | "宽屏”,变形电影格式。 |

规范
--

| Specification |
| --- |
| Media Queries Level 4 # values |

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

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

参见
--

* `aspect-ratio` 媒体功能


-webkit-text-stroke-color - CSS：层叠样式表

-webkit-text-stroke-color
=========================

CSS 属性 **`-webkit-text-stroke-color`** 指定了文本字符的笔触颜色。若未设置此属性，则使用 `color` 属性的值。

```css
/\* 颜色值 \*/
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

/\* 全局值 \*/
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
-webkit-text-stroke-color: revert;
-webkit-text-stroke-color: revert-layer;
-webkit-text-stroke-color: unset;
```

语法
--

### 取值

`<color>`

笔触颜色。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | computed color |
| Animation type | a color |

形式语法
----
```

-webkit-text-stroke-color =
  <color>

```

示例
--

### 改变笔触颜色

#### HTML

```html
<p>带笔触的文本</p>
<input type="color" value="#ff0000" />
```

#### CSS

```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000; /\* 可在运行实例中被修改 \*/
}
```

```
const colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", (evt) => {
  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});
```

#### 结果

规范
--

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-color |

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

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

参见
--

* 宣布此特性的 Safari 博客文章
* 解释此特性的 CSS-Tricks 文章
* `-webkit-text-fill-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`


CSS Text - CSS：层叠样式表

CSS Text
========

**CSS Text** 是一个控制文本渲染方式的 CSS 模块，例如换行、对齐、空格处理、大小写。

参考
--

### 属性

* `hanging-punctuation`
* `hyphens`
* `letter-spacing`
* `line-break`
* `overflow-wrap`
* `tab-size`
* `text-align`
* `text-align-last`
* `text-indent`
* `text-justify`
* `text-size-adjust`
* `text-transform`
* `white-space`
* `word-break`
* `word-spacing`
规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |
| CSS Text Module Level 3  |
| CSS Text Module Level 4  |


color - CSS：层叠样式表

color
=====

CSS **`color`** 属性设置元素的文本以及文本装饰的前景色颜色值，并设置 `currentcolor` 值。`currentcolor` 可以用作*其他*属性的间接值，且为其他颜色属性（如 `border-color`）的默认值。

尝试一下
----

对于在 HTML 中使用颜色的概述，请参考使用 CSS 为 HTML 元素应用颜色。

语法
--

```css
/\* 关键字值 \*/
color: currentcolor;

/\* <named-color> 值 \*/
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/\* <hex-color> 值 \*/
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/\* <rgb()> 值 \*/
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/\* <hsl()> 值 \*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/\* <hwb()> 值 \*/
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);

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

`color` 属性被指定为 `<color>` 类型的单值。

注意值必须是一致的 `color` 值。它不可以是 `<gradient>`（实际上为 `<image>` 类型之一）。

### 值

`<color>`

设置元素的文本和装饰部分的颜色。

`currentcolor`

将颜色设置为元素的 `color` 属性值。但是，如果设置为 `color` 的值，`currentcolor` 将被视为 `inherit`。

无障碍考虑
-----

有一点很重要，要确保文本颜色与文本所在背景之间的对比度足够高，以便低视力的人群能够阅读页面内容。

颜色的对比度是通过比较文本和背景颜色值的亮度确定的。要符合当前的 Web 内容无障碍指南（WCAG），文本至少要有 4.5:1 的比例，大文本（比如标题）至少要有 3:1 的比例。具有加粗和至少 18.66px 大小，或者具有至少 24px 大小的文本称为大文本。

* WebAIM：颜色对比度检查器
* MDN 理解 WCAG，指南 1.4 解释 (en-US)
* 理解成功标准 1.4.3 | W3C 理解 WCAG 2.0
形式定义
----

|  |  |
| --- | --- |
| 初始值 | `canvastext` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | computed color |
| Animation type | by computed value type |

形式语法
----
```

color =
  <color>

```

示例
--

### 使文本为红色

以下方式可以使得文本显示为红色：

```css
p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255, 0, 0);
}
p {
  color: rgb(100%, 0%, 0%);
}
p {
  color: hsl(0, 100%, 50%);
}

/\* 50% 透明 \*/
p {
  color: #ff000080;
}
p {
  color: rgba(255, 0, 0, 0.5);
}
p {
  color: hsla(0, 100%, 50%, 0.5);
}
```

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # the-color-property |

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

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

参见
--

* 颜色 `<color>` 数据类型
* 其他颜色相关属性：`background-color`、`border-color`、`outline-color`、`text-decoration-color`、`text-emphasis-color` (en-US)、`text-shadow`、`caret-color`、`column-rule-color` 和 `color-adjust` (en-US)
* 使用 CSS 为 HTML 元素应用颜色


inset-block - CSS：层叠样式表

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

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

尝试一下
----

属性构成
----

此属性为下列 CSS 属性的简写属性：

* `inset-block-end`
* `inset-block-start`
语法
--

```css
/\* 长度值 \*/
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /\* 应用于块首和块末 \*/

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

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

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

### 取值

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

形式定义
----

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

形式语法
----
```

inset-block =
  <'top'>{1,2}

```

示例
--

### 设置块首和块末偏移

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset-block |

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

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

参见
--

* 对应的实体属性：`top`、`right`、`bottom` 和 `left`
* 对应的实体简写属性：`inset`
* 对应的行向简写属性：`inset-inline`
* `writing-mode`、`direction`、`text-orientation`


CSS 过渡 - CSS：层叠样式表

CSS 过渡
======

**CSS 过渡**这一 CSS 模块让你可以在特定的 CSS 属性值之间创建平缓过渡。可通过指定这些过渡的计时函数、时长和其他属性控制其行为。

参考
--

### 属性

* `transition`
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
指南
--

使用 CSS 过渡

关于如何使用 CSS 创建过渡的分步教程。此文描述了各相关 CSS 属性并解释了这些属性如何互相作用。

规范
--

| Specification |
| --- |
| CSS Transitions  |

参见
--

* 与 CSS 过渡相关的 CSS 动画为动画性属性提供了更精细的控制


指定值 - CSS：层叠样式表

指定值
===

概述
--

CSS 属性的 **指定值** (specified value) 会通过下面 3 种途径取得：

1. 在当前文档的样式表中给这个属性赋的值，会被优先使用。例如：把 `color` 属性的值设为`green` ，那么对应元素内的文字就会变成绿色。
2. 如果在当前文档的样式表中没有给这个属性赋值，那么它会尝试从父元素那继承一个值。例如：在一个 `<div>` 内部放置一个段落 (`<p>`)，这个 `<div>` 的 `font` 属性值为 "Arial"，而 `<p>` 的 `font` 属性没有被赋值，那么它的字体就会继承为 Arial
3. 如果上面的两种途径都不可行，则把 CSS 规范中针对这个元素的这个属性的初始值作为指定值
相关规范
----

* CSS 2.1 Assigning property values #specified-value


CSS 容器查询 - CSS：层叠样式表

CSS 容器查询
========

容器查询使你能够根据元素容器的大小应用样式。例如，如果容器在周围的上下文中可用的空间更少，你可以隐藏某些元素或使用较小的字体。容器查询是媒体查询的另一种选择，后者根据视口大小或其他设备特征为元素应用样式。

![一个基于视口宽度（即浏览器的完整宽度）的媒体查询和一个基于容器上下文宽度（即容器元素的宽度）的容器查询](/zh-CN/docs/Web/CSS/CSS_container_queries/container-query.svg)

使用容器查询
------

要使用容器查询，你需要在元素上声明一个**局限上下文**，以便浏览器知道你可能希望稍后查询此容器的尺寸。为此，请使用 `container-type` (en-US) 属性，值为 `size`、`inline-size` 或 `normal`。

这些值具有以下效果：

`size`

查询将基于容器的行向和块向尺度，将布局、样式和大小的限制应用于容器。

`inline-size`

查询将基于容器的行向尺度，将布局、样式和行向大小的限制应用于元素。

`normal`

该元素不是任何容器大小查询的查询容器，但仍然是容器样式查询的查询容器。

考虑以下带有标题和一些文本的博客文章的卡片组件示例：

```html
<div class="post">
  <div class="card">
    <h2>卡片标题</h2>
    <p>卡片内容</p>
  </div>
</div>
```

你可以使用 `container-type` 属性创建一个容器上下文：

```css
.post {
  container-type: inline-size;
}
```

接下来，使用 at 规则 `@container` (en-US) 定义容器查询。以下示例中的查询将根据具有局限上下文的最近祖先元素的大小应用样式于元素。具体而言，如果容器宽度大于 `700px`，则此查询将为卡片标题应用更大的字体大小：

```css
/\* 默认的卡片标题样式 \*/
.card h2 {
  font-size: 1em;
}

/\* 如果容器宽度大于 700px \*/
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}
```

使用容器查询时，卡片可以在页面的多个区域中重复使用，无需每次都知道它放置在的具体位置。如果包含卡片的容器宽度小于 `700px`，卡片标题的字体将变小，如果卡片在宽度大于 `700px` 的容器中，则卡片标题的字体将变大。

有关容器查询语法的更多信息，请参阅 `@container` (en-US) 页面。

### 为局限上下文命名

在上一节中，容器查询基于有局限上下文的最近祖先元素应用样式。可以使用 `container-name` (en-US) 属性为局限上下文命名。命名后，可以在 `@container` 查询中使用该名称以选择特定容器。以下示例创建了一个名为 `sidebar` 的局限上下文：

```css
.post {
  container-type: inline-size;
  container-name: sidebar;
}
```

然后，你可以使用 at 规则 `@container` 选择此局限上下文：

```css
@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}
```

有关为局限上下文命名的更多信息，请参见 `container-name` (en-US) 页面。

### 简写容器语法

声明局限上下文的简写方法是使用 `container` 属性：

```css
.post {
  container: sidebar / inline-size;
}
```

有关此属性的更多信息，请参见 `container` (en-US) 参考。

### 容器查询长度单位

当应用样式到一个容器中使用容器查询时，可以使用容器查询长度单位。这些单位指定了一个相对于查询容器尺寸的长度。使用相对于容器的长度单位的组件更灵活，可以在不必重新计算具体长度值的情况下在不同的容器中使用。

容器查询长度单位包括：

* `cqw`：查询容器宽度的 1%
* `cqh`：查询容器高度的 1%
* `cqi`：查询容器行向尺寸的 1%
* `cqb`：查询容器块尺寸的 1%
* `cqmin`：`cqi` 和 `cqb` 中较小的值
* `cqmax`：`cqi` 和 `cqb` 中较大的值

以下示例使用 `cqi` 单位根据容器的行向尺寸设置标题的字体大小：

```css
@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}
```

有关这些单位的更多信息，请参阅容器查询长度单位参考。

容器查询的回退
-------

对于尚不支持容器查询的浏览器，`grid` 和 `flex` 可用于为该页面上使用的卡片组件创建类似的效果。以下示例使用 `grid-template-columns` 声明为卡片组件创建了一个两列布局。

```css
.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
```

如果你想在视口较小的设备上使用单列布局，则可以使用媒体查询来更改网格模板：

```css
@media (max-width: 700px) {
  .card {
    grid-template-columns: 1fr;
  }
}
```

参见
--

* 媒体查询
* CSS `@container` (en-US) at 规则
* CSS `contain` 属性
* CSS `container` (en-US) 简写属性
* CSS `container-name` (en-US) 属性
* CSS `content-visibility` 属性
* Say Hello to CSS Container Queries，作者 Ahmad Shadeed
* Container Queries: a Quick Start Guide
* Collection of Container Queries articles


属性选择器 - CSS：层叠样式表

属性选择器
=====

CSS **属性选择器**匹配那些具有特定属性或属性值的元素。

```css
/\* 存在 title 属性的 <a> 元素 \*/
a[title] {
  color: purple;
}

/\* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 \*/
a[href="https://example.org"]
{
  color: green;
}

/\* 存在 href 属性并且属性值包含"example"的 <a> 元素 \*/
a[href\*="example"] {
  font-size: 2em;
}

/\* 存在 href 属性并且属性值结尾是".org"的 <a> 元素 \*/
a[href$=".org"] {
  font-style: italic;
}

/\* 存在 class 属性并且属性值包含单词"logo"的<a>元素 \*/
a[class~="logo"] {
  padding: 2px;
}
```

语法
--

`[attr]`

表示带有以 *attr* 命名的属性的元素。

`[attr=value]`

表示带有以 *attr* 命名的属性，且属性值为 *value* 的元素。

`[attr~=value]`

表示带有以 *attr* 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 *value*。

`[attr|=value]`

表示带有以 *attr* 命名的属性的元素，属性值为“value”或是以“value-”为前缀（`-` 为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN、zh-TW 可以用 zh 作为 value）。

`[attr^=value]`

表示带有以 *attr* 命名的属性，且属性值是以 *value* 开头的元素。

`[attr$=value]`

表示带有以 *attr* 命名的属性，且属性值是以 *value* 结尾的元素。

`[attr*=value]`

表示带有以 *attr* 命名的属性，且属性值至少包含一个 *value* 值的元素。

`[attr operator value i]`

在属性选择器的右方括号前添加一个用空格隔开的字母 `i`（或 `I`），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

`[attr operator value s]`
实验性

在属性选择器的右方括号前添加一个用空格隔开的字母 `s`（或 `S`），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

示例
--

### 链接

#### CSS

```css
a {
  color: blue;
}

/\* 以 "#" 开头的页面内部链接 \*/
a[href^="#"] {
  background-color: gold;
}

/\* 包含 "example" 的链接 \*/
a[href\*="example"] {
  background-color: silver;
}

/\* 包含 "insensitive" 的链接，不区分大小写 \*/
a[href\*="insensitive" i] {
  color: cyan;
}

/\* 包含 "cAsE" 的链接，区分大小写 \*/
a[href\*="cAsE" s] {
  color: pink;
}

/\* 以 ".org" 结尾的链接 \*/
a[href$=".org"] {
  color: red;
}

/\* 以 "https" 开始，".org" 结尾的链接 \*/
a[href^="https"][href$=".org"] {
  color: green;
}
```

#### HTML

```html
<ul>
  <li><a href="#internal">内部链接</a></li>
  <li><a href="http://example.com">示例链接</a></li>
  <li><a href="#InSensitive">非敏感内部链接</a></li>
  <li><a href="http://example.org">示例 org 链接</a></li>
  <li><a href="https://example.org">示例 https org 链接</a></li>
</ul>
```

#### 结果

### 多语言

#### CSS

```css
/\* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold \*/
div[lang] {
  font-weight: bold;
}

/\* 将所有语言为美式英语的 <div> 元素的文本颜色设为蓝色 \*/
div[lang~="en-us"] {
  color: blue;
}

/\* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 \*/
div[lang="pt"] {
  color: green;
}

/\* 将所有语言为中文的 <div> 元素的文本颜色设为红色
 无论是简体中文（zh-CN）还是繁体中文（zh-TW） \*/
div[lang|="zh"] {
  color: red;
}

/\* 将所有 `data-lang` 属性的值为 "zh-TW" 的 <div> 元素的文本颜色设为紫色 \*/
/\* 备注：和 JS 不同，CSS 可以在不使用双引号的情况下直接使用带连字符的属性名 \*/
div[data-lang="zh-TW"] {
  color: purple;
}
```

#### HTML

```html
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界你好！</div>
<div lang="zh-TW">世界你好！</div>
<div data-lang="zh-TW">世界你好！</div>
```

#### 结果

### HTML 有序列表

HTML 规范要求 `type` 属性被不分大小写地匹配，因为它主要用于 `<input>` 元素中。请注意，如果用户代理不支持这些修饰符，那么选择器将无法匹配。

#### CSS

```css
/\* 根据文档语言不同，大小写敏感性不同 \*/
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}
ol[type="b" s] {
  list-style-type: lower-alpha;
  background: lime;
}
ol[type="B" s] {
  list-style-type: upper-alpha;
  background: grey;
}
ol[type="c" i] {
  list-style-type: upper-alpha;
  background: green;
}
```

#### HTML

```html
<ol type="A">
  <li>非大小写敏感匹配呈现红色背景（类型选择器默认值）</li>
</ol>
<ol type="b">
  <li>如果支持 `s` 修饰符（大小写敏感匹配），拥有亮绿色背景</li>
</ol>
<ol type="B">
  <li>如果支持 `s` 修饰符（大小写敏感匹配），拥有灰色背景</li>
</ol>
<ol type="C">
  <li>如果支持 `i` 修饰符（大小写不敏感匹配），拥有绿色背景</li>
</ol>
```

#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # attribute-selectors |

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

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

参见
--

* `attr()`
* 选择单个元素：`Document.querySelector()`、`DocumentFragment.querySelector()` 或 `Element.querySelector()`
* 选择所有匹配的元素：`Document.querySelectorAll()`、`DocumentFragment.querySelectorAll()` 或 `Element.querySelectorAll()`


hanging-punctuation - CSS：层叠样式表

hanging-punctuation
===================

**`hanging-punctuation`** CSS 属性指定了标点符号应该放在文本句子的开头还是结尾。悬挂标点符号可能被放在线框外。

```css
/\* Keyword values \*/
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/\* Two keywords \*/
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/\* Three keywords \*/
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/\* Global values \*/
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;
```

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

语法
--

这个属性可被指定多个值，可以是一个值，也可以是两个值，或者是三个值。

* 一个值 语法：在下面列表中的任意一个值。
* 两个值 语法：
    + 或者与以下任何一个一起使用，并以它们结尾：last，allow-end 或 force-end
    + 或者与以下任何一个一起使用，并以它们开头：first，allow-end 或 force-end。
* 三个值 语法：
    + 或者`first`, `allow-end`, 和`last`
    + 或者 `first`, `force-end`, 和 `last`.
### 取值

`none`

无悬挂字符。

`first`

显示元素的第一个格式化行开头的括号或引号。

`last`

显示元素的最后一个格式化行结尾的括号或引号。

`force-end`

显示行结尾处的句号或逗号。

`allow-end`

如果预先没有其他适合的来适应的，则在行尾显示句号或逗号。

### 正式语法
```

hanging-punctuation =
  none                                            |
  [ first || [ force-end | allow-end ] || last ]

```

示例
--

### HTML

```html
<p>
  “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim
  nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor
  massa, sit amet vulputate nulla pharetra ut.”
</p>
```

### CSS

```css
p {
  hanging-punctuation: first;
  margin: 0.5rem;
}
```

### Result

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

* CSS Text Module Level 3 (Working Draft, 10-Oct-2013)
* CSS Text Module Level 3 (Editor’s Draft, 03-May-2017)


justify-self - CSS：层叠样式表

justify-self
============

CSS **`justify-self`** 属性设置单个盒子在其布局容器适当轴中的对其方式。

尝试一下
----

此属性的效果取决于我们所处的布局模式：

* 在块级布局中，它对齐一个项目在其包含块的内联轴上。
* 对于绝对定位的元素，它对齐一个项目在其包含块的内联轴上，同时计算 top，left，bottom 与 right 的值。（原文：it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.）
* 在表格布局中，这个属性被忽略（更多 关于块、绝对定位以及表格布局中的对齐方式）
* 在弹性布局中，这个属性被忽略（更多关于弹性布局中的对齐方式）
* 在栅格布局中，它对齐一个元素到该元素所在的栅格区域的内联轴上。（更多 (en-US) 关于栅格布局中的对齐方式）
语法
--

```css
/\* 基础关键字 \*/
justify-self: auto;
justify-self: normal;
justify-self: stretch;

/\* 位置对齐 \*/
justify-self: center; /\* 在中间放置元素 \*/
justify-self: start; /\* 在开始处放置元素 \*/
justify-self: end; /\* 在结束处放置元素 \*/
justify-self: flex-start; /\* 与 'start' 等效。注意 justify-self 在 Flexbox 布局中被忽略。 \*/
justify-self: flex-end; /\* 与 'end' 等效。注意 justify-self 在 Flexbox 布局中被忽略。 \*/
justify-self: self-start;
justify-self: self-end;
justify-self: left; /\* 在左侧放置元素 \*/
justify-self: right; /\* 在右侧放置元素 \*/

/\* 基线对齐 \*/
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;

/\* 溢出对齐（只对位置对齐有效果）\*/
justify-self: safe center;
justify-self: unsafe center;

/\* 全局关键字 \*/
justify-self: inherit;
justify-self: initial;
justify-self: unset;
```

这个属性可以有三种不同的形式：

* 基本关键字： `normal`， `auto`，或者 `stretch`。
* 基线对齐：`baseline` 关键字，加上可选的 `first` 或者 `last`。
* 可定位对齐：
    + `center`， `start`， `end`， `flex-start`， `flex-end`， `self-start`， `self-end`， `left`，或者 `right`。
    + 加上可选的 `safe` 或者`unsafe`。
### 值

`auto`

该值使用其父级元素盒子的 `justify-items` 属性的值，除非它没有父级元素，或者是绝对定位的，这些情况下，`auto` 代表了 `normal`。

`normal`

这个效果取决于我们所处的布局模式：

* 在块级布局中，这个关键字是 `start` 的同义词。
* 在绝对定位的布局中，在可置换绝对定位的盒子中，这个关键字表现的与 `start` 相似，在其他绝对定位的盒子中，其表现得与 `stretch` 相似。
* 在表格布局中，由于这个属性被忽略所以这个关键字没有作用。
* 在弹性布局中，由于这个属性被忽略所以这个关键字没有作用。
* 在栅格布局中，这个关键字会导致类似于 `stretch` 的行为，除了具有高宽比或固有大小的盒子，它的行为类似于 `start` 。

`start`

项目被放置到适当的轴上，朝向对齐容器的起始边缘，彼此齐平。

`end`

项目被放置到适当的轴上，朝向对齐容器的末端边缘，彼此齐平。

`flex-start`

对于非弹性容器子元素的项目，这个值被视为 `start` 。

`flex-end`

对于非弹性容器子元素的项目，这个值被视为 `end`.

`self-start`

The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.

`self-end`

The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.

`center`

项目被放置在对齐容器的中心向彼此平齐。

`left`

项目在对齐容器的左边缘，并彼此对齐。如果属性的轴与内联轴不平行，则此值的行为类似于`start` 。

`right`

项目在对齐容器的右边缘，并彼此对齐。如果属性的轴与内联轴不平行，则此值的行为类似于 `start` 。

`baseline first baseline`
`last baseline`

 Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
 The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`stretch`

If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by `max-height`/`max-width` (or equivalent functionality), so that the combined size exactly fills the alignment container.

`safe`

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.

`unsafe`

Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | block-level boxes, absolutely-positioned boxes, and grid items |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----
```

justify-self =
  auto                                                |
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  anchor-center

<baseline-position> =
  [ first | last ]?  &&
  baseline

<overflow-position> =
  unsafe  |
  safe

<self-position> =
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

```

示例
--

### 简单演示

In the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` — the default — which causes the grid items to stretch across the entire width of their cells.

The second, third, and fourth grid items are then given different values of `justify-self`, to show how these override the `justify-items` value. These values cause the grid items to span only as wide as their content width, and align in different positions across their cells.

#### HTML

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

#### CSS

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

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 300px;
  justify-items: stretch;
}

span:nth-child(2) {
  justify-self: start;
}

span:nth-child(3) {
  justify-self: center;
}

span:nth-child(4) {
  justify-self: end;
}

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

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

article {
  margin: 20px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # justify-self-property |

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

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

参见
--

* CSS Grid Guide: *Box alignment in CSS Grid layouts*
* CSS Box Alignment
* The `justify-items` property


height - CSS：层叠样式表

height
======

`height` CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 `box-sizing` 设置为 `border-box` , 这个属性决定的将是边框区域（border area）的高度。

尝试一下
----

`min-height` 和 `max-height` 属性会覆盖 `height`。语法
--

```css
/\* Keyword value \*/
height: auto;

/\* <length> values \*/
height: 120px;
height: 10em;

/\* <percentage> value \*/
height: 75%;

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

### 值

`<length>`

将高度定义为一个绝对值。

`<percentage>`

将高度定义为相对包含块高度的百分比。

`border-box`
实验性

如果设置该值，则 `<length>` 或者 `<percentage>` 会设置为该元素的 border box。

`content-box`
实验性

如果设置该值，则 `<length>` 或者 `<percentage>` 会设置为该元素的 content box。

`auto`

由浏览器为元素计算并选择一个高度。

`fill`
实验性

根据文字方向，使用 `fill-available` 作为行大小或者块大小。

`max-content`
实验性

设置为允许的最大高度。

`min-content`
实验性

设置为允许的最小高度。

`available`
实验性

包含块高度减去当前元素的边距，边框和填充。

`fit-content`
实验性

将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, ))

### Formal syntax
```

height =
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

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

```

示例
--

### HTML

```html
<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
  <div id="child">I'm half the height of my parent.</div>
</div>
```

### CSS

```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

### 结果

无障碍问题
-----

确保设定了 `height` 的元素在显示上不会被截断，或者当页面放大时增大的字体大小不会遮挡其他内容。

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements but non-replaced inline elements, table columns, and column groups |
| 是否是继承属性 | 否 |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`. A percentage height on the root element is relative to the initial containing block. |
| 计算值 | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

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

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

参见
--

* box model, `width`, `box-sizing`, `min-height`, `max-height`


CSS 分页媒体 - CSS：层叠样式表

CSS 分页媒体
========

**CSS 分页媒体**（paged media）模块定义控制打印内容或将内容拆分为离散页面的任何其他媒体的内容的表现属性。它允许你设置分页、控制可打印区域、以不同方式设置左侧和右侧页面的样式，以及控制元素内的分隔符。

参考
--

### 属性

* `break-after`
* `break-before` (en-US)
* `break-inside`
* `orphans` (en-US)
* `widows`
### At 规则

* `@page`
### 伪类

* `:blank`
* `:first`
* `:left`
* `:right`
规范
--

| Specification |
| --- |
| CSS Paged Media Module Level 3  |
| CSS Fragmentation Module Level 3  |

参见
--

* 打印指南
* CSS 媒体查询模块


:blank - CSS：层叠样式表

:blank
======

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

**`:blank`** CSS 伪类选择器 用于匹配如下节点

1. 没有子节点;
2. 仅有空的文本节点;
3. 仅有空白符的文本节点。
形式语法
----

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

### HTML

```html
<div></div>
```

### CSS
```

:root {
  overflow: hidden;
  max-width: 100vw;
  max-height: 100vh;
}

div {
  background-color: #ccc;
  box-sizing: border-box;
  height: 100vh;
  min-height: 16px;
  min-height: 1rem;
}

:-moz-only-whitespace {
  border-color: lime;
}
```

```css
div {
  border: 4px solid red;
}

:blank {
  border-color: lime;
}
```

### 结果

规范
--

在 Selectors Level 4 中被简要地定义为 `:blank`，但其功能随后被并入 `:empty`，而 `:blank` 则被重新定义为空的 `<input>`。

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

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

参见
--

* `:empty`


:scope - CSS：层叠样式表

:scope
======

**`:scope`** 属于 CSS 伪类，它表示作为选择器要匹配的参考点的元素。

```css
/\* Selects a scoped element \*/
:scope {
  background-color: lime;
}
```

当前，在样式表中使用时，`:scope` 等效于 `:root`，因为目前尚无一种方法来显式建立作用域元素。当从 DOM API 使用，如（`querySelector()`, `querySelectorAll()`, `matches()`, 或 `Element.closest()`）, `:scope` 匹配你调用 API 的元素。

用法
--

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

### Identity match

在这个简单的示例中，我们演示了调用 `Element.matches()` 方法中使用 `:scope` 伪类来匹配调用它的元素。

#### JavaScript

```js
let paragraph = document.getElementById("para");
let output = document.getElementById("output");

if (paragraph.matches(":scope")) {
  output.innerText = "Yep, the element is its own scope as expected!";
}
```

#### HTML

```html
<p id="para">
  This is a paragraph. It is not an interesting paragraph. Sorry about that.
</p>
<p id="output"></p>
```

#### 结果

### Direct children

当需要获取已检索到的的直接后代元素时，`:scope` 伪类很有用。

#### JavaScript

```js
var context = document.getElementById("context");
var selected = context.querySelectorAll(":scope > div");

document.getElementById("results").innerHTML = Array.prototype.map
  .call(selected, function (element) {
    return "#" + element.getAttribute("id");
  })
  .join(", ");
```

#### HTML

```html
<div id="context">
  <div id="element-1">
    <div id="element-1.1"></div>
    <div id="element-1.2"></div>
  </div>
  <div id="element-2">
    <div id="element-2.1"></div>
  </div>
</div>
<p>
  Selected elements ids :
  <span id="results"></span>
</p>
```

#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-scope-pseudo |

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

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

参见
--

* `:root` 与 `Pseudo-classes`
* 使用选择器定位 DOM 元素
* `Element.querySelector()` 与 `Element.querySelectorAll()`
* `Document.querySelector()` 与 `Document.querySelectorAll()`
* `DocumentFragment.querySelector()` 与 `DocumentFragment.querySelectorAll()`
* `ParentNode.querySelector()` 与 `ParentNode.querySelectorAll()`


布局模式 - CSS：层叠样式表

布局模式
====

CSS **布局模式**，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。有以下几种形式：

* **块布局**：用来布置文件。块布局包含以文档为中心的功能，例如 浮动元素或将其放置在多列上的功能。
* **行内布局**：用来布置文本。
* **表格布局**：用来布置表格。
* **定位布局**：用来对那些与其他元素无交互的定位元素进行布置。
* **弹性盒子布局** (en-US)：用来布置那些可以顺利调整大小的复杂页面。
实验性
* **网格布局**：用来布置那些与一个固定网格相关的元素。
实验性

**备注：** 并非所有 CSS 属性 适用于所有*布局模式*。大多数属性适用于一到两种布局模式，如果将属性设置在参与其他（原文 another，指三者或三者以上。）布局模式的元素上则会不起作用。

参见
--

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


table-layout - CSS：层叠样式表

table-layout
============

**table-layout** CSS 属性定义了用于布局表格的单元格、行和列的算法。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
table-layout: auto;
table-layout: fixed;

/\* 全局值 \*/
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;
```

### 取值

`auto`

默认情况下，大多数浏览器使用自动表格布局算法。表格及其单元格的宽度会根据内容自动调整大小。

`fixed`

表格和列的宽度是由 `table` 和 `col` 元素的宽度或第一行单元格的宽度来设置的。后续行中的单元格不会影响列的宽度。

在“fixed”布局方法下，一旦下载并分析了第一行表格，整个表格就可以被渲染出来。这可以加快渲染时间，相比于“automatic”布局方法，但是后续单元格内容可能不适合提供的列宽。单元格使用 `overflow` 属性来确定是否要剪裁任何溢出的内容，但仅当表格具有已知宽度时才会生效；否则，它们不会溢出到单元格之外。

形式语法
----
```

table-layout =
  auto   |
  fixed

```

形式定义
----
```

table-layout =
  auto   |
  fixed

```

示例
--

### 具有 text-overflow 的固定宽度表格

这个例子使用了固定的表格布局，结合 `width` 属性，限制了表格的宽度。`text-overflow` 属性被用来在单词太长无法容纳时应用省略号。如果表格布局是 `auto`，表格将会根据其内容自动扩展大小，而不考虑指定的 `width`。

#### HTML

```html
<table>
  <tr>
    <td>Ed</td>
    <td>Wood</td>
  </tr>
  <tr>
    <td>Albert</td>
    <td>Schweitzer</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Fonda</td>
  </tr>
  <tr>
    <td>William</td>
    <td>Shakespeare</td>
  </tr>
</table>
```

#### CSS

```css
table {
  table-layout: fixed;
  width: 120px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # width-layout |

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

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

参见
--

* `<table>`


env() - CSS：层叠样式表

env()
=====

**`env()`** CSS 函数以类似于 `var()` 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。为了告诉浏览器使用屏幕上所有的可用空间，并以此使用`env()`变量，我们需要添加一个新的视口元值：

```html
<meta name="viewport" content="... viewport-fit=cover" />
```

```css
body {
  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
      safe-area-inset-bottom,
      20px
    ) env(safe-area-inset-left, 20px);
}
```

另外，与自定义属性不同，自定义属性不能在声明之外使用，而`env()`函数可以代替属性值或描述符的任何部分（例如，在 媒体查询的规则 中）。随着规范的发展，它也可能在像是 选择器 等其他地方使用。

最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 `safe-area-inset-*` 值可用于确保内容即使在非矩形的视区中也可以完全显示。

语法
--

```css
/\* Using the four safe area inset values with no fallback values \*/
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/\* Using them with fallback values \*/
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);
```

### Values

`safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left`

`safe-area-inset-*`由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。对于非矩形显示器（如圆形表盘，iPhoneX 屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。

**注意**: 不同于其他的 CSS 属性，用户代理定义的属性名字对大小写敏感。

### 形式语法
```

<env()> =
  env( <custom-ident> <integer [0,∞]>\* , <declaration-value>? )

```

示例
--

下面的示例使用`env()`的第二个可选参数，如果环境变量不可用，该参数可让你设置备用值

```html
<p>
  If the <code>env()</code> function is supported in your browser, this
  paragraph's text will have 50px of padding between it and the left border —
  but not the top, right and bottom. This is because the accompanying CSS is the
  equivalent of <code>padding: 0 0 0 50px</code>, because, unlike other CSS
  properties, user agent property names are case-sensitive.
</p>
```

```css
p {
  width: 300px;
  border: 2px solid red;
  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
      safe-area-inset-bottom,
      50px
    ) env(SAFE-AREA-INSET-LEFT, 50px);
}
```

### Example values

```css
padding: env(
  safe-area-inset-bottom,
  50px
); /\* zero for all rectangular user agents \*/
padding: env(
  Safe-area-inset-bottom,
  50px
); /\* 50px because UA properties are case sensitive \*/
padding: env(
  x,
  50px 20px
); /\* as if padding: '50px 20px' were set because x is not a valid environment variable \*/
padding: env(
  x,
  50px,
  20px
); /\* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable \*/
```

向下兼容的语法和自定义属性一样，允许使用逗号。但是如果属性值不支持逗号，则该值无效。

**Note**: User agent properties are not reset by the all property.

规范
--

| Specification |
| --- |
| CSS Environment Variables Module Level 1 # env-function |

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

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

参见
--

* `var(…)`
* CSS Custom Properties for Cascading Variables (en-US)
* Custom Properties (--\*)
* Using CSS custom properties (variables)


font-variation-settings - CSS：层叠样式表

font-variation-settings
=======================

**`font-variation-settings`** CSS 属性提供了对 variable font 特征的低级控制，通过指定要更改的特征的四个字母轴名称及其值。

尝试一下
----

**备注：** This property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. `font-weight`, `font-style`).

**备注：** font characteristics set using `font-variation-settings` will always override those set using the corresponding basic font properties, e.g. `font-weight`, no matter where they appear in the cascade. In some browsers, this is currently only true when the `@font-face` declaration includes a `font-weight` range.

Syntax
------

```css
/\* Use the default settings \*/
font-variation-settings: normal;

/\* Set values for variable font axis names \*/
font-variation-settings: "XHGT" 0.7;

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

### Values

This property's value can take one of two forms:

`normal`

Text is laid out using default settings.

`<string> <number>`

When rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features. Each setting is always one or more pairs consisting of a `<string>` of 4 ASCII characters followed by a `<number>` indicating the axis value to set. If the `<string>` has more or fewer characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The `<number>` can be fractional or negative, depending on the value range available in your font, as defined by the font designer.

### Formal syntax
```

font-variation-settings =
  normal                        |
  [ <opentype-tag> <number> ]#

<opentype-tag> =
  <string>

```

Registered and custom axes
--------------------------

Variable font axes come in two types: **registered** and **custom**.

Registered axes are the most commonly encountered — common enough that the authors of the specification felt they were worth standardizing. Note that this doesn't mean that the author has to include all of these in their font.

Here are the registered axes along with their corresponding CSS properties:

| Axis Tag | CSS Property |
| --- | --- |
| "wght" | `font-weight` |
| "wdth" | `font-stretch` |
| "slnt" (slant) | `font-style`: `oblique + angle` |
| "ital" | `font-style`: `italic` |
| "opsz" | `font-optical-sizing` (en-US) |

Custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine. Any axis can be used as long as it is given a unique 4-character axis. Some will end up becoming more common, and may even become registered over time.

**备注：** Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.

Examples
--------

See below for interactive examples demonstrating the registered axes. You can find a number of other variable fonts examples at our Variable fonts guide, v-fonts.com, and axis-praxis.org.

**警告：** In order to use variable fonts on your operating system, you need to make sure that it is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS prior to 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.

### Weight (wght)

The following live example's CSS can be edited to allow you to play with font weight values.

### Slant (slnt)

The following live example's CSS can be edited to allow you to play with font slant/oblique values.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variation-settings-def |

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

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

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

See also
--------

* Variable fonts guide
* OpenType Font Variations Overview
* OpenType Design-Variation Axis Tag Registry


border-inline-color - CSS：层叠样式表

border-inline-color
===================

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

尝试一下
----

另一方向的边框颜色可用 `border-block-color` 设置，此属性会设置 `border-block-start-color` 和 `border-block-end-color`。

语法
--

```css
border-inline-color: yellow;
border-inline-color: #f5f6f7;

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

### 取值

`<'color'>`

边框颜色。见 `color`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | computed color |
| Animation type | by computed value type |

形式语法
----
```

border-inline-color =
  <'border-top-color'>{1,2}

```

示例
--

### 竖排文本的边框颜色

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-color: red;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-color |

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

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

参见
--

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


scroll-margin-block-start - CSS：层叠样式表

scroll-margin-block-start
=========================

**`scroll-margin-block-start`** 属性定义了滚动吸附区域在的块首外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
scroll-margin-block-start: 10px;
scroll-margin-block-start: 1em;

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

### 取值

`<length>`

滚动容器的块首外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-block-start =
  <length>

```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动


text-decoration-line - CSS：层叠样式表

text-decoration-line
====================

CSS 属性 **`text-decoration-line`** 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时，用 `text-decoration` 简写属性会比分别写多个属性更方便。

```css
/\* Keyword values \*/
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: underline overline; /\* Two decoration lines \*/
text-decoration-line: overline underline line-through; /\* Multiple decoration lines \*/

/\* Global values \*/
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;
```

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

语法
--

### 值

`text-decoration-line` 属性可以设置为 `none`, 或者**一个及多个**用空格分隔的下列值。

`none`

表示没有文本修饰效果。

`underline`

在文本的下方有一条修饰线。

`overline`

在文本的上方有一条修饰线。

`line-through`

有一条贯穿文本中间的修饰线。

`blink
已弃用`

文本闪烁（文本交替处于显示与隐藏状态）。客户代理都一致没有实现文本闪烁效果。考虑到为了支持使用 CSS 动画，该值也**不宜使用**。

### 形式语法
```

text-decoration-line =
  none                                                |
  [ underline || overline || line-through || blink ]

```

示例
--

```html
<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>
```

```css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}
```

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-line-property |

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

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

参见
--

* 当要设置多个线修饰属性时，用 `text-decoration` 简写属性会比分别写多个属性更方便。


-webkit-text-fill-color - CSS：层叠样式表

-webkit-text-fill-color
=======================

CSS 属性 **`-webkit-text-fill-color`** 指定了文本字符的填充颜色。若未设置此属性，则使用 `color` 属性的值。

语法
--

```css
/\* 颜色值 \*/
-webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
-webkit-text-fill-color: rgb(100 200 0);

/\* 全局值 \*/
-webkit-text-fill-color: inherit;
-webkit-text-fill-color: initial;
-webkit-text-fill-color: revert;
-webkit-text-fill-color: revert-layer;
-webkit-text-fill-color: unset;
```

### 取值

`<color>`

元素的文本内容的前景填充颜色。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | computed color |
| Animation type | a color |

形式语法
----
```

-webkit-text-fill-color =
  <color>

```

示例
--

### 改变填充颜色

#### CSS

```css
p {
  margin: 0;
  font-size: 3em;
  -webkit-text-fill-color: green;
}
```

#### HTML

```html
<p>此文本为绿色的。</p>
```

#### 结果

规范
--

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-fill-color |

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

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

参见
--

* 宣布此特性的 Safari 博客文章
* 解释此特性的 CSS-Tricks 文章
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`


CSS 注释 - CSS：层叠样式表

CSS 注释
======

CSS 注释用于为代码添加额外的解释，或者用于阻止浏览器解析特定区域内的 CSS 代码。注释对文档布局没有影响。

语法
--

注释可以写在样式表中任意允许空格的位置。注释可以写成一行，也可以写成多行。
```

/* Comment */
```

示例
--

```css
/\* 这是一行单行注释 \*/

/\*
分为
几行
的
注释
\*/

/\* 下面的注释用于禁用特定的样式 \*/

/\*
span {
 color: blue;
 font-size: 1.5em;
}
\*/
```

说明
--

`/* */` 风格的注释语法可以用作单行注释，也可以用作多行注释。在外部独立的 CSS 文件中，没有其他声明注释的方法。不过，如果 CSS 代码写在 `<style>` 标签中，在某些旧版浏览器中你还可以使用 `<!-- -->` 来注释 CSS 代码，虽然这样做是不推荐的。与其他大部分使用 `/* */` 语法进行注释的编程语言一样，注释无法嵌套。也就是说，`/*` 之后的第一个 `*/` 记号就会结束注释。

规范
--

* CSS 2.1 Syntax and basic data types #comments
参见
--

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


:-moz-window-inactive - CSS：层叠样式表

:-moz-window-inactive
=====================

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

**`:-moz-window-inactive`** CSS 伪类是一个 Mozilla 扩展 (en-US)匹配处于非活动窗口中的任何元素。

`:-moz-window-inactive` 也适用于 HTML 文档中的内容。

**备注：** 在引入这个伪类之前，为背景窗口提供不同的样式是通过在顶层 XUL chrome 窗口上设置属性（`active="true"`）来实现的。这个属性现在已不再使用。

语法
--

```css
:-moz-window-inactive {
  /\* ... \*/
}
```

示例
--

此示例根据窗口是否处于活动状态来改变框背景的外观。

### HTML

```html
<div id="mybox">
  <p>这是一个盒子！</p>
</div>
```

### CSS

```css
#mybox {
  background: linear-gradient(to bottom, yellow, cyan);
  width: 200px;
  height: 200px;
}

#mybox:-moz-window-inactive {
  background: cyan;
}
```

### 结果

此代码的结果如下所示。你也可以打开一个单独的页面查看。

规范
--

不属于任何标准。

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

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

参见
--

* Mozilla CSS 扩展 (en-US)
* 相关的 CSS 选择器：
    + `:active`
* 常规 DOM 的 `Document.activeElement` 属性和影子 DOM 根的 `ShadowRoot.activeElement` (en-US) 属性。


视觉格式化模型 - CSS：层叠样式表

视觉格式化模型
=======

CSS 视觉格式化模型（\*visual formatting model）\*是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。

视觉格式化模型会根据CSS 盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：

* 盒子的尺寸：精确指定、由约束条件指定或没有指定
* 盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）
* 定位方案（positioning scheme）：普通流定位、浮动定位或绝对定位
* 文档树中的其他元素：即当前盒子的子元素或兄弟元素
* 视口尺寸与位置
* 所包含的图片的尺寸
* 其他的某些外部因素

该模型会根据盒子的包含块（*containing block）的*边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（*overflow）*。

**备注：** 译注：本文有很多相近的术语，阅读时需仔细，否则容易造成误解。为了方便读者，这里我将其整理一下。

* **块**：block，一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向上按照顺序依次堆叠。
* **包含块**：containing block，包含其他盒子的块称为包含块。
* **盒子**：box，一个抽象的概念，由 CSS 引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的，有时多个元素会合并生成一个盒子，有时一个元素会生成多个盒子（如匿名盒子）。
* **块级元素**：block-level element，元素的 `display` 为 `block`、`list-item`、`table` 时，该元素将成为块级元素。元素是否是块级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。
* **块级盒子**：block-level box，由块级元素生成。一个块级元素至少会生成一个块级盒子，但也有可能生成多个（例如列表项元素）。
* **块盒子**：block box，如果一个块级盒子同时也是一个块容器盒子（见下），则称其为块盒子。除具名块盒子之外，还有一类块盒子是匿名的，称为匿名块盒子（Anonymous block box），匿名盒子无法被 CSS 选择符选中。
* **块容器盒子**：block container box 或 block containing box，块容器盒子侧重于当前盒子作为“容器”的这一角色，它不参与当前块的布局和定位，它所描述的仅仅是当前盒子与其后代之间的关系。换句话说，块容器盒子主要用于确定其子元素的定位、布局等。

注意：盒子分为“块盒子”和“块级盒子”两种，但元素只有“块级元素”，而没有“块元素”。下面的“行内级元素”也是一样。

* **行内级元素**：inline-level element，`display` 为 `inline`、`inline-block`、`inline-table` 的元素称为行内级元素。与块级元素一样，元素是否是行内级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。
* **行内级盒子**：inline-level box，由行内级元素生成。行内级盒子包括行内盒子和原子行内级盒子两种，区别在于该盒子是否参与行内格式化上下文的创建。
* **行内盒子**：inline box，参与行内格式化上下文创建的行内级盒子称为行内盒子。与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。
* **原子行内级盒子**：atomic inline-level box，不参与行内格式化上下文创建的行内级盒子。原子行内级盒子一开始叫做原子行内盒子（atomic inline box），后被修正。原子行内级盒子的内容不会拆分成多行显示。

另外，本文的英文原文仍未最后定稿，因此部分内容并不完整。待英文原文更新后应及时更新译文。

盒子的生成
-----

盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS `display` 属性。

### 块级元素与块盒子

当元素的 `display` 为 `block`、`list-item` 或 `table` 时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。

每个块级盒子都会参与块格式化上下文（block formatting context）的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（*principal block-level* *box）。有*一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。

主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与定位方案。

一个块级盒子可能也是一个块容器盒子。块容器盒子（*block container box）要么*只包含其他块级盒子，要么只包含行内盒子并同时创建一个行内格式化上下文（inline formatting context）。

能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为，而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。

一个同时是块容器盒子的块级盒子称为块盒子（*block box）。*

#### 匿名块盒子

在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用 CSS 选择符选中，因此称为匿名盒子（*anonymous boxes）*。

CSS 选择器不能作用于匿名盒子 (*anonymous boxes*)，所以它不能被样式表赋予样式。也就是说，此时所有可继承的 CSS 属性值都为 `inherit` ，而所有不可继承的 CSS 属性值都为 `initial`。

块包含盒子可能只包含行内级盒子，也可能只包含块级盒子，但通常的文档都会同时包含两者，在这种情况下，就会在相邻的行内级盒子外创建匿名块盒子。

对这两个匿名盒子来说，程序员无法像 `<p>` 元素那样控制它们的样式，因此它们会从 `<div>` 那里继承那些可继承的属性，如 `color`。其他不可继承的属性则会设置为 `initial`，比如，因为没有为它们指定 `background-color`，因此其具有默认的透明背景，而 `<p>` 元素的盒子则能够用 CSS 指定背景颜色。类似地，两个匿名盒子的文本颜色总是一样的。

另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，包含块盒子的盒子会拆分为两个行内盒子，分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹，块盒子后面的行内盒子也是一样。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。

如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。

### 行内级元素和行内盒子

如果一个元素的 `display` 属性为 `inline`、`inline-block` 或 `inline-table`，则称该元素为行内级元素。显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。

**警告：** 该图使用了过时的术语，见下面的“注意”（译注：指图中的“Atomic inline boxes”）。除此之外该图还有一个错误，右边的黄色部分应该完全包含左侧的椭圆（类似于数学上的超集），因为标准所说的是“如果行内级元素生成的盒子参与行内格式化上下文的创建，则该盒子为一个行内级盒子”，见“CSS 2.2 标准的 9.2.2 节”。

行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（inline formatting context）的创建。行内盒子既是行内级盒子，也是一个其内容会参与创建其容器的行内格式化上下文的盒子，比如所有具有 `display:inline` 样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。而通过替换行内级元素或 `display` 值为 `inline-block` 或 `inline-table` 的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。

**备注：** 开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。

#### 匿名行内盒子

类似于块盒子，CSS 引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 `initial`。一种常见的情况是 CSS 引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于 `white-space` 的设置而被移除，从而导致最终的实际内容为空。

**备注：** 示例 TBD

### 其他类型的盒子

#### 行盒子

行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。

行盒子更多是以技术性目的而存在的，Web 开发者通常不需要关心。

#### Run-in 盒子

Run-in 盒子通过 `display:run-in` 来定义，它可以是块盒子，也可以是行内盒子，这取决于紧随其后的盒子的类型。Run-in 盒子可以用来在可能的情况下将标题嵌入文章的第一个段落中。

**备注：** Run-in 盒子已经在 CSS 2.1 的标准中移除了，但可能会在 CSS 3 中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。

#### 由其他模型引入的盒子

除了行内格式化上下文和块格式化上下文之外，CSS 还定义了几种内容模型，这些模型同样可以应用于元素。这些模型一般用来描述布局，它们可能会定义一些额外的盒子类型：

* 表格内容模型 (en-US)可能会创建一个表格包装器盒子和一个表格盒子，以及多个其他盒子如表格标题盒子等
* 多列内容模型 (en-US)可能会在容器盒子和内容之间创建多个列盒子
* 实验性的网格内容模型或 flex-box 内容模型同样会创建一些其他种类的盒子

#### 定位规则

一旦生成了盒子以后，CSS 引擎就需要定位它们以完成布局。下面是定位盒子时所使用的规则：

* 普通流：按照次序依次定位每个盒子
* 浮动：将盒子从普通流中单独拎出来，将其放到外层盒子的某一边
* 绝对定位：按照绝对位置来定位盒子，其位置根据盒子的包含元素所建立的绝对坐标系来计算，因此绝对定位元素有可能会覆盖其他元素
### 普通流

在普通流中，盒子会依次放置。在块格式化上下文中，盒子在垂直方向依次排列；而在行内格式化上下文中，盒子则水平排列。当 CSS 的 `position` 属性为 `static` 或 `relative`，并且 `float` 为 `none` 时，其布局方式为普通流。

### 示例

**备注：** 在普通流的块格式化上下文中，盒子会垂直依次排列：

[TODO 图片]

在普通流的行内格式化上下文中，盒子会水平依次排列：

[TODO 图片]

**备注：** 普通流又有两种情况：静态定位和相对定位：

`position` 为 `static` 时为静态定位，此时每个盒子根据普通流所计算出的确切位置来定位。

[TODO 图片]

当 `position` 为 `relative` 时为相对定位，此时每个盒子还会根据 `top`、`bottom`、`left` 和 `right` 属性的值在其原本所在的位置上产生指定大小的偏移。

### 浮动

在浮动定位中，浮动盒子会浮动到当前行的开始或尾部位置。这会导致普通流中的文本及其他内容会“流”到浮动盒子的边缘处，除非元素通过 `clear` 清除了前面的浮动。

一个盒子的 `float` 值不为 `none`，并且其 `position` 为 `static` 或 `relative` 时，该盒子为浮动定位。如果将 `float` 设置为 `left`，浮动盒子会定位到当前行盒子的开始位置（左侧），如果设置为 `right`，浮动盒子会定位到当前行盒子的尾部位置（右侧）。不管是左浮动还是右浮动，行盒子都会伸缩以适应浮动盒子的大小。

[TODO 图片]

### 绝对定位

在绝对定位中，盒子会完全从当前流中移除，并且不会再与其有任何联系（译注：此处仅指定位和位置计算，而绝对定位的元素在文档树中仍然与其他元素有父子或兄弟等关系），其位置会使用 `top`、`bottom`、`left` 和 `right` 相对其包含块进行计算。

如果元素的 `position` 为 `absolute` 或 `fixed`，该元素为绝对定位。

对固定位置的元素来说，其包含块为整个视口，该元素相对视口进行绝对定位，因此滚动时元素的位置并不会改变。

参见
--

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


:defined - CSS：层叠样式表

:defined
========

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
**`:defined`** CSS 伪类 表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素 (例如通过 `CustomElementRegistry.define()` 方法)。

```css
/\* 选择所有已定义的元素 \*/
:defined {
  font-style: italic;
}

/\* 选择指定自定义元素的任何实例 \*/
simple-custom:defined {
  display: block;
}
```

语法
--

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

下面的片段摘自我们的 定义伪类 demo (点击查看源码).

在这个 demo 中我们定义了一个非常简单的自定义元素：

```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```

然后在文档中插入一个该元素的副本，以及一个标准的 `<p>` 标签：

```html
<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>
```

在 CSS 中我们首先包含以下规则：

```css
// 为两个元素设置不同的背景色
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

// 将自定义元素和内置元素的字体都设为斜体
:defined {
  font-style: italic;
}
```

然后提供以下两个规则来隐藏未定义的自定义元素的所有实例，并显示被定义为块级元素的实例：

```css
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}
```

这在你有一个复杂的自定义元素需要一段时间才能加载到页面中时非常有用——你可能想要隐藏元素的实例直到定义完成为止，这样你就不会在页面上出现一些难看的元素。

规范
--

| Specification |
| --- |
| HTML Standard # selector-defined |

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

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

参见
--

* Web component


contain-intrinsic-inline-size - CSS：层叠样式表

contain-intrinsic-inline-size
=============================

CSS 逻辑属性 **`contain-intrinsic-inline-size`** 定义了元素受尺寸局限时浏览器用于布局的元素行向尺寸。

行向尺寸为元素在平行于行内文本流的方向上的尺寸。在如标准英文等横向`书写模式`中，行向尺寸为横向尺度（宽度）；在纵向书写模式中，行向尺寸为纵向尺度。

语法
--

```css
/\* 关键词值 \*/
contain-intrinsic-inline-size: none;

/\* <length> 值 \*/
contain-intrinsic-inline-size: 1000px;
contain-intrinsic-inline-size: 10rem;

/\* auto <length> \*/
contain-intrinsic-inline-size: auto 300px;

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

### 取值

元素的固有行向尺寸可指定为下列值：

`none`

元素无固有行向尺寸。

`<length>`

元素具有指定的行向尺寸（`<length>`）。

`auto <length>`

当元素在尺寸局限中且正在跳过其内容（例如元素在屏外且设置了 `content-visibility: auto`）时，行向尺寸为记忆值——即元素在上次渲染其子元素时的实际尺寸。若元素从未渲染其子元素导致无正常渲染时的元素尺寸的记忆值，或者元素未在跳过其内容，行向尺寸为指定的 `<length>`。

描述
--

此属性的应用常常伴随如 `contain: size` 和 `content-visibility` 等可触发尺寸局限的要素。

尺寸局限允许用户代理将元素视为具有固定尺寸进行布局。由此避免为确定实际尺寸而重渲子元素，阻止不必要的重排（进而改善用户体验）。尺寸局限默认将元素视为不包含内容，且可按与内容无宽度或高度相同的方式折叠布局。`contain-intrinsic-inline-size` 允许作者为布局所用的行向尺寸指定合适的值。

`auto <length>` 值允许元素“被正常渲染”（包括其子元素）后存储其行向尺寸，再在元素不包含任何内容时使用此值而非指定值。由此允许有 `content-visibility: auto` 的屏外元素无需开发者精确估计元素尺寸即可受益于尺寸局限。在子元素渲染时，不使用记忆值（若启用尺寸局限，则将使用 `<length>`）。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | elements for which size containment can apply |
| 是否是继承属性 | 否 |
| 计算值 | as specified, with <length>s values computed |
| Animation type | by computed value type |

形式语法
----
```

contain-intrinsic-inline-size =
  auto? [ none | <length> ]

```

示例
--

### 设置固有行向尺寸

下列 HTML 代码定义了将受尺寸限制的元素“contained\_element”，此元素包含一个子元素。

```html
<div id="contained\_element">
  <div class="child\_element"></div>
</div>
```

下列 CSS 代码将 `contained_element` 的 `content-visibility` 设置为 `auto`，故若元素被隐藏则将受尺寸限制。此元素受尺寸限制时所用的固有块向和行向尺寸分别使用 `contain-intrinsic-block-size` 和 `contain-intrinsic-inline-size` 同时设置。

```css
#contained\_element {
  border: 2px solid green;
  inline-size: 151px;
  content-visibility: auto;
  contain-intrinsic-inline-size: 152px;
  contain-intrinsic-block-size: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  block-size: 50px;
  inline-size: 150px;
}
```

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-inline-size |

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

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

参见
--

* content-visibility：提高渲染性能的新 CSS 属性（web.dev）
* `contain-intrinsic-block-size`
* `contain-intrinsic-size`
* `contain-intrinsic-width`
* `contain-intrinsic-height`


animation-duration - CSS：层叠样式表

animation-duration
==================

**`animation-duration`** CSS 属性设置动画完成一个动画周期所需的时间。

尝试一下
----

使用动画的简写属性 `animation` 可以一次性设置所有动画属性，这通常非常方便。

语法
--

```css
/\* 单个动画 \*/
animation-duration: 6s;
animation-duration: 120ms;

/\* 多个动画 \*/
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

/\* 全局值 \*/
animation-duration: inherit;
animation-duration: initial;
animation-duration: revert;
animation-duration: revert-layer;
animation-duration: unset;
```

### 值

``<time>``

动画完成一个周期所需的时间。可以用秒（`s`）或毫秒（`ms`）指定。值必须是正数或零，单位是必需的。

如果未提供值，则使用默认值 `0s`，此时动画仍会执行（会触发 `animationStart` 和 `animationEnd` 事件）。如果 `animation-duration` 为 `0s` 时，动画是否可见取决于 `animation-fill-mode` 的值，如下所述：

* 如果 `animation-fill-mode` 设置为 `backwards` 或者 `both`，则在 `animation-delay` 倒计时期间将显示由 `animation-direction` 定义的动画的第一帧。
* 如果 `animation-fill-mode` 设置为 `forwards` 或者 `both`，在 `animation-delay` 结束后，将显示由 `animation-direction` 定义的动画的最后一帧。
* 如果 `animation-fill-mode` 设置为 `none`，动画将不会有任何的视觉效果。

**备注：** 负值是无效的，会导致声明被忽略。一些早期的、有前缀的实现可能将其视为与 `0s` 相同。

**备注：** 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 `animation-name` 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见设置多个动画属性值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0s` |
| 适用元素 | all elements, `::before` and `::after` pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Not animatable |

形式语法
----
```

animation-duration =
  <time [0s,∞]>#

```

示例
--

### 设置动画持续时间

此动画有 0.7 秒的动画持续时间。

#### HTML

```html
<div class="box"></div>
```

#### CSS

```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```

将鼠标悬停在矩形上来播放动画。

参见 CSS 动画以获取示例。

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-duration |

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

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

参见
--

* 使用 CSS 动画 (en-US)
* JavaScript `AnimationEvent` (en-US) API
* 其他相关的动画属性：`animation`、`animation-composition` (en-US)、`animation-delay`、`animation-direction`、`animation-fill-mode`、`animation-iteration-count`、`animation-name`、`animation-play-state`、`animation-timeline` (en-US)、`animation-timing-function`


paint-order - CSS：层叠样式表

paint-order
===========

CSS **`paint-order`** 属性可以让你控制文本区域和图形绘制的填充和绘制（和 markers）的顺序

语法
--

```css
/\*默认 \*/
paint-order: normal;

/\* 单一属性 \*/
paint-order: stroke; /\* 先描边，然后填充，markers\*/
paint-order: markers; /\* 先绘制 markers, 然后填充，描边 \*/

/\* 多属性 \*/
paint-order: stroke fill; /\* 先描边，然后填充，然后 markers \*/
paint-order: markers stroke fill; /\* 先 markers, 然后 stroke, 然后 fill \*/
```

如果没有指定值，默认顺序将是 `fill`, `stroke`, `markers`.

当只指定一个值的时候，这个值将会被首先渲染，然后剩下的两个值将会以默认顺序渲染，当只指定两个值的时候，这两个值会以指定的顺序渲染，接着渲染剩下的未指定的那个。

**备注：** 在这个属性的值当中，markers 只有当在绘制 SVG 图形时引用了 `marker-*`属性（例如 `marker-start`）和 `<marker>` 元素才能进行控制。他们不适用于 HTML 文本，所以，这样的话，你只能决定 `stroke` 和 `fill` 的顺序。

### 属性值

`normal`

用正常的顺序渲染不同的元素

`stroke`,
 `fill`,

`markers`

指定一部分或者全部这些属性的渲染顺序

### 形式语法
```

paint-order =
  normal                         |
  [ fill || stroke || markers ]

```

示例
--

### HTML

```html
<p>Stroke in front</p>

<p class="stroke-behind">Stroke behind</p>
```

### CSS

```css
p {
  font-family: sans-serif;
  font-size: 5rem;
  font-weight: bold;
  margin: 0;
  -webkit-text-stroke: 5px red;
}

.stroke-behind {
  paint-order: stroke fill;
}
```

### 结果

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PaintOrder |

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

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

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


:only-child - CSS：层叠样式表

:only-child
===========

**`:only-child`** CSS 伪类表示没有任何兄弟元素的元素。这与 `:first-child:last-child` 或 `:nth-child(1):nth-last-child(1)` 相同，但前者具有更小的权重性。

尝试一下
----

**备注：** 按照最初的定义，被选择的元素必须拥有一个父级元素。从选择器 Level 4 开始，这不再是必须的了。

语法
--

```css
:only-child {
  /\* ... \*/
}
```

示例
--

### 基础示例

#### HTML

```html
<div>
  <div>我是唯一子元素。</div>
</div>

<div>
  <div>我是第一个兄弟元素。</div>
  <div>我是第二个兄弟元素。</div>
  <div>
    我是第三个兄弟元素。
    <div>但这又是唯一的子元素。</div>
  </div>
</div>
```

#### CSS

```css
div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}
```

#### 结果

### 一个列表示例

#### HTML

```html
<ol>
  <li>
    第一
    <ul>
      <li>该列表仅有一个元素。</li>
    </ul>
  </li>
  <li>
    第二
    <ul>
      <li>该列表有三个元素。</li>
      <li>该列表有三个元素。</li>
      <li>该列表有三个元素。</li>
    </ul>
  </li>
</ol>
```

#### CSS

```css
li li {
  list-style-type: disc;
}

li:only-child {
  color: red;
  list-style-type: square;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # only-child-pseudo |

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

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

参见
--

* `:only-of-type`
* `:first-child`
* `:last-child`
* `:nth-child`


min-content - CSS：层叠样式表

min-content
===========

`min-content` 是一个 CSS 的尺寸关键字，表示的是内容的最小宽度。对于文本内容而言，这意味着内容会利用所有软换行的机会，变得尽可能的小，大小不会超过最长单词的宽度。

语法
--

```css
/\* 作为长度使用 \*/
width: min-content;
inline-size: min-content;
height: min-content;
block-size: min-content;

/\* 在 grid track 中使用 \*/
grid-template-columns: 200px 1fr min-content;

/\* 全局值 \*/
min-content: inherit;
min-content: initial;
min-content: revert;
min-content: revert-layer;
min-content: unset;
```

示例
--

### 使用 min-content 调整盒子的大小

#### HTML

```html
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
```

#### CSS

```css
.item {
  width: min-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```

### 结果

### 通过 min-content 调整网格列的大小

#### HTML

```html
<div id="container">
  Item
  <div>Item with more text in it.</div>
  Flexible item
</div>
```

#### CSS

```css
#container {
  display: grid;
  grid-template-columns: min-content min-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # valdef-width-min-content |

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

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


overflow-anchor - CSS：层叠样式表

overflow-anchor
===============

**`overflow-anchor`** CSS 属性提供一种退出浏览器滚动锚定行为的方法，该行为会调整滚动位置以最大程度地减少内容偏移。

默认情况下，在任何支持滚动锚定行为的浏览器中都将其启用。因此，仅当你在文档或文档的一部分中遇到滚动锚定问题并且需要关闭行为时，才通常需要更改此属性的值。

语法
--

```css
/\* Keyword values \*/
overflow-anchor: auto;
overflow-anchor: none;

/\* Global values \*/
overflow-anchor: inherit;
overflow-anchor: initial;
overflow-anchor: unset;
```

### Values

`auto`

The element becomes a potential anchor when adjusting scroll position.

`none`

The element won't be selected as a potential anchor.

### Formal syntax
```

overflow-anchor =
  auto  |
  none

```

范例
--

To prevent scroll anchoring in a document, use the `overflow-anchor` property.

```css
body {
  overflow-anchor: none;
}
```

规范
--

| Specification |
| --- |
| CSS Scroll Anchoring Module Level 1 # exclusion-api |

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

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

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

See also
--------

* Guide to scroll anchoring (en-US)


:any-link - CSS：层叠样式表

:any-link
=========

**`:any-link`** CSS 伪类选择器表示作为超链接源锚点的元素，无论是否已被访问。换言之，它匹配每个具有 `href` 属性的 `<a>` 或 `<area>` 元素。因此，它匹配所有匹配 `:link` 或 `:visited` 的元素。

尝试一下
----

语法
--

```css
:any-link {
  /\* ... \*/
}
```

示例
--

### HTML

```html
<a href="https://example.com">外部链接</a><br />
<a href="#">内部目标链接</a><br />
<a>占位符链接（不会有样式）</a>
```

### CSS

```css
a:any-link {
  border: 1px solid blue;
  color: orange;
}

/\* WebKit 浏览器 \*/
a:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-any-link-pseudo |

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

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

参见
--

* 创建超链接
* 匹配 HTML 元素：具有 `href` 属性的 `<a>` 和 `<area>`
* 相关的 CSS 选择器：
    + `:visited`
    + `:link`


opacity - CSS：层叠样式表

opacity
=======

概述
--

opacity 属性指定了一个元素的**不透明度**。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。

当 opacity 属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值。

使用 opacity 属性，当属性值不为 1 时，会把元素放置在一个新的层叠上下文中。

|  |  |
| --- | --- |
| 初始值 | `1` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| Percentages | map to the range `[0,1]` |
| 计算值 | The same as the specified value after clipping the `number` to the range [0.0, 1.0]. |
| Animation type | by computed value type |

语法
--

```css
/\* 完全不透明 \*/
opacity: 1;
opacity: 1;

/\* 半透明 \*/
opacity: 0.6;

/\* 完全透明 \*/
opacity: 0;
opacity: 0;

opacity: inherit;
```

### 属性值

`<number>`

`<number>` 是一个 0.0 到 1.0 范围内的数字值，这个数值既包含也代表通道的透明度，也就是 alpha 通道的值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值。

| 值 | 释义 |
| --- | --- |
| `0` | 元素完全透明 (即元素不可见). |
| 任何一个位于 0.0-1.0 之间的 `<number>` | 元素半透明 (即元素后面的背景可见). |
| `1` | 元素完全不透明 (即元素后面的背景不可见). |

### 形式语法
```

opacity =
  <alpha-value>

<alpha-value> =
  <number>      |
  <percentage>

```

示例
--

### 基本示例

```css
div {
  background-color: yellow;
}
.light {
  opacity: 0.2; /\* Barely see the text over the background \*/
}
.medium {
  opacity: 0.5; /\* See the text more clearly over the background \*/
}
.heavy {
  opacity: 0.9; /\* See the text very clearly over the background \*/
}
```

```html
<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>
```

### :hover 时 opacity 的不同

```css
img.opacity {
  opacity: 1;
  filter: alpha(opacity=100); /\* IE8 and lower \*/
  zoom: 1; /\* Triggers "hasLayout" in IE 7 and lower \*/
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}
```

```html
<img
 src="//developer.mozilla.org/media/img/mdn-logo.png"
 alt="MDN logo"
 width="128"
 height="146"
 class="opacity" />
```

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

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

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

参见
--

* MSDN Microsoft's filter:alpha(opacity=xx)


box-orient - CSS：层叠样式表

box-orient
==========

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

这是原始的 css 弹性布局草案的一个属性，已经被最新的标准替代。查看 flexbox (en-US) 了解现行标准。

**`box-orient`** CSS 属性用来设置一个元素是水平还是垂直布局其内容。

```css
/\* Keyword values \*/
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;

/\* Global values \*/
box-orient: inherit;
box-orient: initial;
box-orient: unset;
```

语法
--

`box-orient` 属性值需指定为以下关键字之一。

### 值

`horizontal`

盒子水平布局其内容。

`vertical`

盒子垂直布局其内容。

`inline-axis` (HTML)

盒子沿内联轴展示其子元素。

`block-axis` (HTML)

盒子沿块轴展示其子元素。

内联轴和块轴取决于写入模式的关键字，在英语中，分别对应水平和垂直方向。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `inline-axis` (`horizontal` in XUL) |
| 适用元素 | elements with a CSS `display` value of `box` or `inline-box` |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----

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

### 设置盒子水平布局

在这里，box-orient 属性会将两个 `<p>` 段落布局到同一行。

#### HTML

```html
<div class="example">
  <p>I will be to the left of my sibling.</p>
  <p>I will be to the right of my sibling.</p>
</div>
```

#### CSS

```css
div.example {
  display: -moz-box; /\* Mozilla \*/
  display: -webkit-box; /\* WebKit \*/
  display: box; /\* As specified \*/

  /\* Children should be oriented vertically \*/
  -moz-box-orient: horizontal; /\* Mozilla \*/
  -webkit-box-orient: horizontal; /\* WebKit \*/
  box-orient: horizontal; /\* As specified \*/
}
```

#### 结果

规范
--

不是任何标准的一部分。

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

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

参见
--

* `box-direction` (en-US)
* `box-pack` (en-US)
* `box-align` (en-US)
* `flex-direction`


animation - CSS：层叠样式表

animation
=========

CSS **animation** 属性是 `animation-name`，`animation-duration`, `animation-timing-function`，`animation-delay`，`animation-iteration-count`，`animation-direction`，`animation-fill-mode` 和 `animation-play-state` 属性的一个简写属性形式。

尝试一下
----

语法
--

```css
/\* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name \*/
animation: 3s ease-in 1s 2 reverse both paused slidein;

/\* @keyframes duration | easing-function | delay | name \*/
animation: 3s linear 1s slidein;

/\* two animations \*/
animation:
  3s linear slidein,
  3s ease-out 5s slideout;
```

`animation` 属性用来指定一组或多组动画，每组之间用逗号相隔。

每组动画规定的属性如下：

* 以下属性出现 0 次或 1 次：
    + `<single-transition-timing-function>` (en-US)
    + `<single-animation-iteration-count>`
    + `<single-animation-direction>`
    + `<single-animation-fill-mode>`
    + `<single-animation-play-state>`
* animation 的 name 值可能是：none，`<custom-ident>`， `<string>`
* `<time>` 可能会出现 0、1 或 2 次

每个动画定义中的属性值的顺序很重要：可以被解析为 `<time>` 的第一个值被分配给`animation-duration`，第二个分配给 `animation-delay`。

每个动画定义中的值的顺序，对于区分 `animation-name` 值与其他关键字也很重要。解析时，对于除 `animation-name` 之外的有效的关键字，必须被前面的简写中没有找到值的属性所接受。此外，在序列化时，`animation-name` 与以及其他属性值做区分等情况下，必须输出其他属性的默认值。

### Values

`<single-animation-iteration-count>`

动画播放的次数。该值必须是`animation-iteration-count`可用的值之一。

`<single-animation-direction>`

动画播放的方向。该值必须是`animation-direction`可用的值之一。

`<single-animation-fill-mode>`

确定动画在执行之前和之后这两个阶段应用的样式。该值必须是`animation-fill-mode`可用的值之一。

`<single-animation-play-state>`

确定动画是否正在播放。该值必须是`animation-play-state`中可用的值之一。

### 语法
```

animation =
  <single-animation>#

<single-animation> =
  <time [0s,∞]>                       ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]

<easing-function> =
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>

<single-animation-iteration-count> =
  infinite        |
  <number [0,∞]>

<single-animation-direction> =
  normal             |
  reverse            |
  alternate          |
  alternate-reverse

<single-animation-fill-mode> =
  none       |
  forwards   |
  backwards  |
  both

<single-animation-play-state> =
  running  |
  paused

<keyframes-name> =
  <custom-ident>  |
  <string>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )

<linear-stop-list> =
  [ <linear-stop> ]#

<step-position> =
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

<linear-stop> =
  <number>               &&
  <linear-stop-length>?

<linear-stop-length> =
  <percentage>{1,2}

```

示例
--

### 赛隆人之眼

```html
<div class="view\_port">
  <div class="polling\_message">Listening for dispatches</div>
  <div class="cylon\_eye"></div>
</div>
```

```css
.polling\_message {
  color: white;
  float: left;
  margin-right: 2%;
}

.view\_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon\_eye {
  background-color: red;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.9) 25%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.9) 75%
  );
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
  animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move\_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}
@keyframes move\_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}
```

更多示例请参阅使用 CSS 动画。

潜在的问题
-----

眨眼和闪烁的动画对于有认知问题的人来说是有问题的，比如注意力缺陷多动障碍 (ADHD)。此外，某些动画效果可以触发前庭神经紊乱、癫痫、偏头痛和暗点敏感性。

考虑提供一种暂停或禁用动画的机制，以及使用 Reduced Motion Media Query（简约运动媒体查询），为那些表示不喜欢动画的用户创建一个良好的体验。

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN Understanding WCAG, Guideline 2.2 explanations (en-US)
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation |

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

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

参见
--

* Using CSS animations (en-US)
* JavaScript `AnimationEvent` (en-US) API


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

inset-block-start
=================

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

尝试一下
----

语法
--

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

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

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

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

### 取值

`inset-block-start` 属性的取值与 `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-start =
  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-lr;
  position: relative;
  inset-block-start: 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-end`、`inset-inline-start` 和 `inset-inline-end`
* 对应的实体属性：`top`、`right`、`bottom` 和 `left`
* `writing-mode`、`direction`、`text-orientation`


:visited - CSS：层叠样式表

:visited
========

**`:visited`** CSS 伪类会在用户访问链接后生效，出于隐私保护的原因，使用该选择器可以修改的样式非常有限。`:visited` 伪类仅适用于带有 `href` 属性的 `<a>` 和 `<area>` 元素。

尝试一下
----

由 `:visited` 和未访问的 `:link` 伪类定义的样式可以被任何后续的用户动作伪类（`:hover` 或 `:active`）覆盖，只要它们的特殊性至少相等。为了适当地样式化链接，将 `:visited` 规则放置在 `:link` 规则之后但在 `:hover` 和 `:active` 规则之前，按照 *LVHA 顺序定义*：`link` — `:visited` — `:hover` — `:active`。`:visited` 伪类和 `:link` 伪类是互斥的。

隐私限制
----

出于隐私原因，浏览器严格限制你可以让此伪类应用的样式，以及使用它们的方式：

* 允许使用的 CSS 属性有 `color`、`background-color`、`border-color`、`border-bottom-color`、`border-left-color`、`border-right-color`、`border-top-color`、`column-rule-color`、`outline-color`、`text-decoration-color` 和 `text-emphasis-color` (en-US)。
* 允许使用的 SVG 属性有 `fill` 和 `stroke`。
* 允许使用的样式的 alpha 分量（透明度）将被忽略。设置在 `:visited` 中的样式将使用元素的非 `:visited` 访问状态的 alpha 分量。在 Firefox 中，当 alpha 分量为 `0` 时，`:visited` 中设置的样式将被完全忽略。
* 虽然这些样式可以改变用户最终的颜色外观，但 `window.getComputedStyle` 方法将存在并且始终返回非访问颜色的值。
* `<link>` 元素永远不会被 `:visited` 匹配。

**备注：** 有关这些限制及其背后原因的更多信息，请参阅隐私和 :visited 选择器。

语法
--

```css
:visited {
  /\* ... \*/
}
```

示例
--

未设置颜色或透明的属性不能使用 `:visited`。在可以使用此伪类设置的属性中，浏览器可能只有 `color` 和 `column-rule-color` 两个默认值。因此，对于其他属性，在使用 `:visited` 选择器前，应该先为这些属性设置基础样式。

### HTML

```html
<a href="#test-visited-link">你是否访问过此链接？</a>
<a href="">你已经访问过此链接。</a>
```

### CSS

```css
a {
  /\* 为某些属性指定非透明的默认值，使它们可以与 :visited 状态一起使用样式。 \*/
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

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

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

参见
--

* 隐私和 :visited 选择器
* 链接相关伪类：`:link`、`:active` 和 `:hover`


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

:not()
======

**`:not()`** CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为*反选伪类*（*negation pseudo-class*）。

尝试一下
----

`:not()` 伪类有许多怪异、技巧和意料之外的结果，你在使用它之前应该意识到这些。

语法
--

`:not()` 伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择器或伪元素。

```css
:not(<complex-selector-list>) {
  /\* ... \*/
}
```

描述
--

使用 `:not()` 时，有几种不寻常的效果和结果需要注意：

* 可以使用此伪类编写无用的选择器。例如，`:not(*)` 匹配任何不是元素的元素，这显然是荒谬的，所以这个附加的规则将永远不被应用。
* 可以利用这个伪类提高规则的优先级。例如，`#foo:not(#bar)` 和 `#foo` 都将匹配相同的元素，但是具有两个 `id` 的选择器具有更高的优先级。
* `:not()` 伪类的优先级将由其逗号分割的参数中优先级最高的选择器指定；提供与 `:not(:is(argument))` 相同的优先级。
* `:not(.foo)` 将匹配任何非 `.foo` 的元素，*包括 `<html>` 和 `<body>`*。
* 这个选择器将匹配任意“不是一个 X”的元素。当与后代选择器一起使用，这可能令人惊讶，因为有多种路径可以选择一个目标元素。例如，`body :not(table) a` 仍将应用 `<table>` 中的链接，因为 `<tr>`、`<tbody>`、`<th>`、`<td>` (en-US)、`<caption>` 等都可以匹配选择器 `:not(table)` 部分。
* 你可以同时否定多个选择器。例如：`:not(.foo, .bar)` 等同于 `:not(.foo):not(.bar)`。
* 如果传递给 `:not()` 伪类的选择器无效或者浏览器不支持，则整个规则都将是无效的。克服这种行为的有效方式是使用：`:is` 伪类，它接受一个可容错选择器列表。例如 `:not(.foo, :invalid-pseudo-class)` 将使整个规则无效，但是 `:not(:is(.foo, :invalid-pseudo-class))` 将匹配任何（*包括 `<html>` 和 `<body>`*）不是 `.foo` 的元素。
示例
--

### 设置 :not() 基础示例

#### HTML

```html
<p>我是一个段落。</p>
<p class="fancy">我非常非常喜欢！</p>
<div>我不是一个段落。</div>
<h2>
  <span class="foo">foo 在 h2 里面</span>
  <span class="bar">bar 在 h2 里面</span>
</h2>
```

#### CSS

```css
.fancy {
  text-shadow: 2px 2px 3px gold;
}

/\* 类名不是 `.fancy` 的 <p> 元素\*/
p:not(.fancy) {
  color: green;
}

/\* 非 <p> 元素 \*/
body :not(p) {
  text-decoration: underline;
}

/\* 既不是 <div> 也不是 <span> 的元素 \*/
body :not(div):not(span) {
  font-weight: bold;
}

/\* 不是 <div> 或 `.fancy` 的元素\*/
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/\* <h2> 元素中不是有 `.foo` 类名的 <span> 元素 \*/
h2 :not(span.foo) {
  color: red;
}
```

### 结果

### 在 :not 中使用无效选择器

该示例演示了如何在 `:not()` 中使用无效选择器以及如何避免使整个规则无效。

#### HTML

```html
<p class="foo">我是一个带有 .foo 的段落。</p>
<p class="bar">我是一个带有 .bar 的段落。</p>
<div>我是一个没有类的 div 元素。</div>
<div class="foo">我是一个带有 .foo 类的 div 元素。</div>
<div class="bar">我是一个带有 .bar 类的 div 元素。</div>
<div class="foo bar">我是一个带有 .foo 和 .bar 类的 div 元素。</div>
```

#### CSS

```css
/\* 无效的规则，不会产生任何效果 \*/
p:not(.foo, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

/\* 选择所有的没有 .foo 类的 <p> 元素 \*/
p:not(:is(.foo, :invalid-pseudo-class)) {
  color: green;
  border-top: dotted thin currentcolor;
}

/\* 选择所有没有 .foo 类或者 .bar 类的 <div> 元素 \*/
div:not(.foo, .bar) {
  color: red;
  font-style: italic;
}

/\* 选择所有没有 .foo 或 .bar 类的 <div> 元素。 \*/
div:not(:is(.foo, .bar)) {
  border-bottom: dotted thin currentcolor;
}
```

#### 结果

`p:not(.foo, :invalid-pseudo-class)` 规则是无效的，因为它包含了一个无效选择器。`:is()` 伪类接受容错的选择器列表，因此 `:is(.foo, :invalid-pseudo-class)` 规则是有效的并等同于 `:is(.foo)`。因此，`p:not(:is(.foo, :invalid-pseudo-class))` 规则是有效的，并等同于 `p:not(.foo)`。

如果 `:invalid-pseudo-class` 是一个有效的选择器，则前两个规则仍然是等效的（最后两个规则展示了这一点）。使用 `:is()` 使规则更加健壮。

规范
--

| Specification |
| --- |
| Selectors Level 4 # negation |

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

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

参见
--

* 伪类
* 伪类和伪元素
* 其他功能性 CSS 伪类包括：
    + `:has()`
    + `:is()`
    + `:where()`


min() - CSS：层叠样式表

min()
=====

**`min()`** CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。`min()` 方法可以用于以下任何属性中 `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`,`<number>`, 或者 `<integer>`。

```css
/\* property: min(expression [, expression]) \*/
width: min(1vw, 4em, 80px);
```

在上面的例子中，宽度最多是 80px。如果视口的宽度小于 800px，或者一个 em 的宽度小于 20px，则会更窄。换句话说，最大宽度是 80px，

语法
--

`min()` 方法拥有一个或多个逗号分隔符表达式作为参数，表达式的值中最小的值作为参数值。表达式可以是数学函数 (查看 `calc()` 了解更多), 字面量，或者其他表达式，比如 `attr()`, 可以求得有效值的的类型 (比如 `<length>`)。如果你愿意，你甚至可以在表达式中给每个值一个不同的单位。并且在需要的地方只用圆括号改变计算优先级。

### 注意

* Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables *may* be treated as if `auto` had been specified.`max`
* It is permitted to nest `max()` and other `min()` functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
* The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( \* ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any `<length>` syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
* Oftentimes you will want to comine `min()` and `max()` values, or use `min()` within a `clamp()` or `calc()` function.
* You can provide more than two arguments, if you have multiple constraints to apply.
### 形式语法
```

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

```

示例
--

### Growing images to a maximum size

`min()` 让我们在设置图像的最大宽度时更简单。在下面这个例子中，在小型设备上宽度拉伸为 window 的一半，但在大型设备上，不超过 300px，不使用媒体查询：

```css
.logo {
  width: min(50vw, 300px);
}
```

```html
<img
 src="https://developer.mozilla.org/static/img/web-docs-sprite.svg"
 alt="MDN Web Docs"
 class="logo" />
```

在这个例子中，除非视口比 600px 更窄，否则 logo 的宽会被设置为 300px，到时候，它会随着视口的缩小而缩小，而且总是视口宽度的 50%。

### 给 label 和 input 设置最大值

CSS 方法的另一个用途时设置响应式组件（form）的最大尺寸：让 label 和 input 的宽度随着组件的缩小而缩小。

看下面的样式：

```css
input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}
```

这里，form 的 margin，border，padding 总是它父元素的宽度的 100%。我们声明 input 和 label 的宽度比 form 的 40% 还小或者 400px 宽，只要取决于哪一个最小。换句话说，input 和 label 的最大宽度就是 400px，最窄就是 form 的 40%。因此看起来会显得很小。

```html
<form>
  <label>Type something:</label>
  <input type="text" />
</form>
```

Think of the `min()` function as finding the maximum value allowed for a property.

无障碍问题
-----

当`min()` 用于控制文本大小时，要保证文本足够大以便于阅读。建议把 min() 方法嵌入到 `max()` 中， relative length unit 这样就可以便于阅读，比如：

```css
small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}
```

这用于保证最小值是 1rem，这样在页面缩放时文本也会缩放。

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

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

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

See also
--------

* `calc()`
* `clamp()`
* `max()`
* CSS Values


<number> - CSS：层叠样式表

<number>
========

语法
--

`<number>` CSS 数据类型代表一个数字，可为整数或小数。它的语法扩展了 `<integer>` 的数据值。要表示一个小数则加上小数部分——“."后跟一或多为十进制数字——到任何 `<integer>` 数据值。像 `<integer>` 数据类型一样，<number> 没有任何单位，并不是一个 CSS 尺寸。

插值
--

`<number>` CSS 数据类型的值可以被插值，用于动画。这种情况下，它们的插值是浮点实数。插值的速度取决于动画的 timing function (en-US)。

示例
--

合法值示例：
```

12          A raw <integer> is also a <number>
4.01        正非整 <数字>
-456.8      负非整 <数字>
0.0         零
+0.0        带正号的零
-0.0        带负号的零 (尽管奇怪，但合法)
.60         点前的数字可以省略
10e3        科学计数法
-3.4e-2     科学计数法最复杂的情况
```

非法值示例：
```

12.         点后需有数字
+-12.2      只能有一个符号
12.1.1      只能有一个点
```

规范
--

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

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

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

参见
--

* CSS Reference index


:required - CSS：层叠样式表

:required
=========

**`:required`** CSS 伪类表示任何设置了 `required` 属性的 `<input>`、`<select>` 或 `<textarea>` 元素。

尝试一下
----

这个伪类很有用，可以突出显示在提交表单之前必须具有有效数据的字段。

**备注：** `:optional` 伪类选择*可选*表单字段。

语法
--

```css
:required {
  /\* ... \*/
}
```

示例
--

### 必填字段具有红色边框

#### HTML

```html
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```

#### CSS

```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```

#### 结果

无障碍考虑
-----

必填的 `<input>` 应该应用 required 属性。这将确保使用辅助技术（例如屏幕阅读器）导航的人能够了解哪些输入需要有效内容以确保成功提交。

如果表单还包含可选输入，则不应仅仅依赖于颜色这一种传达意义的方式在视觉上指示必填输入。通常还应使用描述性文本和/或图标。

* MDN 理解 WCAG，指南 3.3 解释 (en-US)
* 了解成功标准 3.3.2 | W3C 理解 WCAG 2.0
规范
--

| Specification |
| --- |
| HTML Standard # selector-required |
| Selectors Level 4 # opt-pseudos |

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

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

参见
--

* 其他与验证相关的伪类：`:optional`、`:invalid` 和 `:valid`
* 表单数据校验


max() - CSS：层叠样式表

max()
=====

**`max()`** 这个 CSS 函数让你可以从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值 . `max()` 可以用于以下场合 `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, 或 `<integer>` 。

```css
/\* property: max(expression [, expression]) \*/
width: max(10vw, 4em, 80px);
```

在上面这个例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽。简单来说，最小宽度是 80px。你也可以认为 max() 的值提供了一个属性最小可能的值。

语法
--

`max()` 方法接受一个或多个用逗号分隔的表达式作为他的参数，数值最大的表达式的值将会作为指定的属性的值。

表达式可以是数学运算 (可在 `calc()` 了解更多信息), 直接数值，或者是其他表达式，例如 attr()，这将会计算成一个合法的参数类型（例如 `<length>`），也可以是嵌套的 `min()` 和 `max()` 函数。

你可以使用你的表达式中分别使用不同的单位。需要时，你也可以使用小括号来设定运算顺序。

### 备注

* Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables *may* be treated as if `auto` had been specified.
* It is permitted to nest `min()` and other `max()` functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
* The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( \* ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value.
* Oftentimes you will want to combine `min()` and `max()` values, or use `max()` within a `clamp()` or `calc()` function.
### 形式语法
```

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

```

示例
--

### 为字体设定一个最小字号

Another use case for CSS functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility.

Let's look at some CSS:

```css
h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}
```

The font-size will at minimum be 2rems, or twice the default size of font for the page. This ensure it is legible and ensures accessibility

```html
<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">
  This text is always legible, and is responsive, to a point
</h1>
```

Think of the `max()` function as finding the minimum value allowed for a property.

无障碍
---

When `max()` is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the `min()` function nested within a `max()` that has as its second value a relative length unit that is always large enough to read. For example:

```css
small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}
```

This ensures a minimum size of *1rem*, with a text size that scales if the page is zoomed.

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

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

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

参见
--

* `calc()`
* `clamp()`
* `min()`
* CSS Values


border-top-color - CSS：层叠样式表

border-top-color
================

**`border-top-color`** 属性用以设置某元素顶部 `border`的颜色。通常，用`border-color` 或 `border-top` 设置该颜色更为便捷可取。

尝试一下
----

语法
--

```css
/\* <color> values \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentColor;
border-top-color: transparent;

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

`border-top-color` 属性的值为单值。

### 值

`<color>`

上边框的颜色。

### 形式语法
```

border-top-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

示例
--

### 一个简单的带边框容器

#### HTML

```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### 结果

规范
--

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

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | computed color |
| Animation type | a color |

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

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

参见
--

* The border-related CSS shorthand properties: `border`, `border-top`, and `border-color`.
* The color-related CSS properties for the other borders: `border-right-color`, `border-bottom-color`, and `border-left-color`.
* The other border-related CSS properties applying to the same border: `border-top-style` and `border-top-width`.


scroll-padding - CSS：层叠样式表

scroll-padding
==============

简写属性 **`scroll-padding`** 同时设置元素的所有滚动内边距，其赋值方式较为类似 `padding` 属性为元素内边距赋值的方式。

尝试一下
----

`scroll-padding-*` 属性定义了滚动口的*最优视区*——用于在用户视野中放置内容的目标区域——的内边距。作者由此得以排除滚动口被其他内容（如固定定位的工具栏或侧边栏）所遮挡的区域，或在目标元素与滚动口的边之间留出更多余地。

属性构成
----

此属性为下列 CSS 属性的简写属性：

* `scroll-padding-bottom`
* `scroll-padding-left`
* `scroll-padding-right`
* `scroll-padding-top`
语法
--

```css
/\* 关键字值 \*/
scroll-padding: auto;

/\* <length> 值 \*/
scroll-padding: 10px;
scroll-padding: 1em 0.5em 1em 1em;
scroll-padding: 10%;

/\* 全局值 \*/
scroll-padding: inherit;
scroll-padding: initial;
scroll-padding: revert;
scroll-padding: revert-layer;
scroll-padding: unset;
```

### 取值

`<length-percentage>`

滚动口对应边的内边距，为有效的长度（`<length>`）或百分比（`<percentage>`）。

`auto`

此内边距由用户代理所决定。此值通常为 `0px`，但用户代理可检测非零值是否更合理并另行处理。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `scroll-padding-bottom`: `auto`
* `scroll-padding-left`: `auto`
* `scroll-padding-right`: `auto`
* `scroll-padding-top`: `auto`
 |
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | as each of the properties of the shorthand:* `scroll-padding-bottom`: as specified
* `scroll-padding-left`: as specified
* `scroll-padding-right`: as specified
* `scroll-padding-top`: as specified
 |
| Animation type | by computed value type |

形式语法
----
```

scroll-padding =
  [ auto | <length-percentage [0,∞]> ]{1,4}

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

```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-padding |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动