recursal/MDN huggingface dataset:
inset-block-end
===============

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

尝试一下
----

语法
--


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

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

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

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

### 取值

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

形式定义
----

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

形式语法
----
```

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

示例
--

### 设置块末偏移

#### HTML


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


#### CSS


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

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


#### 结果

规范
--

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

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

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

参见
--

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

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

语法
--

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

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

### 单位

**`s`**

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

**`ms`**

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


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

示例
--

### 有效时间
```

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

### 无效时间
```

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

规范
--

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

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

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

尝试一下
----

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

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

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

语法
--


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

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


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

### 值

`normal`

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

`anywhere`

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

`break-word`

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

形式语法
----
```

overflow-wrap =   
  normal      |  
  break-word  |  
  anywhere      
  
```

示例
--

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

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

#### HTML


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


#### CSS


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

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

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

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

.hyphens {
  hyphens: auto;
}
```


#### 结果

规范
--

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

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

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

参见
--

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

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

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

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

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

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

语法
--


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

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

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

### 值

`<scrollbar-color>`

定义滚动条的颜色。

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

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

### 形式语法
```

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

示例
--

### CSS


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

### HTML


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

### 结果

无障碍问题
-----

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

规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-image-width
==================

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

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

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

尝试一下
----

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

语法
--


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

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

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

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

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

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

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

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


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

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

`<长度 - 百分比>`

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

`<数值>`

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

`auto`

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

正式定义
----

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

正式语法
----
```

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

示例
--

### Tiling a border image

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

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

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

#### HTML


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


#### CSS


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


#### 结果

规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::file-selector-button
======================

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

尝试一下
----

语法
--


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

示例
--

### 基本示例

#### HTML


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


#### CSS
```

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



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

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


#### 结果

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

### 回退示例

#### HTML


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


#### CSS
```

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



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

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

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

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


#### 结果

规范
--

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

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

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

参见
--

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

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

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

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

动画类型
----

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

无动画性

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

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

离散

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

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

按计算值

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

可重复列表

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

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

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

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

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

参见
--

* 使用 CSS 动画
* 使用 CSS 过渡
outline-width
=============

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

尝试一下
----

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

Syntax
------


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

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

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


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

### Values

`<length>`

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

`thin`

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

`medium`

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

`thick`

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

### Formal syntax
```

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

Examples
--------

### HTML


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

### CSS


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

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

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

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

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::cue (:cue)
============

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

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

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

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

语法
--
```

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

示例
--

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


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

规范
--

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

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

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

参考
--

* 网络视频轨道格式（WebVTT）
border-block-start-width
========================

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

尝试一下
----

语法
--


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

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


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

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

### 取值

`<'border-width'>`

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

形式定义
----

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

形式语法
----
```

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

示例
--

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

#### HTML


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


#### CSS


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

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


#### 结果

规范
--

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

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

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

参见
--

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

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

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

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

尝试一下
----

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

语法
--


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

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

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

### 值

`none`

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

``<string>`+`

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

### 形式语法
```

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

示例
--

### HTML


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

### CSS


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

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

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

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

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

### 结果

规范
--

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

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

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

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

参见
--

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

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

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

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

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

尝试一下
----

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

语法
--


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

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


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

### 取值

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

`nowrap`

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

wrap

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

`wrap-reverse`

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

### 形式定义

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

### 形式语法
```

flex-wrap =   
  nowrap        |  
  wrap          |  
  wrap-reverse    
  
```

示例
--

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

#### HTML


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


#### CSS


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

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

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


#### 结果

规范
--

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

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

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

参见
--

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