recursal/MDN huggingface dataset:
布局模式
====

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

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

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

参见
--

* CSS 重要概念：
    + 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()
=====

**`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)
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
=========================

**`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`** 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时，用 `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`** 指定了文本字符的填充颜色。若未设置此属性，则使用 `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 代码。注释对文档布局没有影响。

语法
--

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

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

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

**`:-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) 属性。
: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: 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
==================

**`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`** 属性可以让你控制文本区域和图形绘制的填充和绘制（和 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
===========

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

`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.