user-select - CSS：层叠样式表

user-select
===========

**`user-select`** CSS 属性用于控制用户是否可以选择文本。这不会对作为浏览器用户界面（即 chrome）的一部分的内容加载产生任何影响，除非是在文本框中。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

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

**备注：** `user-select` 不是继承属性，即使默认的属性值 `auto` 的表现基本上以继承为主，似乎是继承属性。甚至，WebKit/基于 Chromium 的浏览器在实现此属性时*将其作为继承属性*，但这和有关规范是相悖的，且会带来一些问题。目前，Chromium 暂时选择修复将其作为继承属性所带来的问题，使最终表现符合规范。

### 取值

`none`

元素及其子元素的文本不可选中。请注意，`Selection` 对象可以包含这些元素。

`auto`

`auto` 的具体取值取决于一系列条件，具体如下：

* 在 `::before` 和 `::after` 伪元素上，采用的属性值是 `none`
* 如果元素是可编辑元素，则采用的属性值是 `contain`
* 否则，如果此元素的父元素的 `user-select` 采用的属性值为 `all`，则该元素采用的属性值也为 `all`
* 否则，如果此元素的父元素的 `user-select` 采用的属性值为 `none`，则该元素采用的属性值也为 `none`
* 否则，采用的属性值为 `text`

`text`

用户可以选择文本。

`all`

在一个 HTML 编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。

`contain`

允许在元素内选择；但是，选区将被限制在该元素的边界之内。

**备注：** CSS UI 4 将 `element` 值重命名为 `contain`。

形式定义
----

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

形式语法
----
```

user-select =
  auto     |
  text     |
  none     |
  contain  |
  all

```

示例
--

### HTML

```html
<p>你应该可以选中这段文本。</p>
<p class="unselectable">嘿嘿，你不能选中这段文本！</p>
<p class="all">点击一次就会选中这段文本。</p>
```

### CSS

```css
.unselectable {
  -webkit-user-select: none; /\* Safari \*/
  user-select: none;
}

.all {
  -webkit-user-select: all;
  user-select: all;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # content-selection |

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

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

参见
--

* `user-select: contain` 的 polyfill
* `::selection` 伪类
* JavaScript 的 `Selection` 对象。


image-orientation - CSS：层叠样式表

image-orientation
=================

CSS 属性 **`image-orientation`** 用来修正某些图片的预设方向。

**备注：**

* 该属性不是用来对图片进行任意角度旋转的，它是用来修正那些带有不正确的预设方向的图片的。因此该属性值会被四舍五入到 90 度的整数倍。
* Similarly this property is not intented to handle the layout -> portrait changing. As `image-orientation` affects only images, it won't work: the changes must happen at the layout-level

|  |  |
| --- | --- |
| 初始值 | `from-image` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | an `angle`, rounded to the next quarter turn from `0deg` and normalized, that is moduloing the value by `1turn` |
| Animation type | discrete |

语法
--
```

语法形式:
```
image-orientation =
  from-image           |
  none                 |
  [ <angle> || flip ]

```

```
```

image-orientation: 0deg
image-orientation: 6.4deg     /* 非 90 度的整数倍，所以会被四舍五入到 0 度 */
image-orientation: -90deg     /* 相当于 270deg */
image-orientation: from-image /* 使用图片的 EXIF 数据 */
image-orientation: 90deg flip /* 旋转 90deg, 再水平翻转 */
image-orientation: flip       /* 不旋转，只进行水平翻转 */

image-orientation: inherit
```

### 属性值

`from-image`

根据图片的 EXIF 数据来旋转图片，EXIF 中有一个控制图片旋转度的属性。

`<angle>`

图片旋转值 `<angle>` , 会被自动四舍五入到 `90deg` (`0.25turn`) 的整数倍。

`flip`

对图片进行水平翻转，先进行第二个参数执行的旋转，再进行此次翻转。

示例
--

规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-orientation |

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

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

参见
--

* 其他和图片相关的 CSS 属性：`image-rendering`、`image-resolution` (en-US)。


margin-left - CSS：层叠样式表

margin-left
===========

![Area on which CSS margin-left apply](/files/4039/margin-left.svg)**`margin-left`** 属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。

竖直排列相邻的两个盒子模型的外边距会重叠 *margin collapsing。*

在长度 (width) 被约束这种极少情况下，( `即当所有的宽度，左边界，边界，填充内容区域和边缘都被定义`), 左边界`会被忽略，`如果被制定为 auto 值，会有相同的计算值。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |

Syntax
------

```css
/\* <length> values \*/
margin-left: 10px; /\* 绝对长度 \*/
margin-left: 1em; /\* 相对于字号的长度 \*/
margin-left: 5%; /\* 相对最近块元素的宽度 \*/

/\* Keyword values \*/
margin-left: auto;

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

### Values

`<length>`

一个固定宽度 `<length>` 值 : 可以是一个绝对宽度，e.g. in `px`, 也可以是个相对宽度，e.g. in `em`, 或者相对视窗的大小，e.g. in `vh`.

`<percentage>`

百分比值 `<percentage>` 最近的块容器的宽度 *width* .

`auto`

auto 关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组 margin-left 和 margin-right 设置为 auto，那么最后计算的空间分布，会根据 display，float，position 属性，自动生成以下几种情况：

| Value of `display` | Value of `float` | Value of `position` | Computed value of `auto` | Comment |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *any* | `static` or `relative` | `0` | Inline layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, 除非`margin-left`和 `margin-right` 同时都设置为 `auto`。这样的话，元素就被设置为基于父元素居中。 | Block layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | Block layout mode (floating element) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` | Internal `table-*` elements don't have margins, use `border-spacing` instead |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the border area inside the available `width`, if fixed. | Absolutely positioned layout mode |
| `flex`, `inline-flex` | *any* | *any* | 在水平方向上有空余空间的情况下，空余的空间会被平均分给水平方向上写有 margin-left:auto 属性的元素的外边距 | Flexbox layout mode |

### Formal syntax
```

margin-left =
  <length-percentage>  |
  auto

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

```

Examples
--------
```

.content { margin-left:   5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

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

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


sin() - CSS：层叠样式表

sin()
=====

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

语法
--

```css
/\* 单个 <angle> 值 \*/
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));

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

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

### 参数

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

`angle`

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

### 返回值

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

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

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

```

示例
--

### 改变盒子尺寸

在此示例中，`sin(30deg)` 将返回 `0.5`，使盒子有 `50px` 的宽度和 `50px` 的高度。

```css
div {
  background-color: red;
  width: calc(sin(30deg) * 100px);
  height: calc(sin(30deg) * 100px);
}
```

### 控制动画时长

另一用例为控制 `animation-duration`，根据正弦值减少时长。在此示例中，动画时长将为 `1s`。

```css
div {
  animation-name: myAnimation;
  animation-duration: calc(sin(0.25turn) * 1s);
}
```

规范
--

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

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

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

参见
--

* `cos()`
* `tan()`
* `asin()`
* `acos()`
* `atan()`
* `atan2()`


animation-name - CSS：层叠样式表

animation-name
==============

**`animation-name`** CSS 属性指定一个或多个 `@keyframes` at-rule 的名称，这些 at-rule 描述了要应用于元素的动画。多个 `@keyframes` at-rule 以逗号分隔的名称列表的形式指定。如果指定的名称不匹配任何 `@keyframes` at-rule，则不会对任何属性进行动画处理。

尝试一下
----

使用简写属性 `animation` 一次性设置所有动画属性通常很方便。

语法
--

```css
/\* 单个动画 \*/
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/\* 多个动画 \*/
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

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

### 取值

`none`

一个特殊的关键字，表示没有关键帧。它可用于禁用动画，而不改变其他标识符的顺序，或禁用级联的动画。

`<custom-ident>`

一个标识动画的名称。该标识符由区分大小写的字母 `a` 到 `z`、数字 `0` 到 `9`、下划线（`_`）和/或破折号（`-`）组成。第一个非破折号字符必须是一个字母。此外，在标识符开头不能有两个破折号。此外，标识符不能为 `none`、`unset`、`initial` 或 `inherit`。

**备注：** 当你在 `animation-*` 属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 `animation-name` 属性中指定的动画。有关更多信息，请参阅设置多个动画属性值。

形式定义
----

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

形式语法
----
```

animation-name =
  [ none | <keyframes-name> ]#

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

```

示例
--

### 为动画命名

此动画的 `animation-name` 为 `rotate`。

#### 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-name |

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

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-duration`、`animation-fill-mode`、`animation-iteration-count`、`animation-play-state`、`animation-timeline` (en-US)、`animation-timing-function`


:indeterminate - CSS：层叠样式表

:indeterminate
==============

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

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

* Learn more
* See full compatibility
* Report feedback
**`:indeterminate`** CSS 伪类表示任意的状态不确定的表单元素，例如那些将 HTML `indeterminate` 属性设置为 `true` 的复选框，以及属于某个组且该组中所有单选按钮都未选中的单选按钮，还有不确定状态的 `<progress>` 元素。

```css
/\* 选中任意的状态不确定的 <input> \*/
input:indeterminate {
  background: lime;
}
```

此选择器针对的元素是：

* `<input type="checkbox">` 元素，其 `indeterminate` 属性被 JavaScript 设置为 `true` 时。
* `<input type="radio">` 元素，当表单中具有相同`名称`值的所有单选按钮均未被选中时。
* 处于不确定状态的 `<progress>` 元素
语法
--
```

:indeterminate
```

示例
--

### 复选框和单选按钮

这个示例将特殊样式应用于与不确定表单字段关联的标签。

#### HTML

```html
<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>
```

#### CSS

```css
input:indeterminate + label {
  background: lime;
}
```

```
fieldset {
  padding: 1em 0.75em;
}

fieldset:first-of-type {
  margin-bottom: 1.5rem;
}

fieldset:not(:first-of-type) > div:not(:last-child) {
  margin-bottom: 0.5rem;
}
```

#### JavaScript

```js
const inputs = document.getElementsByTagName("input");

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}
```

#### 结果

### 进度条

#### HTML

```html
<progress></progress>
```

#### CSS

```css
progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-indeterminate |
| Selectors Level 4 # indeterminate |

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

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

参见
--

* Web 表单——处理用户数据
* 样式化 Web 表单
* `<input type="checkbox">` 元素的 `indeterminate` 属性
* `<input>` 和实现它的 `HTMLInputElement` 接口
* `:checked` CSS 选择器可以让你根据复选框是否被选中来设置样式


scroll-padding-top - CSS：层叠样式表

scroll-padding-top
==================

**`scroll-padding-top`** 属性定义了滚动口的*最优视区*——用于在用户视野中放置内容的目标区域——的上内边距。作者由此得以排除滚动口被其他内容（如固定定位的工具栏或侧边栏）所遮挡的区域，或在目标元素与滚动口的边之间留出更多余地。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
scroll-padding-top: auto;

/\* <length> 值 \*/
scroll-padding-top: 10px;
scroll-padding-top: 1em;
scroll-padding-top: 10%;

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

### 取值

`<length-percentage>`

滚动口的上内边距，为有效的长度或百分比。

`auto`

此内边距由用户代理所决定。此值通常为 `0px`，但用户代理可检测非零值是否更合理并另行处理。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

scroll-padding-top =
  auto                       |
  <length-percentage [0,∞]>

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

```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-physical |

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

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

参见
--

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


transition - CSS：层叠样式表

transition
==========

**`transition`** CSS 属性是 `transition-property`、`transition-duration`、`transition-timing-function` 和 `transition-delay` 的一个简写属性 (en-US)。

尝试一下
----

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 `:hover`，`:active` 或者通过 JavaScript 实现的状态变化。

语法
--

```css
/\* Apply to 1 property \*/
/\* property name | duration \*/
transition: margin-right 4s;

/\* property name | duration | delay \*/
transition: margin-right 4s 1s;

/\* property name | duration | timing function \*/
transition: margin-right 4s ease-in-out;

/\* property name | duration | timing function | delay \*/
transition: margin-right 4s ease-in-out 1s;

/\* Apply to 2 properties \*/
transition:
  margin-right 4s,
  color 1s;

/\* Apply to all changed properties \*/
transition: all 0.5s ease-out;

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

`transition`属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

每个单属性转换都描述了应该应用于单个属性的转换（或特殊值`all`和`none`）。这包括：

* 零或一个值，表示转换应适用的属性。这可能是以下任何一种：
    + 关键字`none`
    + 关键字`all`
    + 命名 CSS 属性的 `<custom-ident>` 。
* 零或一个 `<single-transition-timing-function>` (en-US) 值表示要使用的过渡函数
* 零，一或两个 `<time>` 值。可以解析为时间的第一个值被分配给 `transition-duration`，并且可以解析为时间的第二个值被分配给`transition-delay`。

请查看“如何处理”以了解当`transition`属性的值个数超过可以接收的值的个数时该如何处理。简而言之，当`transition`属性的值个数超过可以接收的值的个数时，多余的值都会被忽略掉，不再进行解析。

### 标准语法
```

transition =
  <single-transition>#

<single-transition> =
  [ none | <single-transition-property> ]  ||
  <time>                                   ||
  <easing-function>                        ||
  <time>

<single-transition-property> =
  all             |
  <custom-ident>

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

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

```

示例
--

“使用 CSS 过渡”一文中还包含了几个 CSS 过渡示例。

规范
--

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `transition-delay`: `0s`
* `transition-duration`: `0s`
* `transition-property`: all
* `transition-timing-function`: `ease`
* `transition-behavior` (en-US): `normal`
 |
| 适用元素 | all elements, `::before` and `::after` pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `transition-delay`: as specified
* `transition-duration`: as specified
* `transition-property`: as specified
* `transition-timing-function`: as specified
* `transition-behavior` (en-US): as specified
 |
| Animation type | Not animatable |

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

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

参见
--

* Using CSS transitions
* `TransitionEvent`


border-top - CSS：层叠样式表

border-top
==========

CSS 属性 **border-top**是属性 `border-top-color`, `border-top-style`, 和`border-top-width` 的三者的缩写。这些属性都是在描述一个元素的上方的边框`border`。

尝试一下
----

与所有缩写属性（shorthand properties）一样，**border-top**始终设置它可以设置的所有属性的值，即使未指定它们也是如此。它将未指定的那些设置为其默认值。这意味着

```css
border-top-style: dotted;
border-top: thick green;
```

和下面的代码效果相同：

```css
border-top-style: dotted;
border-top: none thick green;
```

在`border-top`前指定的`border-top-style`将会失效。因为`border-top-style` 默认值为`none`,故没有边界即没有指定`border-style`

Syntax
------

```css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;
```

这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。

### Values

`<br-width>`

请参阅 `border-top-width`.

`<br-style>`

请参阅 `border-top-style`.

``<color>``

请参阅 `border-top-color`.

### 形式语法
```

border-top =
  <line-width>  ||
  <line-style>  ||
  <color>

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

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

示例
--

```html
<div>This box has a border on the top side.</div>
```

```css
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

规范
--

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

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

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


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

:lang()
=======

**`:lang()`** CSS 伪类基于元素语言来匹配页面元素。

尝试一下
----

**备注：** 在 HTML 中，语言是通过 `lang` 属性和 `<meta>` 元素的组合来决定的，也可能是通过协议的信息来确定（例如 HTTP 标头）。对于其他文档类型，也可能存在其他用于确定语言的方法。

语法
--

### 形式语法

```css
:lang(<language-code>) {
  /\* ... \*/
}
```

### 参数

`<language-code>`

`<string>` 代表了你想定位的语言。可接受的值是 HTML 规范中指定的值。

示例
--

在这个例子中，`:lang()` 伪类使用子组合器来匹配引用元素 (`<q>`) 的父元素。需要注意的是，此处演示的方法并不是唯一的，最好的方法需要依据文档类型来确定。还需要注意的是，Unicode 值用于指定一些特殊字符的引用。

### HTML

```html
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
  <q>This German quote has a <q>nested</q> quote inside.</q>
</div>
```

### CSS

```css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039" "\203A";
}
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # lang-pseudo |

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

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

参见
--

* 语言相关伪类：`:lang`、`:dir`
* HTML `lang` 属性
* HTML `translate` 属性
* RFC 5646: 用于标识语言的标签（也称为 BCP 47）


counter-increment - CSS：层叠样式表

counter-increment
=================

概要
--

`counter-increment`属性用于将CSS Counters (en-US)的值增加给定值。可以使用 `counter-reset` 属性重置计数器的值。

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

语法
--

```css
/\* Increment counter-name by 1 \*/
counter-increment: counter-name;

/\* Decrement counter-name by 1 \*/
counter-increment: counter-name -1;

/\* Increment counter1 by 1, and decrement counter2 by 4 \*/
counter-increment: counter 1 counter2 -4;

/\* Do not increment/decrement anything: used to hide less specific values \*/
counter-increment: none;

/\* Global values \*/
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;
```

### 可选值

`<custom-ident>`

递增的计数器的名称。该标识符由不区分大小写的字母 a 到 z，数字 0 到 9，下划线（\_）和/或短划线（ - ）的组合组成。第一个非破折号字符必须是一个字母（即，在它的开头没有数字，即使前面有破折号。）此外，在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是 none，unset，initial 或 inherit。

`<integer>`

计数器的值。如果没有给出，默认为 1。

`none`

不得增加计数器。用作默认值，或取消更具体规则的增量。

你可以根据需要指定要递增的计数器，每个计数器用空格分隔。

### 语法形式
```

counter-increment =
  [ <counter-name> <integer>? ]+  |
  none

```

示例
--

```css
h1 {
  counter-increment: chapter section 2 page;
  /\* Increases the value of the chapter and page counters by 1
 and the section counter by 2. \*/
}
```

规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # increment-set |

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

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

参考
--

* CSS Counters (en-US), `counter-reset`


list-style - CSS：层叠样式表

list-style
==========

**`list-style`** CSS 属性是一个简写对属性集合，包括`list-style-type`, `list-style-image`, 和 `list-style-position`。

概要
--

CSS list-style 属性是设置`list-style-type`, `list-style-image` 和 `list-style-position` 的简写属性。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `list-style-type`: `disc`
* `list-style-position`: `outside`
* `list-style-image`: `none`
 |
| 适用元素 | list items |
| 是否是继承属性 | yes |
| 计算值 | as each of the properties of the shorthand:* `list-style-image`: The keyword `none` or the computed <image>
* `list-style-position`: as specified
* `list-style-type`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `list-style-image`: discrete
* `list-style-position`: discrete
* `list-style-type`: discrete
 |

语法
--
```

Formal syntax:
```
list-style =
  <'list-style-position'>  ||
  <'list-style-image'>     ||
  <'list-style-type'>

```

```
### 值

以任何顺序接受一个，二个或者三个关键词

`<'list-style-type'>`

参看 `list-style-type`

`<'list-style-image'>`

参看 `list-style-image`

`<'list-style-position'>`

参看 `list-style-position`

示例
--

### HTML

```html
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>
```

### CSS

```css
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}
```

### Result

规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-property |

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

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

另参见
---

* `list-style-type`, `list-style-image`, `list-style-position`


grid-auto-flow - CSS：层叠样式表

grid-auto-flow
==============

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-auto-flow`** 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

尝试一下
----

语法
--

```css
/\* Keyword values \*/
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/\* Global values \*/
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;
```

此属性有两种形式：

* 单个关键字：`row`、`column`，或 `dense` 中的一个。
* 两个关键字：`row dense` 或 `column dense`。
### 取值

`row`

该关键字指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。如果既没有指定 `row` 也没有 `column`，则默认为 `row`。

`column`

该关键字指定自动布局算法通过逐列填充来排列元素，在必要时增加新列。

`dense`

该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。

### 正式语法
```

grid-auto-flow =
  [ row | column ]  ||
  dense

```

示例
--

### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="direction" onchange="changeGridAutoFlow()">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()" />
<label for="dense">dense</label>
```

### CSS

```css
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column; /\* or 'row', 'row dense', 'column dense' \*/
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}
```

```
function changeGridAutoFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("direction");
  var dense = document.getElementById("dense");
  var gridAutoFlow = direction.value === "row" ? "row" : "column";

  if (dense.checked) {
    gridAutoFlow += " dense";
  }

  grid.style.gridAutoFlow = gridAutoFlow;
}
```

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |

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

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

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

参见
--

* Related CSS properties: `grid-auto-rows`, `grid-auto-columns`, `grid`
* Grid Layout Guide: *Auto-placement in grid layout*
* Video tutorial: *Introducing Grid auto-placement and order*


border-image - CSS：层叠样式表

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

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
**`border-image`** CSS 属性允许在元素的边框上绘制图像`。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉``border-style` 属性所设置的边框样式。虽然规范要求使用 `border-image 时`边框样式必须存在，但一些浏览器可能没有实现这一点。

特别注意，若 `border-image-source`（此值可用 border-image-source 或 border-image 简写设置) 的值为 none 或者图片不能显示，则将应用 border-style。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-image-source`: `none`
* `border-image-slice`: `100%`
* `border-image-width`: `1`
* `border-image-outset`: `0`
* `border-image-repeat`: `stretch`
 |
| 适用元素 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `border-image-slice`: refer to the size of the border image
* `border-image-width`: refer to the width or height of the border image area
 |
| 计算值 | as each of the properties of the shorthand:* `border-image-outset`: as specified, but with relative lengths converted into absolute lengths
* `border-image-repeat`: as specified
* `border-image-slice`: one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified
* `border-image-source`: `none` or the image with its URI made absolute
* `border-image-width`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `border-image-outset`: by computed value type
* `border-image-repeat`: discrete
* `border-image-slice`: by computed value type
* `border-image-source`: discrete
* `border-image-width`: by computed value type
 |

语法
--

```css
/\* border-image: image-source image-height image-width image-repeat \*/
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
```

### 值

参考各属性对应的值。

### 正式语法
```

border-image =
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>

```

示例
--

### 位图

#### HTML 内容

```html
<div id="bitmap">The image is stretched to fill the area.</div>
```

#### CSS 内容

```css
#bitmap {
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("border.png") 30;
}
```

### 渐变

#### HTML 内容

```html
<div id="gradient">The image is stretched to fill the area.</div>
```

#### CSS 内容

```css
#gradient {
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}
```

规范
--

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

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

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


:first-of-type - CSS：层叠样式表

:first-of-type
==============

CSS 伪类 **`:first-of-type`** 表示一组兄弟元素中其类型的第一个元素。

尝试一下
----

语法
--

```css
:first-of-type {
  /\* ... \*/
}
```

示例
--

### 装饰第一个段落

#### HTML

```html
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 1</p>
```

#### CSS

```css
p:first-of-type {
  color: red;
  font-style: italic;
}
```

#### 结果

### 嵌套元素

下面这个例子展示了如何选中多层嵌套元素。注意当不存在简单选择器时，通配符（`*`）是默认应用的。

#### HTML

```html
<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <p>This `p` qualifies!</p>
  <div>This is the final `div`.</div>
</article>
```

#### CSS

```css
article :first-of-type {
  background-color: pink;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # first-of-type-pseudo |

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

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

参见
--

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


padding-right - CSS：层叠样式表

padding-right
=============

CSS 属性 **padding-right** 是指一个元素在内边距区域（padding area）中右边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。

```css
/\* <length> values \*/
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/\* <percentage> value \*/
padding-right: 10%;

/\* Global values \*/
padding-right: inherit;
padding-right: initial;
padding-right: unset;
```

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |

Syntax
------

### Values

`<length>`

当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。

`<percentage>`

当内边距（padding）是一个百分比的时候，百分比是和本身包含的元素的宽度有关的，同样一定不能为负数。

### Formal syntax
```

padding-right =
  <length-percentage [0,∞]>

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

```

Examples
--------

```css
.content {
  padding-right: 5%;
}
.sidebox {
  padding-right: 10px;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

See also
--------

* CSS Box Model
* The `padding` shorthand property can be used to set paddings on all four sides of an element with a single declaration: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.


column-gap - CSS：层叠样式表

column-gap
==========

CSS **`column-gap`** 属性用来设置元素列之间的间隔（gutter）大小。

尝试一下
----

`column-gap` 一开始是 Multi-column 布局下的特有属性，后来在其他布局中也使用这个属性。如 CSS 盒子对齐中的表述，该属性已经可以在 Multi-column（多列布局）、Flexible Box（弹性盒子）以及 Grid layout（网格布局）中使用。

语法
--

```css
/\* Keyword value \*/
column-gap: normal;

/\* <length> values \*/
column-gap: 3px;
column-gap: 2.5em;

/\* <percentage> value \*/
column-gap: 3%;

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

`column-gap` 属性可以用以下值来表示。

### 取值

`normal`

表示列之间的间隔宽度。在 `多列布局` 时默认间隔为 `1em`，其他类型布局默认间隔为 0。

`<length>`

用 `<length>` 来定义列之间的间隔大小。而且 `<length>` 值必须是非负数的。

`<percentage>`

用 `<percentage>`（百分比）来定义列之间的间隔大小。同样的，`<percentage>` 值也必须是非负数的。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | multi-column elements, flex containers, grid containers |
| 是否是继承属性 | 否 |
| Percentages | refer to corresponding dimension of the content area |
| 计算值 | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

column-gap =
  normal                     |
  <length-percentage [0,∞]>

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

```

示例
--

### Flex 布局

#### HTML

```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}
```

#### 结果

### Grid 布局

#### HTML

```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```

#### 结果

### Multi-column 布局

#### HTML

```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  `column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>
```

#### CSS

```css
.content-box {
  column-count: 3;
  column-gap: 40px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |
| CSS Grid Layout Module Level 2 # gutters |
| CSS Multi-column Layout Module Level 1 # column-gap |

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

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

参见
--

* 相关 CSS 属性：`row-gap`、`gap`
* 网格布局指南：*网格布局基本概念 - 网格间距*
* Multi-column 布局指南：*Styling Columns*


:paused - CSS：层叠样式表

:paused
=======

**`:paused`** CSS 伪类选择器表示一个处于“暂停”状态（即非“播放”状态）的可播放的元素，如 `<audio>` 或 `<video>`。

如果用户明确将资源暂停，或者资源处于非激活状态或其他非播放状态，如“已加载但尚未激活”，则该资源将被视为已暂停。

语法
--

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

示例
--

### CSS

```css
:paused {
  border: 5px solid orange;
}
```

规范
--

| Specification |
| --- |
| Selectors Level 4 # selectordef-paused |

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

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

参见
--

* `:playing`


At 规则 - CSS：层叠样式表

At 规则
=====

**At 规则**是一个 CSS 语句，用来指示 CSS 如何运行。以 at 符号开头，'`@`'（`U+0040 COMMERCIAL AT`），后跟一个标识符，并包括直到下一个分号的所有内容，'`;`'（`U+003B SEMICOLON`），或下一个 CSS 块，以先到者为准。

语法
--

### 规则

```css
/\* 一般结构 \*/
@identifier (RULE);

/\* 示例：通知浏览器使用 UTF-8 字符集 \*/
@charset "utf-8";
```

下面是一些 at 规则，由它们的标示符指定，每种规则都有不同的语法：

* `@charset`——定义样式表使用的字符集。
* `@import`——告诉 CSS 引擎引入一个外部样式表。
* `@namespace`——告诉 CSS 引擎必须考虑 XML 命名空间。
### 嵌套

```css
@identifier (RULE) {
}
```

嵌套 at 规则，是嵌套语句的子集，不仅可以作为样式表里的一个语句，也可以用在条件规则组里：

* `@media`——如果满足媒介查询的条件则条件规则组里的规则生效。
* `@supports`——如果满足给定条件则条件规则组里的规则生效。
实验性
* `@document`——如果文档样式表满足给定条件则条件规则组里的规则生效。*（推迟至 CSS Level 4 规范）*
* `@page`——描述打印文档时布局的变化。
* `@font-face`——描述将下载的外部的字体。
实验性
* `@keyframes`——描述 CSS 动画的中间步骤。
实验性
* `@counter-style`——定义不属于预定义样式集的特定计数器样式。*（在候选推荐阶段，仅在 Gecko 中实现）*
* `@font-feature-values`（加上 `@swash`、`@ornaments`、`@annotation`、`@stylistic`、`@styleset` 和 `@character-variant`）——在 `font-variant-alternates` 中定义通用名称，以便在 OpenType 中以不同方式激活功能。*（在候选推荐阶段，仅在 Gecko 中实现）*
* `@property`
实验性
——描述自定义属性和变量。*（目前处于工作草案阶段）*
* `@layer`——声明一个级联层，并在有多个级联层时定义优先顺序。
条件规则组
-----

就像属性值那样，每条 at 规则都有不同的语法。不过一些 @规则可以归为一个特殊的分类：**条件规则组**。这些语句使用相同的语法。它们都可以包括 *嵌套语句*——*规则集*或者是*嵌套 at 规则*。它们都表达：它们所指的条件 (类型不同) 总等效于 **true** 或者 **false**，如果为 **true** 那么它们之中的语句生效。

条件规则组由 CSS Conditionals Level 3 定义：

* `@media`
* `@supports`
* `@document`*（推迟至 CSS Level 4 规范）*

既然条件规则组可以嵌套语句，那么嵌套层级不定。

使用 CSS 嵌套来嵌套 @layer
-------------------

级联层可以嵌套以创建嵌套层。它们用 `.`（点）连接。这也可以使用 CSS 嵌套 (en-US)来实现。

索引
--

* `@charset`
* `@color-profile` (en-US)
* `@container` (en-US)
* `@counter-style`
* `@document`
已弃用
* `@font-face`
* `@font-feature-values`
* `@font-palette-values` (en-US)
* `@import`
* `@keyframes`
* `@layer`
* `@media`
* `@namespace`
* `@page`
* `@property`
实验性
* `@supports`
规范
--

| Specification |
| --- |
| CSS Conditional Rules Module Level 3  |
| Compatibility Standard # css-at-rules |

参见
--

* CSS 关键概念
    + CSS 语法
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距重叠
    + 值
        - 初始值
        - 计算值
        - 应用值
        - 实际值
    + 值定义语法
    + 简写属性
    + 可替换元素
    + CSS 嵌套模块 (en-US)


transition-property - CSS：层叠样式表

transition-property
===================

**`transition-property`** 指定应用过渡属性的名称。

尝试一下
----

如果指定简写属性（比如 `background`），那么其完整版中所有可以动画的属性都会被应用过渡。

语法
--

```css
/\* Keyword values \*/
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property:
  all,
  -moz-specific,
  sliding;

/\* Global values \*/
transition-property: inherit;
transition-property: initial;
transition-property: unset;
```

### 取值

`none`

没有过渡动画。

`all`

所有可被动画的属性都表现出过渡动画。

`IDENT`

属性名称。由小写字母 `a` 到 `z`，数字 `0` 到 `9`，下划线（`_`）和破折号（`-`）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。

形式定义
----

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

### 形式语法
```

transition-property =
  none                           |
  <single-transition-property>#

<single-transition-property> =
  all             |
  <custom-ident>

```

示例
--

在 CSS 过渡中有几个示例可以参考。

规范
--

| Specification |
| --- |
| CSS Transitions # transition-property-property |

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

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

参见
--

* 使用 CSS 过渡
* `TransitionEvent`


overscroll-behavior - CSS：层叠样式表

overscroll-behavior
===================

**`overscroll-behavior`** CSS 属性是 `overscroll-behavior-x` 和 `overscroll-behavior-y` 属性的合并写法，让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。

```css
/\* 关键字的值 \*/
overscroll-behavior: auto; /\* 默认 \*/
overscroll-behavior: contain;
overscroll-behavior: none;

/\* 使用 2 个值 \*/
overscroll-behavior: auto contain;

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

默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

在某些情况下我们不想要这些表现，使用 `overscroll-behavior` 来去除不需要的滚动链，以及类似 QQ 一类的应用下拉刷新效果。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | non-replaced block-level elements and non-replaced inline-block elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `overscroll-behavior-x`: as specified
* `overscroll-behavior-y`: as specified
 |
| Animation type | discrete |

语法
--

`overscroll-behavior` 属性可以使用下面列表中的一或两个关键字指定。

使用两个关键字来指定 `overscroll-behavior` 分别在 `x` 和 `y` 轴的值。只用一个值的话，x 和 y 轴都被指定为该值。

### 值

`auto`

默认效果

`contain`

设置这个值后，默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。

`none`

临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止。

### Formal syntax
```

overscroll-behavior =
  [ contain | none | auto ]{1,2}

```

Examples
--------

在我们 滚动行为示例 (也可以看该 源代码) 我们展现一个虚构的联系人全页列表，和一个包含聊天窗口的对话框。

![](/zh-CN/docs/Web/CSS/overscroll-behavior/example.png)

正常情况下在聊天窗口边界之前都可以使用滚动条，但是当滚动到边界之后，其后的联系人窗口也将开始滚动，这并不是我们满意的效果。可以在聊天窗口中使用 `overscroll-behavior-y` (`overscroll-behavior` 也可以) 就像如下：

```css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
```

我们也希望移除标准的滚动至顶部或底部的滚动特效（例如 Android 上的 Chrome 当滚动超过顶部边界时会刷新页面），可以通过在 `<body>` 元素设置 `overscroll-behavior: none` 来阻止这个行为：

```css
body {
  margin: 0;
  overscroll-behavior: none;
}
```

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

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-properties |

在 CSSWG 发布自己的草案之前，该规范只能在它的 WICG Github Repository 中找到。

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

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

See also
--------

* Take control of your scroll: customizing pull-to-refresh and overflow effects
* `-ms-scroll-chaining`


contain-intrinsic-height - CSS：层叠样式表

contain-intrinsic-height
========================

CSS 属性 **`contain-intrinsic-length`** 定义了元素受尺寸局限时浏览器用于布局的元素高度。

语法
--

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

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

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

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

### 取值

可为元素指定下列值。

`none`

元素无固有高度。

`<length>`

元素具有指定高度（`<length>`）。

`auto <length>`

若存在“正常渲染”的元素高度且元素正在跳过其内容（例如在屏外时），则为此高度的记忆值；否则为指定的 `<length>`。

描述
--

此属性的应用常常伴随如 `contain: size` 和 `content-visibility` 等可触发尺寸局限的要素，且亦可使用简写属性 `contain-intrinsic-size` 设置。

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

`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-height =
  auto? [ none | <length> ]

```

示例
--

除下列示例外，`contain-intrinsic-size` 页面含有演示修改固有宽度和高度的效果的运行实例。

### 设置固有高度

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

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

下列 CSS 代码将 `contained_element` 的 `content-visibility` 设置为 `auto`，故若元素被隐藏则将受尺寸限制。此元素受尺寸限制时所用的宽度和高度分别使用 `contain-intrinsic-width` 和 `contain-intrinsic-height` 同时设置。

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

规范
--

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

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

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

参见
--

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


接续兄弟组合器 - CSS：层叠样式表

接续兄弟组合器
=======

**接续兄弟选择器**（`+`）介于两个选择器之间，当第二个元素*紧跟在*第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

```css
/\* 图片后面紧跟着的段落将被选中 \*/
img + p {
  font-weight: bold;
}
```

语法
--

```css
former\_element + target\_element { style properties }
```

示例
--

### CSS

```css
li:first-of-type + li {
  color: red;
}
```

### HTML

```html
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # adjacent-sibling-combinators |

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

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

参见
--

* 后续兄弟组合器


margin-block - CSS：层叠样式表

margin-block
============

CSS 简写属性 **`margin-block`** 定义了元素的逻辑块首和块末外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。

尝试一下
----

属性构成
----

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

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

```css
/\* <length> 值 \*/
margin-block: 10px 20px; /\* 绝对长度 \*/
margin-block: 1em 2em; /\* 相对于文本尺寸 \*/
margin-block: 5% 2%; /\* 相对于最近区块容器的宽度 \*/
margin-block: 10px; /\* 同时设置块首和块末值 \*/

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

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

根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `margin-top` 和 `margin-bottom`，或者 `margin-right` 和 `margin-left` 属性。

`margin-block` 属性可用一个或两个值指定。

* 用**一个**值指定时，**块首和块末**应用同样的外边距。
* 用**两个**值指定时，第一个外边距应用于**块首**，第二个应用于**块末**。
### 取值

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `margin-block-start`: `0`
* `margin-block-end`: `0`
 |
| 适用元素 | same as `margin` |
| 是否是继承属性 | 否 |
| Percentages | depends on layout model |
| 计算值 | as each of the properties of the shorthand:* `margin-block-start`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `margin-block-end`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length |

形式语法
----
```

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

```

示例
--

### 设置块首和块末外边距

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-block: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}
```

#### HTML

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

#### 结果

规范
--

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

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

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

参见
--

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


align-self - CSS：层叠样式表

align-self
==========

CSS 属性 **`align-self`** 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 `align-items` 的值。In Grid, it aligns the item inside the grid area. 在 Flexbox 中，会按照 cross axis（当前 flex 元素排列方向的垂直方向）进行排列。

尝试一下
----

align-self 属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略 `align-self`。

语法
--

```css
/\* Keyword values \*/
align-self: auto;
align-self: normal;

/\* Positional alignment \*/
/\* align-self does not take left and right values \*/
align-self: center; /\* Put the item around the center \*/
align-self: start; /\* Put the item at the start \*/
align-self: end; /\* Put the item at the end \*/
align-self: self-start; /\* Align the item flush at the start \*/
align-self: self-end; /\* Align the item flush at the end \*/
align-self: flex-start; /\* Put the flex item at the start \*/
align-self: flex-end; /\* Put the flex item at the end \*/

/\* Baseline alignment \*/
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /\* Stretch 'auto'-sized items to fit the container \*/

/\* Overflow alignment \*/
align-self: safe center;
align-self: unsafe center;

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

### 值

`auto`

设置为父元素的 `align-items` 值。

`normal`

效果取决于当前的布局模式：

* 绝对定位布局中，normal 在绝对定位的替代元素上表现为`start`，在*所有其他*绝对定位元素上表现为`stretch`。
* 在绝对定位的静态元素上表现为`stretch`。
* flex 布局中表现为 stretch。
* For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.
* 在块级和表格单元中无效。

`self-start`

Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.

`self-end`

Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.

`flex-start`

flex 元素会对齐到 cross-axis 的首端。

`flex-end`

flex 元素会对齐到 cross-axis 的尾端。

`center`

flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。

`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`.
 flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸。If the combined size of the items along the cross axis is less than the size of the alignment container and the item is `auto`-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by `max-height`/`max-width` (or equivalent functionality), so that the combined size of all `auto`-sized items exactly fills the alignment container along the cross axis.

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

### 形式化语法
```

align-self =
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center

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

<overflow-position> =
  unsafe  |
  safe

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

```

示例
--

### HTML

```html
<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>
```

### CSS

```css
section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-self-property |
| CSS Flexible Box Layout Module Level 1 # align-items-property |

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

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

参考
--

* CSS Flexbox 指南：*Basic Concepts of Flexbox*
* CSS Flexbox 指南：*Aligning items in a flex container*
* CSS Grid 指南：*Box alignment in CSS Grid layouts*
* CSS Box Alignment
* `align-items` 属性


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

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

CSS 属性 **`border-block-start`** 为简写属性，用于在样式表中的某处同时设置逻辑块首边框的各属性值。

尝试一下
----

属性构成
----

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

* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
语法
--

```css
border-block-start: 1px;
border-block-start: 2px dotted;
border-block-start: medium dashed blue;

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

`border-block-start` 可用于设置 `border-block-start-width`、`border-block-start-style` 和 `border-block-start-color` 中至少一个属性的值。此属性所对应的实体边框取决于元素的书写模式、行内方向和文本朝向。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top`、`border-right`、`border-bottom` 或 `border-left` 属性。

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

### 取值

`border-block-start` 属性可用下列值中的至少一个指定，次序任意：

`<'border-width'>`

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

`<'border-style'>`

边框线型。见 `border-style`。

`<'color'>`

边框颜色。见 `color`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `border-block-start-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-block-start-color`: by computed value type
* `border-block-start-style`: discrete
* `border-block-start-width`: by computed value type
 |

形式语法
----
```

border-block-start =
  <line-width>  ||
  <line-style>  ||
  <color>

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

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

示例
--

### 竖排文本的边框

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  border-block-start: 5px dashed blue;
}
```

规范
--

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

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

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

参见
--

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


scroll-margin-inline - CSS：层叠样式表

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

简写属性 **`scroll-margin-inline`** 设置了元素的行向滚动外边距。

尝试一下
----

属性构成
----

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

* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
语法
--

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

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

### 取值

`<length>`

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

描述
--

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

形式定义
----

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

形式语法
----
```

scroll-margin-inline =
  <length>{1,2}

```

示例
--

### 简单演示

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

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

#### 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: end;
}

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

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

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

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

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

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

**备注：** 此处虽然在行向轴（即此情形中的 x 轴）的首侧*和*末侧均设置了 `scroll-margin`，但真正相关的仅有末侧边。此处若仅在此边上设置滚动外边距，例如 `scroll-margin-inline: 0 1rem` 或 `scroll-margin-inline-end: 1rem`，则效果相同。

#### 结果

请自行尝试：

规范
--

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

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

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

参见
--

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


image-rendering - CSS：层叠样式表

image-rendering
===============

CSS 属性 **`image-rendering`** 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。

当页面作者指定的尺寸不是图像的原始尺寸时，用户代理将缩放图像。缩放也可能由于用户互动（双指缩放）而发生。举个例子，如果有一张尺寸为 `100×100px` 的图片，但作者有意将尺寸设置为 `200×200px`（或`50×50px`），然后，图片便会根据 `image-rendering` 指定的算法，缩小或放大到新尺寸。此属性对于未缩放的图像没有影响。

**备注：** The Canvas API can provide a fallback solution for `crisp-edges` through manual image data manipulation.

语法
--

```css
/\* 专有属性值 \*/
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/\* 全局属性值 \*/
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;
```

### 属性值

`auto`

自 Gecko 1.9（Firefox 3.0）起，Gecko 使用*双线性*（*bilinear*）算法进行重新采样（高质量）。

`smooth`
实验性

应使用能最大化图像客观观感的算法来缩放图像。特别地，会“平滑”颜色的缩放算法是可以接受的，例如双线性插值。这适用于照片等类型的图像。

`high-quality`
实验性

与 `smooth` 相同，但更倾向于高质量的缩放。如果系统资源受到限制，在考虑降低哪些图像的质量以及降低到什么程度时，`high-quality` 的图像应该优先于任何其他值的图像。

`crisp-edges`

必须使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放，并且，该算法既不会平滑颜色，又不会在处理过程中为图像引入模糊。合适的算法包括*最近邻居*（*nearest-neighbor*）算法和其他非平滑缩放算法，比如 *2×SaI* 和 *hqx-\** 系列算法。此属性值适用于像素艺术作品，例如一些网页游戏中的图像。

`pixelated`

放大图像时，使用最近邻居算法，因此，图像看着像是由大块像素组成的。缩小图像时，算法与 `auto` 相同。

**备注：** 早期草案中出现的 `optimizationQuality` 和 `optimizationSpeed` （来自 SVG 的对应值）分别被定义为 `smooth` 和 `pixelated`。

### 形式语法
```

image-rendering =
  auto          |
  smooth        |
  high-quality  |
  pixelated     |
  crisp-edges

```

示例
--
```

<div>
  <img class="auto" alt="auto" src="blumen.jpg" />
  <img class="pixelated" alt="pixelated" src="blumen.jpg" />
  <img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" />
</div>
```

```
img {
  height: 200px;
}
```

```css
.auto {
  image-rendering: auto;
}

.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
```

规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-rendering |

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

**备注：** 虽然在最初此属性与 SVG 的 `image-rendering` 属性定义相近，但到现在，它们之间已有相当的差别。

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

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

### 备注

**备注：** 这是来自旧版浏览器兼容性表格的备注，保留以便查阅。可另行参阅 Can I use。

Internet Explorer 7 和 8 支持非标准的 `-ms-interpolation-mode` 属性，有两个属性值：`bicubic` 和 `nearest-neighbor`，和大量差距：

* 只应用于 `<img>` 等元素带的图片
* IE 7 上此属性只支持无透明度的图片
* 不能继承
* IE 7 默认值：`nearest-neighbor` (低质量)
* IE 8 默认值：`bicubic` (高质量)
* IE 9 不支持此非标准属性

WebKit 支持一个非标准属性：`-webkit-optimize-contrast`.

WebKit Nightly 支持，见 bug

Canvas 可以通过人工方式支持 crisp-edge/optimize-contrast 属性。


理解 CSS 的 z-index 属性 - CSS：层叠样式表

理解 CSS 的 z-index 属性
===================

通常情况下，HTML页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 `z-index`属性可让你在渲染内容时调整对象分层的顺序。

>
> *在 CSS 2.1 中，所有的盒模型元素都处于三维坐标系中。除了我们常用的横坐标和纵坐标，盒模型元素还可以沿着“z 轴”层叠摆放，当他们相互覆盖时，z 轴顺序就变得十分重要。*
>
>
>

(参见 CSS 2.1 Section 9.9.1 - Layered presentation)

这意味着其实 CSS 允许你在现有的渲染引擎上层叠的摆放盒模型元素。所有的层都可以用一个整数 ( z 轴顺序) 来表明当前层在 z 轴的位置。数字越大，元素越接近观察者。Z 轴顺序用 CSS 的 `z-index` 属性来指定。

使用 `z-index` 很简单：给它指定一个整数值即可。然而，在层叠比较复杂的 HTML 元素上使用 `z-index` 时，结果可能让人觉得困惑，甚至不可思议。这是由复杂的元素排布规则导致的。更多细节请参见 CSS-2.1 Appendix E 。

本文将通过一些简单的例子来解释这些规则。

1. Stacking without z-index : 默认的摆放规则，即不含有 z-index 属性时
2. Stacking and float : 浮动元素的处理方式
3. Adding z-index : 使用 z-index 来改变堆放顺序
4. The stacking context : 内容堆放注意事项
5. Stacking context example 1 : 在两层元素的第二层上使用 z-index
6. Stacking context example 2 : 在两层元素的所有层上使用 z-index
7. Stacking context example 3 : 在三层元素的第二层上使用 z-index
原始文档信息
------

* 作者：Paolo Lombardi
* This article is the English translation of an article I wrote in Italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* 上次更新时间：2005 年 7 月 9 日


Stacking context example 1 - CSS：层叠样式表

Stacking context example 1
==========================

### Stacking context 层叠上下文 例子 1

先看一个基础的例子。在根元素的层叠上下文中，有两个都是相对定位且没有设置 `z-index` 属性的 DIV（DIV #1 和 DIV #3）。在 DIV #1 中有一个绝对定位的 DIV #2，而在 DIV #3 中有一个绝对定位的 DIV #4，DIV #2 和 DIV #4 也都没有设置 `z-index` 属性。

现在唯一的层叠上下文就是根元素的上下文。因为没有 `z-index` 值，所有的元素按照出现（在 HTML 中）的顺序层叠。

![Stacking context example 1](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05a.png)

如果给 DIV #2 设置一个正的 `z-index` 值 (不能是 `0` 或 `auto`) ，那么 DIV #2 会渲染在其他所有 DIV 之上。

![Stacking context example 1](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05b.png)

然后如果给 DIV #4 也设置一个正的 `z-index` 值，且这个值比给的 DIV #2 设置的值要大，则 DIV #4 会渲染在其他所有 DIV（包括 DIV #2）之上。

![Stacking context example 1](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05c.png)

在这个列子中，DIV #2 和 DIV #4 不是兄弟关系（因为它们的父元素不同）。即便如此，我们也可以通过 `z-index` 来控制 DIV #4 和 DIV #2 的层叠关系。这是因为，DIV #1 和 DIV #3 没有设置 `z-index` 的值，所以它们不会创建层叠上下文。这就意味着 DIV #1 和 DIV #3 的所有内容（包括 DIV #2 和 DIV #4）都属于同一个层叠上下文（即根元素的层叠上下文）。

就层叠上下文而言，DIV #1 和 DIV #3 隶属于根元素，因此层次结构如下所示：

* 根层叠上下文（root stacking context）
    + DIV #2 (z-index 1)
    + DIV #4 (z-index 2)

**备注：** DIV #1 和 DIV #3 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文（和给元素增加一个 z-index 值的效果相同）。上述的例子是为了说明，当父元素没有生成一个层叠上下文环境的时候，各元素是怎么层叠的。

示例
--

### HTML

```html
<div id="div1">
<br /><span class="bold">DIV #1</span>
<br />position: relative;
   <div id="div2">
   <br /><span class="bold">DIV #2</span>
   <br />position: absolute;
   <br />z-index: 1;
   </div>
</div>

<br />

<div id="div3">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
   <div id="div4">
   <br /><span class="bold">DIV #4</span>
   <br />position: absolute;
   <br />z-index: 2;
   </div>
</div>

</body></html>
```

### CSS

```css
.bold {
  font-weight: bold;
  font: 12px Arial;
}
#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}
#div2 {
  opacity: 0.8;
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}
#div4 {
  opacity: 0.8;
  z-index: 2;
  position: absolute;
  width: 200px;
  height: 70px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}
```

### Result

### See also

* Stacking without z-index : Default stacking rules
* Stacking and float : How floating elements are handled
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


Adding z-index - CSS：层叠样式表

Adding z-index
==============

### 使用 `z-index`

在第一个例子 Stacking without z-index中，我们描述了默认的摆放顺序。当你需要指定不同的排列顺序时，只要给元素指定一个 z-index 的数值就可以了。

该属性必须是整数 (正负均可)，它体现了元素在 z 轴的位置。如果你对 z 轴体系不了解，你也可以把它理解成“层叠”，每个层都有一个顺序数，顺序数大的层在上面，小的在下面。

**注意！z-index 只对指定了** positioned**属性的元素有效。**

* *底层：距离观察者最远*
* ...
* -3 层
* -2 层
* -1 层
* 0 层 *默认层*
* 1 层
* 2 层
* 3 层
* ...
* *顶部：最接近观察者*

**备注：**

* 当没有指定 z-index 的时候，所有元素都在会被渲染在默认层 (0 层)
* 当多个元素的 z-index 属性相同的时候 (在同一个层里面)，那么将按照 Stacking without z-index 中描述的规则进行布局。

在下一个例子中，所有的层都是用 z-index 进行排序的。元素 div#5 的 z-index 无效，因为他没有被指定 position 属性。

### Example source code

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
 div {
 opacity: 0.7;
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 #normdiv {
 z-index: 8;
 height: 70px;
 border: 1px dashed #999966;
 background-color: #ffffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #reldiv1 {
 z-index: 3;
 height: 100px;
 position: relative;
 top: 30px;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #reldiv2 {
 z-index: 2;
 height: 100px;
 position: relative;
 top: 15px;
 left: 20px;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #absdiv1 {
 z-index: 5;
 position: absolute;
 width: 150px;
 height: 350px;
 top: 10px;
 left: 10px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }

 #absdiv2 {
 z-index: 1;
 position: absolute;
 width: 150px;
 height: 350px;
 top: 10px;
 right: 10px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }
 </style>
  </head>

  <body>
    <br /><br />

    <div id="absdiv1">
      <br /><span class="bold">DIV #1</span> <br />position: absolute;
      <br />z-index: 5;
    </div>

    <div id="reldiv1">
      <br /><span class="bold">DIV #2</span> <br />position: relative;
      <br />z-index: 3;
    </div>

    <div id="reldiv2">
      <br /><span class="bold">DIV #3</span> <br />position: relative;
      <br />z-index: 2;
    </div>

    <div id="absdiv2">
      <br /><span class="bold">DIV #4</span> <br />position: absolute;
      <br />z-index: 1;
    </div>

    <div id="normdiv">
      <br /><span class="bold">DIV #5</span> <br />no positioning <br />z-index:
      8;
    </div>
  </body>
</html>
```

### See also

* Stacking without z-index : Default stacking rules
* Stacking and float : How floating elements are handled
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


Stacking context example 2 - CSS：层叠样式表

Stacking context example 2
==========================

### 层叠上下文示例 2

这是一个非常简单的例子，但它是理解层叠上下文这个概念的关键。还是和之前的例子中一样的四个 DIV，不过现在 z-index 属性被分配在两个水平的层次结构中。

可以看到现在 DIV #2 (z-index: 2) 在 DIV #3 (z-index: 1) 的上面，因为他们都属于同一个层叠上下文（根元素创建的层叠上下文），所以 z-index 的值决定了元素如何叠放。

奇怪的是 DIV #2 (z-index: 2) 在 DIV #4 (z-index: 10) 的上面，尽管 DIV #2 的 z-index 值小于 DIV #4。原因在于它们不属于同一个层叠上下文。DIV #4 处于 DIV #3 所创建的层叠上下文中，而整个 DIV #3（包含其后代元素）是在 DIV #2 下面的。

为了更好的理解这种情况，这里列出了层叠上下文的层次结构：

* 根上下文（root stacking context）
    + DIV #2 (z-index 2)
    + DIV #3 (z-index 1)
        - DIV #4 (z-index 10)

**备注：** 值得记住的是，通常 HTML 的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。

### 示例源码

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
 div {
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 #div2 {
 z-index: 2;
 }
 #div3 {
 z-index: 1;
 }
 #div4 {
 z-index: 10;
 }

 #div1,
 #div3 {
 height: 80px;
 position: relative;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 padding-left: 5px;
 }

 #div2 {
 opacity: 0.8;
 position: absolute;
 width: 150px;
 height: 200px;
 top: 20px;
 left: 170px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }

 #div4 {
 opacity: 0.8;
 position: absolute;
 width: 200px;
 height: 70px;
 top: 65px;
 left: 50px;
 border: 1px dashed #000099;
 background-color: #ddddff;
 text-align: left;
 padding-left: 10px;
 }
 </style>
  </head>

  <body>
    <br />

    <div id="div1">
      <br />
      <span class="bold">DIV #1</span><br />
      position: relative;
      <div id="div2">
        <br />
        <span class="bold">DIV #2</span><br />
        position: absolute;<br />
        z-index: 2;
      </div>
    </div>

    <br />

    <div id="div3">
      <br />
      <span class="bold">DIV #3</span><br />
      position: relative;<br />
      z-index: 1;
      <div id="div4">
        <br />
        <span class="bold">DIV #4</span><br />
        position: absolute;<br />
        z-index: 10;
      </div>
    </div>
  </body>
</html>
```

### 相关文章

* Stacking without z-index : Default stacking rules
* Stacking and float : How floating elements are handled
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### 原文信息

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


层叠上下文 - CSS：层叠样式表

层叠上下文
=====

我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，**层叠上下文**就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

层叠上下文
-----

在本篇之前的部分——运用 z-index，（我们认识到）某些元素的渲染顺序是由其 `z-index` 的值影响的。这是因为这些元素具有能够使他们形成一个*层叠上下文*的特殊属性。

文档中的层叠上下文由满足以下任意一个条件的元素形成：

* 文档根元素（`<html>`）；
* `position` 值为 `absolute`（绝对定位）或 `relative`（相对定位）且 `z-index` 值不为 `auto` 的元素；
* `position` 值为 `fixed`（固定定位）或 `sticky`（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
* flex (`flex`) 容器的子元素，且 `z-index` 值不为 `auto`；
* grid (`grid`) 容器的子元素，且 `z-index` 值不为 `auto`；
* `opacity` 属性值小于 `1` 的元素（参见 the specification for opacity）；
* `mix-blend-mode` 属性值不为 `normal` 的元素；
* 以下任意属性值不为 `none` 的元素：
    + `transform`
    + `filter`
    + `backdrop-filter`
    + `perspective`
    + `clip-path`
    + `mask` / `mask-image` / `mask-border`
* `isolation` 属性值为 `isolate` 的元素；
* `will-change` 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
* `contain` 属性值为 `layout`、`paint` 或包含它们其中之一的合成值（比如 `contain: strict`、`contain: content`）的元素。

在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。重要的是，其子级层叠上下文的 `z-index` 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

总结：

* 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
* 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
* 每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。

**备注：** 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文*同化*。

示例
--

![Example of stacking rules modified using z-index](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context/understanding_zindex_04.png)

在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 `z-index` 值。我们把层叠上下文的层级列在下面：

* Root
    + DIV #1
    + DIV #2
    + DIV #3
        - DIV #4
        - DIV #5
        - DIV #6

请一定要注意 DIV #4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。

**备注：**

* DIV #4 被渲染在 DIV #1 之下，因为 DIV #1 的 z-index (5) 在 root 元素的层叠上下文中生效，而 DIV #4 的 z-index (6) 在 DIV #3 的层叠上下文中生效。因此，DIV #4 在 DIV #1 之下，因为 DIV #4 归属于 z-index 值较低的 DIV #3 元素。
* 由此可得 DIV #2 (z-index 2) 被渲染在 DIV #5 (z-index 1) 之下，因为 DIV #5 归属于 z-index 较高的 DIV #3 元素。
* DIV #3 的 z-index 值是 4，但是这个值独立于 DIV #4，DIV #5 和 DIV #6 的 z-index 值，因为他们从属于不同的层叠上下文。
* 分辨出层叠的元素在 Z 轴上的*渲染顺序*的一个简单方法是将它们想象成一系列的版本号，子元素是其父元素版本号之下的次要版本。通过这个方法我们可以轻松地看出为什么一个 z-index 为 1 的元素（DIV #5）层叠于一个 z-index 为 2 的元素（DIV #2）之上，而一个 z-index 为 6 的元素（DIV #4）层叠于 z-index 为 5 的元素（DIV #1）之下。在我们的例子中（依照最终渲染次序排列）：
    + Root
        - DIV #2 - z-index 为 2
        - DIV #3 - z-index 为 4
            * DIV #5 - z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1
            * DIV #6 - z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3
            * DIV #4 - z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6
        - DIV #1 - z-index 为 5

示例源码
----

### HTML
```

<div id="div1">
  <h1>Division Element #1</h1>
  <code>position: relative;<br/>
  z-index: 5;</code>
</div>

<div id="div2">
  <h1>Division Element #2</h1>
  <code>position: relative;<br/>
  z-index: 2;</code>
</div>

<div id="div3">
  <div id="div4">
    <h1>Division Element #4</h1>
    <code>position: relative;<br/>
    z-index: 6;</code>
  </div>

  <h1>Division Element #3</h1>
  <code>position: absolute;<br/>
  z-index: 4;</code>

  <div id="div5">
    <h1>Division Element #5</h1>
    <code>position: relative;<br/>
    z-index: 1;</code>
  </div>

  <div id="div6">
    <h1>Division Element #6</h1>
    <code>position: absolute;<br/>
    z-index: 3;</code>
  </div>
</div>
```

### CSS

```css
\* {
  margin: 0;
}
html {
  padding: 20px;
  font:
    12px/20px Arial,
    sans-serif;
}
div {
  opacity: 0.7;
  position: relative;
}
h1 {
  font: inherit;
  font-weight: bold;
}
#div1,
#div2 {
  border: 1px dashed #696;
  padding: 10px;
  background-color: #cfc;
}
#div1 {
  z-index: 5;
  margin-bottom: 190px;
}
#div2 {
  z-index: 2;
}
#div3 {
  z-index: 4;
  opacity: 1;
  position: absolute;
  top: 40px;
  left: 180px;
  width: 330px;
  border: 1px dashed #900;
  background-color: #fdd;
  padding: 40px 20px 20px;
}
#div4,
#div5 {
  border: 1px dashed #996;
  background-color: #ffc;
}
#div4 {
  z-index: 6;
  margin-bottom: 15px;
  padding: 25px 10px 5px;
}
#div5 {
  z-index: 1;
  margin-top: 15px;
  padding: 5px 10px;
}
#div6 {
  z-index: 3;
  position: absolute;
  top: 20px;
  left: 180px;
  width: 150px;
  height: 125px;
  border: 1px dashed #009;
  padding-top: 125px;
  background-color: #ddf;
  text-align: center;
}
```

### Result

参考
--

* Stacking without the z-index property: The stacking rules that apply when `z-index` is not used.
* Stacking with floated blocks: How floating elements are handled with stacking.
* Using z-index: How to use `z-index` to change default stacking.
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
原始文档信息
------

* 作者：Paolo Lombardi
* 此文是我用意大利语写给 YappY 的英文版本。我授权以 Creative Commons: Attribution-Sharealike license 将所有内容分享。
* 上次更新时间：July 9th, 2005


层叠与浮动 - CSS：层叠样式表

层叠与浮动
=====

### 层叠与浮动

对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间：

1. 根元素的背景与边框
2. 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
3. 浮动块元素
4. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠

实际上，在接下来的例子中你会看到，非定位块元素 (DIV #4) 的背景与边框丝毫不会受到浮动块元素的影响，但内容却恰恰相反。出现这种情况是由于 CSS 的标准浮动行为引起的。

这种行为可以通过前一章列表的改进版本来解释：

1. 根元素的背景与边框
2. 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
3. 浮动块元素
4. 常规流中的后代行内元素
5. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠

**备注：** 在下面的例子中，除了非定位的那个块元素外，所有的块元素都是半透明的，以便来显示层叠顺序。如果减少非定位元素 (DIV #4) 的透明度，会发生很诡异的事情：该元素的背景和边框会出现在浮动块元素上方，但是仍然处于定位元素的下方。我不能确定这是规范的 bug 或是怪异的解析。(设置透明度会隐式的创建一个层叠上下文。)

### 该示例的源码

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Stacking and float</title>
    <style type="text/css">
 div {
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 #absdiv1 {
 position: absolute;
 width: 150px;
 height: 200px;
 top: 10px;
 right: 140px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }

 #normdiv {
 /\* opacity: 0.7; \*/
 height: 100px;
 border: 1px dashed #999966;
 background-color: #ffffcc;
 margin: 0px 10px 0px 10px;
 text-align: left;
 }

 #flodiv1 {
 margin: 0px 10px 0px 20px;
 float: left;
 width: 150px;
 height: 200px;
 border: 1px dashed #009900;
 background-color: #ccffcc;
 text-align: center;
 }

 #flodiv2 {
 margin: 0px 20px 0px 10px;
 float: right;
 width: 150px;
 height: 200px;
 border: 1px dashed #009900;
 background-color: #ccffcc;
 text-align: center;
 }

 #absdiv2 {
 position: absolute;
 width: 150px;
 height: 100px;
 top: 130px;
 left: 100px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }
 </style>
  </head>

  <body>
    <br /><br />

    <div id="absdiv1">
      <br /><span class="bold">DIV #1</span> <br />position: absolute;
    </div>

    <div id="flodiv1">
      <br /><span class="bold">DIV #2</span> <br />float: left;
    </div>

    <div id="flodiv2">
      <br /><span class="bold">DIV #3</span> <br />float: right;
    </div>

    <br />

    <div id="normdiv">
      <br /><span class="bold">DIV #4</span> <br />no positioning
    </div>

    <div id="absdiv2">
      <br /><span class="bold">DIV #5</span> <br />position: absolute;
    </div>
  </body>
</html>
```

### 相关链接

* 未使用 z-index 的层叠：默认层叠规则
* 使用 z-index 的层叠：使用 z-index 来改变默认层叠顺序
* 层叠上下文：关于层叠上下文的注意事项
* 层叠上下文示例 1：两层嵌套标签的 HTML 中，z-index 作用在内层标签上
* 层叠上下文示例 2：两层嵌套标签的 HTML 中，z-index 作用在内外层标签上
* 层叠上下文示例 3：三层嵌套标签的 HTML 中，z-index 作用在中间层标签上
### 原始文档信息

* 作者：Paolo Lombardi
* 该文档的英文原始版本是从我为 YappY 写的意大利文章翻译而来的，该文章版权为 Creative Commons: Attribution-Sharealike license
* 上次更新于：2014 年 11 月 3 日


Stacking without z-index - CSS：层叠样式表

Stacking without z-index
========================

### 不含 z-index 的堆叠

当没有元素包含 z-index 属性时，元素按照如下顺序堆叠（从底到顶顺序）：

1. 根元素的背景和边界
2. 普通流 (无定位) 里的块元素 (没有 position 或者 position:static;) 按 HTML 中的出现顺序堆叠
3. 定位元素按 HTML 中的出现顺序堆叠

在接下来的例子中，相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。

**备注：**

* 在一组由不含有任何 z-index 属性的同类元素，如例子中的定位块元素（DIV #1 至 #4），这些元素按照它们在 HTML 结构中出现的顺序堆叠，而不管它们的定位属性如何。
* 普通流中不含有定位属性的标准块元素（DIV #5）始终先于定位元素渲染并出现在定位元素的下层，即便它们在 HTML 结构中出现的位置晚于定位元素也是如此。

### 示例

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
 div {
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 #normdiv {
 height: 70px;
 border: 1px dashed #999966;
 background-color: #ffffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #reldiv1 {
 opacity: 0.7;
 height: 100px;
 position: relative;
 top: 30px;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #reldiv2 {
 opacity: 0.7;
 height: 100px;
 position: relative;
 top: 15px;
 left: 20px;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #absdiv1 {
 opacity: 0.7;
 position: absolute;
 width: 150px;
 height: 350px;
 top: 10px;
 left: 10px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }

 #absdiv2 {
 opacity: 0.7;
 position: absolute;
 width: 150px;
 height: 350px;
 top: 10px;
 right: 10px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }
 </style>
  </head>

  <body>
    <br /><br />

    <div id="absdiv1">
      <br /><span class="bold">DIV #1</span> <br />position: absolute;
    </div>

    <div id="reldiv1">
      <br /><span class="bold">DIV #2</span> <br />position: relative;
    </div>

    <div id="reldiv2">
      <br /><span class="bold">DIV #3</span> <br />position: relative;
    </div>

    <div id="absdiv2">
      <br /><span class="bold">DIV #4</span> <br />position: absolute;
    </div>

    <div id="normdiv">
      <br /><span class="bold">DIV #5</span> <br />no positioning
    </div>
  </body>
</html>
```

### See also

* 堆叠与浮动 : 浮动元素的处理方式
* 增加 z-index : 使用 z-index 来改变堆放顺序
* 堆叠上下文 : 堆叠上下文的注意事项
* 堆叠上下文示例 1 : 在两层元素的第二层上使用 z-index
* 堆叠上下文示例 2 : 在两层元素的所有层上使用 z-index
* 堆叠上下文示例 3 : 在三层元素的第二层上使用 z-index
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


Stacking context example 3 - CSS：层叠样式表

Stacking context example 3
==========================

### 层叠上下文示例 3

最后一个例子展示了，在多层级的 HTML 结构中混合了多个定位元素且使用类选择器设置 z-index 属性时出现的问题。

我们来看一个用多个定位的 div 实现的三级菜单的例子，二级菜单和三级菜单在鼠标悬停或点击其父元素时才出现，通常这样的菜单在客户端和服务端都是由脚本生成的，所以样式规则不是通过 ID 选择器设置而是通过类选择器设置。

如果这个三级菜单有部分区域重叠，管理层叠顺序就会成为一个问题。

一级菜单仅仅是相对定位，所以没有创建层叠上下文。

二级菜单相对其父元素（一级菜单）绝对定位，要使二级菜单在所有一级菜单的上方，则需要使用 z-index。此时每个二级菜单都创建了一个层叠上下文，而三级菜单也处于其父元素（二级菜单）创建的上下文中。

这样一来，在 HTML 结构中处于三级菜单后面的二级菜单，则会显示在三级菜单的上方，因为所有的二级菜单都使用了同样的 z-index 值，所以处于同一个层叠上下文中。

为了能更好地理解这种情况，这里列出了层叠上下文的层次结构：

* root stacking context
    + LEVEL #1
        - LEVEL #2 (z-index: 1)
            * LEVEL #3
            * ...
            * LEVEL #3
        - LEVEL #2 (z-index: 1)
        - ...
        - LEVEL #2 (z-index: 1)
    + LEVEL #1
    + ...
    + LEVEL #1

可以通过移除不同级别的菜单之间的重叠，或者使用 ID 选择器指定独立的（不同的）z-index 值，或者减少 HTML 的层级来解决这个问题。

**备注：** 在源码中你会看到三级菜单和二级菜单是由一个绝对定位元素包含很多 div 来实现的，这种方式在需要同时定位一组元素时很有用。

### 示例源码

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
 div {
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 div.lev1 {
 width: 250px;
 height: 70px;
 position: relative;
 border: 2px outset #669966;
 background-color: #ccffcc;
 padding-left: 5px;
 }

 #container1 {
 z-index: 1;
 position: absolute;
 top: 30px;
 left: 75px;
 }

 div.lev2 {
 opacity: 0.9;
 width: 200px;
 height: 60px;
 position: relative;
 border: 2px outset #990000;
 background-color: #ffdddd;
 padding-left: 5px;
 }

 #container2 {
 z-index: 1;
 position: absolute;
 top: 20px;
 left: 110px;
 }

 div.lev3 {
 z-index: 10;
 width: 100px;
 position: relative;
 border: 2px outset #000099;
 background-color: #ddddff;
 padding-left: 5px;
 }
 </style>
  </head>

  <body>
    <br />

    <div class="lev1">
      <span class="bold">LEVEL #1</span>

      <div id="container1">
        <div class="lev2">
          <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;

          <div id="container2">
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
          </div>
        </div>

        <div class="lev2">
          <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
        </div>
      </div>
    </div>

    <div class="lev1">
      <span class="bold">LEVEL #1</span>
    </div>

    <div class="lev1">
      <span class="bold">LEVEL #1</span>
    </div>

    <div class="lev1">
      <span class="bold">LEVEL #1</span>
    </div>
  </body>
</html>
```

### 相关文章

* Stacking without z-index : Default stacking rules
* Stacking and float : How floating elements are handled
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
### 原文信息

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005

**Note**: the reason the sample image looks wrong - with the second level 2 overlapping the level 3 menus - is because level 2 has opacity, which creates a new stacking context. Basically, this whole sample page is incorrect and misleading.


常规流中的块和内联布局 - CSS：层叠样式表

常规流中的块和内联布局
===========

在这篇指南中，我们会探讨块级元素和内联元素在常规流中是怎样工作的。

在 CSS 2.1 规范中我们定义了常规流（Normal Flow）。常规流中的任何一个盒子总是某个*格式区域*（*formatting context*）中的一部分。块级盒子是在*块格式区域*（*block formatting context*）中工作的盒子，而内联盒子是在*内联格式区域*（*inline formatting context*）中工作的盒子。任何一个盒子总是块级盒子或内联盒子中的一种。

规范中还规定了块格式区域与内联格式区域中的元素行为。对于块级格式环境，规范内规定：

>
> “在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。
>
>
> 在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）。” - 9.4.1
>
>
>

对于内联格式区域中的元素：

>
> “在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。” - 9.4.2
>
>
>

需要注意的是，CSS 2.1 规范将文档的书写模式定义为从上到下横板排布，这从块级盒子的垂直间距这一属性就能看出来。在竖版书写模式工作时，块元素和内联元素的行为是相同的，关于这个我们将在未来的流布局与书写模式指南中进行探讨。

块格式区域中的元素
---------

比如在英语环境中，块元素工作于横板书写模式中，此时的块元素会垂直排布，一个在另一个之下。

![](/zh-CN/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow/mdn-horizontal.png)

而在竖版书写模式中，块元素会水平排布。

![](/zh-CN/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow/mdn-vertical.png)

在本指南的例子中，我们使用的是英语，因此会按横板模式进行书写。不过，即使你的文档是按照竖版模式进行书写的，描述的所有内容也都应该以相同的方式工作。

如规范中所定义，外边距使得两个块级盒子分开。这个例子展示了一个非常简单的由两个段落组成的排版，每个段落都加了一个边框。浏览器的默认样式表通过增加外边距（margin）的方式在每个段落的顶部和底部留出一定空间。

如果我们将 p 元素的边距设置为 0，两个边框会紧贴在一起。

默认情况下，块级元素将占据这一内联方向的所有空间，因此我们的段落会铺开分布在多行，尽可能排满他的包含块。如果限定了段落元素的宽度，第二个段落仍然会排布在第一个段落的下面——即使有足够空间使它们并排。每个块级元素都会从包含块的起始边开始，因此，在当前书写模式下，所有句子会从包含块的起始边开始。

### 外边距折叠

在规范中提到，块级元素之间的外边距会发生折叠。这意味着，如果一个具有上边距的元素排在在一个具有下边距的元素之下时，他们之间的间距不会是这两个外边距的和，即外边距会发生折叠，简单来说就是，间距与两个外边距中的较大者一样大。

在下面的例子中，段落的上边距设为`20px`，下边距设为`40px`，而段落之间的间距大小会是`40px`。这是因为第二段中的上边距比较小被折叠，间距跟随了第一个段落更大的下边距。

你可以在我们的文章《掌握外边距折叠》中阅读更多关于这一部分的内容。

**备注：** 如果不确定是否发生了外边距折叠，你可以使用浏览器的开发人员工具查看盒模型。准确的外边距值可以帮助你判断是否有外边距折叠发生。

![](/zh-CN/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow/box-model.png)

内联格式区域中的元素
----------

内联元素按照句子在特定书写模式下运行的方向依次显示。虽然我们不倾向于认为内联元素有一个框，就像 CSS 中的所有元素一样。这些内嵌的盒子一个接一个排列。如果包含块中没有足够的空间容纳所有框，则框可以换行。创建的行称为行框。

在下面的示例中，我们有三个由段落创建的内联框，其中包含一个强元素。

在强元素前和强元素后的单词周围的框称为匿名框，引入的框确保所有内容都包装在一个框中，但我们不能直接针对它们。

块方向上的线框大小（以英文工作时的高度为准）由其内部最高的框定义。在下一个示例中，我将强元素 300% 设为内容，该内容现在定义了该行上行框的高度。

在我们的视觉格式模型指南中，了解更多关于块和内联框的行为。

显示属性和流布局
--------

除了 CSS2.1 中现有的规则之外，新级别的 CSS 还进一步描述了块和内联框的行为。“显示”属性定义框及其内部的所有框的行为方式。在 CSS 显示模型级别 3 中，我们可以进一步了解显示属性如何更改框及其生成的框的行为。

一个元素的显示类型定义了外部显示类型，这规定了该框如何与同一格式上下文中的其他元素一起显示。它还定义了内部显示类型，该类型指示此元素内的框的行为方式。在考虑灵活布局时，我们可以很清楚地看到这一点。在下面的示例中，我有一个 DIV，我已经给出了 display:flex。flex 容器的行为类似于一个块元素，它显示在一条新行上，并占用它在内联方向上可以占用的所有空间。这是块的外部显示类型。

但是，flex 项正在参与 flex 格式上下文，因为它们的父级是带有 display:flex 的元素，后者具有 flex 的内部显示类型，为直接子级建立 flex 格式上下文。

因此，你可以想到 CSS 中的每个框都是以这种方式工作的。盒子本身有一个外部显示类型，所以它知道如何与其他盒子一起工作。然后它有一个内部显示类型，它改变了它的子对象的行为方式。然后，这些子级也有一个外部和内部显示类型。上一个示例中的 flex 项变为 flex 级别框，因此它们的外部显示类型取决于它们是 flex 格式上下文的一部分。然而，他们有一种内在的流动显示类型，这意味着他们的孩子参与正常的流动。嵌套在 flex 项中的项将自己设置为块和内联元素，除非有什么改变了它们的显示类型。

外部和内部显示类型的概念很重要，因为这告诉我们，由于这些方法的外部显示类型为块，因此使用 flexbox（display:flex）和 grid layout（display:grid）等布局方法的容器仍在参与块和内联布局。

### 更改元素参与的格式上下文

浏览器将项目显示为块或内联格式上下文的一部分，根据该元素通常的意义。例如，强元素用于突出显示单词，并在浏览器中显示粗体。一般来说，将该强元素显示为块级元素并中断到新行是没有意义的。如果确实希望所有强元素显示为块元素，可以通过将 display:block 设置为强来实现。这意味着你可以始终使用最语义的 HTML 元素标记内容，然后使用 CSS 更改其显示方式。

总结
--

在本指南中，我们研究了元素在正常流中如何显示为块和内联元素。由于这些元素的默认行为，一个完全没有 CSS 样式的 HTML 文档将以可读的方式显示。通过了解正常流的工作方式，你将更容易找到布局，因为你了解更改元素显示方式的起点。

参见
--

* CSS Basic Box Model
* *Normal Flow* - Learn Layout
* Inline elements
* Block-level elements


Introduction to formatting contexts 格式化上下文简介 - CSS：层叠样式表

Introduction to formatting contexts 格式化上下文简介
============================================

 本文介绍格式化上下文的概念，其中有几种类型，包括块格式化上下文 block formatting contexts、内联格式化上下文 inline formatting contexts 和灵活格式化上下文 flex formatting contexts。还介绍了它们的基本行为以及如何利用这些行为。
 页面上的所有内容都是**格式化上下文 formatting context** 的一部分，或者是一个以特定方式显示的区域。\*\*块格式上下文（BFC）\*\*将根据块布局规则布局子元素，**灵活格式上下文 flex formatting context** 将其子元素布局为灵活项flex items等。每个格式上下文在其上下文中都有特定的布局规则。
Block formatting contexts 块格式化上下文
---------------------------------

文档最外层元素使用块布局规则或称为**初始块格式上下文**。这意味着`<html>`元素块中的每个元素都是按照正常流程遵循块和内联布局规则进行布局的。参与 BFC 的元素使用 CSS 框模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。

### 创建新的块格式上下文

`<html>` 元素不是唯一能够创建块格式上下文的元素。任何块级元素都可以通过应用某些 CSS 属性来创建一个 BFC

除了文档的根元素 (`<html>`) 之外，还将在以下情况下创建一个新的 BFC：

* 使用`float` 使其浮动的元素
* 绝对定位的元素 (包含 `position: fixed` 或`position: sticky`
* 使用以下属性的元素 `display: inline-block`
* 表格单元格或使用 `display: table-cell`, 包括使用 `display: table-*` 属性的所有表格单元格
* 表格标题或使用 `display: table-caption` 的元素
* 块级元素的 overflow 属性不为 `visible`
* 元素属性为 `display: flow-root` 或 `display: flow-root list-item`
* 元素属性为 `contain: layout`, `content`, 或 `strict`
* flex items
* 网格布局元素
* multicol containers
* 元素属性 `column-span` 设置为 `all`

这很有用，因为新的 BFC 的行为与最外层的文档非常相似，它在主布局中创造了一个小布局。BFC 包含其内部的所有内容，`float` 和 `clear` 仅适用于同一格式上下文中的项目，而页边距仅在同一格式上下文中的元素之间折叠。

### BFC 创建例子

让我们看看几个例子，来理解创建 BFC 的效果。

在下面的示例中，我们在应用了边框的 `<div>` 中有一个浮动元素。该 `div` 的内容与浮动元素一起浮动。由于 float 的内容比它旁边的内容高，所以现在 DIV 的边框贯穿了 float。如流入和流出元素指南guide to in-flow and out of flow elements中所述，浮动已脱离文档流，因此 DIV 的背景和边框仅包含内容，而不包含浮动。

创建一个新的 BFC 将包含该浮动。在过去，一种典型的方法是设置 `overflow: auto` 或设置其他不是 `overflow: visible` 的值。

 设置 `overflow: auto` 会自动创建包含浮动的新 BFC。现在，我们的 DIV 在布局中变成了一个迷你布局。任何子元素都将包含在其中。

使用 `overflow` 创建新的 BFC 的问题在于， `overflow` 属性用于告诉浏览器你希望如何处理溢出的内容。在某些情况下，当你纯粹使用此属性创建 BFC 时，你会发现不需要的滚动条或剪切阴影。另外，对于未来的开发人员来说，它可能不太可读，因为不能显式地表明为什么要使用溢出来实现这一目的。如果你使用了这个方法，最好对代码进行注释以便他人理解。

### 使用 display:flow-root 显式创建 BFC

使用 `display: flow-root` （或 `display: flow-root list-item`）将创建一个新的 BFC，而不会产生任何其他潜在的问题副作用。

使用 `<div>`上的 `display: flow-root` ，该容器内的所有内容都参与该容器的块格式上下文，并且浮动不会从元素底部弹出。

`flow-root` 关键字的意义是，创建的内容本质上类似于一个新的根元素（如 `<html>`所做），并确定这个新的上下文如何创建及其流布局如何实现。

行内格式化上下文
--------

内联格式上下文存在于其他格式上下文中，可以将其视为段落的上下文。段落创建了一个内联格式上下文，其中在文本中使用诸如 `<strong>`、`<a>`或 `<span>` 元素等内容。

box model 不完全适用于参与内联格式上下文。在水平书写模式行中，水平填充、边框和边距将应用于元素，并左右移动文本。但是，元素上方和下方边距将不适用。应用垂直填充和边框可能会在内容的上方和下方重叠，因为在内联格式上下文中，填充和边框不会将行框撑开。

其他格式上下文
-------

本指南涵盖了流式布局，因此不涉及其他可能的格式上下文。因此，了解创建任何类型的格式上下文都将改变该格式上下文中元素的行为方式是很有用的。这种行为总是在规范中描述的，在 MDN 中也有描述。

总结
--

在本指南中，我们更详细地介绍了块和内联格式上下文以及创建块格式上下文（BFC）的重要主题。在下一个指南中，我们将了解正常流如何与不同的写入模式交互 how normal flow interacts with different writing modes。

另请参见
----

* Block formatting context
* Visual Formatting Model
* CSS Box Model


流布局和溢出 - CSS：层叠样式表

流布局和溢出
======

当容器中的内容超过可容纳的范围时，就会发生溢出情况。了解溢出的行为对于处理 CSS 中大小受限的任何元素都很重要。本指南解释了使用正常流时溢出是如何工作的。

什么是溢出？
------

为元素赋予固定的高度和宽度，然后向框中添加重要内容，将创建一个基本的溢出示例：

内容将进入框中。一旦填充了该框，它将继续以可见的方式溢出，在框外显示内容，可能在随后的内容下显示。控制溢出行为的属性是初始值为 `visible` 的 `overflow` 属性。这就是为什么我们可以看到溢出内容。

控制溢出
----

还有其他值控制溢出内容的行为。要隐藏溢出的内容，请使用值 `hidden`。这可能会导致某些内容不可见。

使用值 `scroll` 包含其框中的内容，并添加滚动条以启用查看。即使内容适合该框，也将添加滚动条。

如果内容适合方框，则使用值 auto 将显示不带滚动条的内容。如果它不适合，则会添加滚动条。将下一个示例与溢出示例进行比较：当溢出滚动只需要垂直滚动时，你应该看到它有水平滚动条和垂直滚动条。下面的自动示例只在我们需要滚动的直接位置添加滚动条。

正如我们已经了解的，使用这些值中的任何一个，而不是默认的 `visible`，都会创建一个新的块级格式化上下文。

注意：在 Overflow Level 3 的工作草案中，还有一个附加值 `overflow: clip`。这将类似于 `overflow: hidden`，但不允许编程滚动，框将变为不可滚动。此外，它不会创建块格式上下文。

实际上，overflow 属性是 `overflow-x` 和 `overflow-y` 属性的简写。如果只为溢出指定一个值，则此值用于两个轴。但是，你可以指定两个值，在这种情况下，第一个值用于 `overflow-x`，因此是水平方向，第二个值用于 `overflow-y` 和垂直方向。在下面的示例中，我只指定了 `overflow-y: scroll`，这样我们就不会得到不需要的水平滚动条。

流相对属性
-----

在书写模式和流布局指南中，我们研究了 `block-size` 和 `inline-size` 这两个较新的属性，这些属性在使用不同的编写模式时比将布局与屏幕的物理尺寸联系起来更有意义。3 级溢出模块还包括溢出——`overflow-block` 和 `overflow-inline` 的流相关属性。这些对应于 `overflow-x` 和 `overflow-y`，但映射取决于文档的书写模式。

这些属性当前在浏览器中没有实现，因此你需要在当前使用物理属性并根据你的书写模式进行调整。

指示溢出
----

在 3 级溢出规范中，我们有一些属性可以帮助改进溢出情况下内容的外观。

### 行轴溢出

`text-overflow` 属性处理行方的文本溢出。它采用两个值 `clip` 中的一个值，在这种情况下，内容在溢出时被剪裁，这是初始值，因此是默认行为。我们还有一个省略号，它呈现了一个省略号，可以用一个更好的字符来替换使用中的语言或书写模式。

### 块轴溢出

还有一个关于块溢出属性的建议，尽管在编写名称时仍有待讨论。此建议将允许在块维度中文本溢出时添加省略号。

例如，在有文章列表的情况下，这很有用，并且在固定高度框中显示列表，而固定高度框只接受有限的文本量。对于读者来说，当单击框或标题时，可能不太明显有更多的内容需要单击。省略号清楚地表明有更多的内容。规范允许插入一个内容字符串或常规省略号。

总结
--

无论你是在 Web 上的连续媒体中，还是在页面媒体格式（如 print 或 epub）中，了解在处理任何布局方法时内容溢出是如何有用的。通过了解正常流中溢出的工作方式，你应该会发现更容易理解布局方法（如网格和弹性盒子）中溢出内容的含义。


流布局和书写模式 - CSS：层叠样式表

流布局和书写模式
========

CSS 2.1 规范详细描述了正常流的行为，它采用了水平书写模式。布局属性在垂直写入模式中的工作方式应该相同。在本指南中，我们将研究流布局在与不同的文档写入模式一起使用时的行为。

这不是 CSS 中书写模式使用的全面指南，这里的目的是以可能未预料到的方式记录流布局与书写模式交互的区域。本文档的参见章节链接了更多书写模式的资源。

书写模式规范
------

CSS 编写模式级别 3 规范定义了文档编写模式更改对流布局的影响。在书写模式介绍中，规范提到：

>
> “CSS 中的书写模式由 `writing-mode`、`direction` 和 `text-orientation` 属性决定。它主要是根据其内联基础方向和块流方向来定义的。”
>
>
>

规范将*行基本方向*定义为内容在行上的排序方向。这定义了内联方向的开始和结束。开始是句子开始的地方，结束是一行文本在开始换行之前结束的地方。

*块流方向*是框（例如段落）以该写入模式堆叠的方向。CSS 写入模式属性控制块流方向。如果要将页面或页面的一部分更改为 `vertical-lr`，则可以在元素上设置 `writing-mode: vertical-lr`，这将更改块的方向，因此也会更改行的方向。

虽然某些语言将使用特定的书写模式或文本方向，但我们也可以使用这些属性来产生创造性效果，例如垂直运行标题。

`writing-mode` 属性和块流
--------------------

`writing-mode` 属性接受以下值：`horizontal-tb`、`vertical-rl` 和 `vertical-lr`。这些值控制阻止页面流动的方向。初始值是 `horizontal-tb`，这是一个顶部到底部的块流方向，具有水平的行方向。从左到右的语言，如英语和从右到左的语言。如阿拉伯语，都是 `horizontal-tb`。

下面的示例显示了使用 `horizontal-tb` 的块。

`horizontal-tb` 值为你提供了一个从右到左的块流方向和一个垂直的内联方向，如下一个示例所示。

最后一个示例演示了第三个可能的 `writing-mode` 值——`vertical-lr`。这将为你提供一个从左到右的块流方向和一个垂直的行方向。

对父级具有不同写入模式的框
-------------

当一个嵌套框被分配给它的父级的不同的写入模式时，一个行级别的框将显示，就好像它有 `display: inline-block` 一样。

块级别的框将建立一个新的块格式上下文，这意味着如果其内部显示类型为 `flow`，则它将获得 `flow-root` 的计算显示类型。这在下一个示例中显示，其中显示为 `horizontal-tb` 的框包含一个浮动，该浮动是由于其父级建立了一个新的 BFC 而包含的。

替换的元素
-----

替换的元素（如图像）不会根据“写入模式”属性更改其方向。但是，替换的元素（如包含文本的表单控件）应与使用中的写入模式匹配。

逻辑属性和值
------

一旦你在书写模式（而不是 `horizontal-tb`）时，许多映射到屏幕物理维度的属性和值看起来很奇怪。例如，如果为一个框提供 100px 的宽度，以水平 tb 表示，它将控制行方向的大小。在 `vertical-lr` 中，它控制块方向的大小，因为它不随文本旋转。

因此，我们有了 `block-size` 和 `inline-size` 的新属性。如果我们给块一个 100px 的 `inline-size`，不管我们是处于水平还是垂直写入模式，`inline-size` 总是指行方向的大小。

CSS 逻辑属性和值规范包括用于控制页边距、填充和边框的属性的逻辑版本，以及用于我们通常使用物理方向指定的内容的其他映射。

总结
--

在大多数情况下，流程布局的工作方式与你在更改文档或文档部分的写入模式时所期望的一样。这可以用于正确排版垂直语言或出于创造性的原因。CSS 通过引入逻辑属性和值使这变得更容易，这样在垂直写入模式下工作时，大小调整可以基于元素的内联和块大小。这在创建可以在不同写入模式下工作的组件时很有用。

参见
--

* 书写模式
* 书写模式和 CSS 布局
* CSS 书写模式


In Flow and Out of Flow - CSS：层叠样式表

In Flow and Out of Flow
=======================

在之前的 文档中我解释了常规流中块（block）和行（inline）布局，常规流中的所有元素都会以这种布局方式运作。

在下面的例子中，我新建了一个标题（h1 元素），一个段落（p 元素），一个无序列表（ul 元素）和一个包含 strong 元素的段落（p 元素），标题和段落都是块级（block level），strong 元素为行级（inline）。列表中的项通过弹性盒布局排成一行，但是列表本身仍然处于块和内联布局中 - 他的 display 属性为 block。

可以说，示例中的所有元素都属于常规流，按照源代码中的顺序渲染到页面中。

脱离常规流的元素
--------

下列元素会脱离常规流：

* floated items。浮动的元素
* items with `position: absolute` (including `position: fixed` which acts in the same way)。通过设置 position 属性为 absolute 或者 fixed 的元素
* the root element (`html`) 根元素

脱离常规流的元素会创建一个新的块级格式化上下文（Block Formatting Context: BFC）环境，其中包含的所有元素构成了一个小的布局环境，与页面中的其他内容分隔开来。而根元素，作为页面中所有内容的容器，自身脱离常规流，为整个文档创建了一个块级格式化上下文环境。

### Floated Items

在这个例子中，我有一个 div，以及两个段落。我已经为段落添加了背景颜色，然后将 div 向左浮动。div 现在已经不再处于 flow 中了。

作为一个浮动的元素，它首先根据正常 flow 布局，然后从流动中取出并尽可能地向左移动

你可以看到下面段落的背景颜色在下面运行，只是该段落的行框已被缩短以导致在浮动周围包裹内容的效果。我们段落的方框仍然按照正常流程规则显示。这就是为什么要在浮动项目周围留出空间，必须为项目添加边距，以便将线框推离它。你无法对以下内插内容应用任何内容来实现此目的。

### Absolute Positioning

设置元素属性为 `position: absolute` 或者 `position: fixed` 会使此元素脱离文档流，他本来占据的空间也会被移除。在下面的例子中，我定义了三个 p 元素，并且将第二个 p 元素设置为 `position` `absolute`, `top: 30px` , `right: 30px`. 使其脱离文档流。

设置 `position: fixed` 也能使元素脱离文档流，但是偏移量会根据视口而不是父元素来定。

当通过定位方式使元素脱离文档流，元素内容可能重叠，这需要你自己去处理。脱离文档流意味着页面中的其他元素不知道该元素的存在，故不会对该元素做出响应。

### Relative Positioning and Flow

如果你给一个元素开启相对定位，那该元素依然会位于文档流中，然而你可以通过设置偏移值的方式来移动他。正如下面的例子所展示的，该元素的原先占据的空间仍然会被保留。

当你移动一个元素或者使元素脱离文档流，为防止重叠，你可能需要对元素内容和元素周围的内容做一些管理，要么清除浮动，要么保证相对定位不会覆盖其他元素。

Summary
-------

In this guide we have covered the ways to take an element out of flow in order to achieve some very specific types of positioning. In the next guide we will look at a related issue, that of creating a Block Formatting Context, in Formatting Contexts Explained (en-US).

See Also
--------

* Learn Layout: *Positioning*


初始值 - CSS：层叠样式表

初始值
===

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

**`initial-value`** CSS描述符在使用`@property` `at-rule`的时候是必需的，除非 syntax 属性接受了任何有效的 token 流。它为属性设置初始值。

被选定为`initial-value`的参数，依照`syntax`描述符定义，必须可以正确地解析。因此，如果`syntax`描述符为`<color>`，那么初始值必须是一个有效的`color`值。

语法
--

```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}
```

取值
--

对于设定的`syntax`，具有正确值的字符串。

形式定义
----

|  |  |
| --- | --- |
| Related at-rule | `@property` |
| 初始值 | `n/a (required)` |
| 计算值 | as specified |

形式语法
----
```

initial-value =
  <declaration-value>?

```

实例
--

为 `--my-color` `自定义属性`添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。

使用 CSS `@property` 规则:

```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

使用 JavaScript 中的 `CSS.registerProperty` (en-US)函数：

```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

规范
--

| Specification |
| --- |
| CSS Properties and Values API Level 1 # initial-value-descriptor |

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

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

参见
--

* CSS 属性与值 API
* CSS 绘图 API (en-US)
* CSS 类型对象模型 (en-US)
* CSS Houdini


继承性 - CSS：层叠样式表

继承性
===

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

**`inherits`** CSS 描述符在使用`@property` `at-rule`时是必需的，它控制由 `@property`声明注册的自定义属性默认情况下是否会被继承。

Syntax（类型描述符）
-------------

```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}
```

取值
--

`true`

属性默认继承

`false`

属性默认不继承

规范定义
----

|  |  |
| --- | --- |
| Related at-rule | `@property` |
| 初始值 | `auto` |
| 计算值 | as specified |

标准语法
----

```css
inherits =   true   |  false
```

实例
--

为 `--my-color` `自定义属性`添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。

使用 CSS `@property` @规则:

```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

使用 JavaScript 中的 `CSS.registerProperty` (en-US)函数：

```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

规范
--

| Specification |
| --- |
| CSS Properties and Values API Level 1 # inherits-descriptor |

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

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

另见
--

* CSS 属性与值 API
* CSS 绘图 API (en-US)
* CSS 类型对象模型 (en-US)
* CSS Houdini