recursal/MDN huggingface dataset:
调整背景图片的大小
=========

CSS 属性 **`background-size`** 可以用于调整元素的背景图片大小，通过指定图像的宽度和/或高度，覆盖默认的以全尺寸平铺图像的行为。通过这样做，你可以根据需要放大或缩小图像。

铺开大图像
-----

让我们考虑一张大图片，一张 2982x2808 的 Firefox 标志图片。我们想（由于某种原因，可能涉及到可怕的糟糕的网站设计）将这个图片的四个副本平铺到一个 300x300 像素的元素中。要做到这一点，我们可以使用一个固定的 150 像素的 `background-size` 值。

### HTML


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

### CSS


```css
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}
```

### 结果

伸缩图像
----

你也可以像这样同时指定图像的水平和垂直尺寸：


```css
background-size: 300px 150px;
```


结果看起来像这样：

![现在 Firefox 图标被伸展开了](/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images/stretched_firefox_logo.png)

放大图像
----

你可以在背景中放大图像。在这里，我们将 32x32 像素大小的 favicon 放大到了 300x300 像素：

![放大的 MDN 徽标](/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images/scaled_mdn_logo.png)


```css
.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}
```


正如你所看到的，CSS 实际上基本上是相同的，除了图像文件的名称。

特殊值：“contain”和“cover”
---------------------

除了 `<length>` 值，CSS 属性 `background-size` 提供了两个特殊的尺寸值：`contain` 和 `cover`。让我们来看看这些。

### contain

`contain` 值指定，无论包含的盒子大小如何，背景图像都应该被缩放，使每一面都尽可能大，同时不超过容器相应一面的长度。试着调整下面这个例子的大小，观察 contain 值的效果。

#### HTML


```html
<div class="bgSizeContain">
  <p>试着缩放这个元素！</p>
</div>
```


#### CSS


```css
.bgSizeContain {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}
```


#### 结果

### cover

`cover` 值指定背景图片的大小，使其尽可能的小，同时确保两个尺寸都大于或等于容器的相应尺寸。试着调整下面这个例子的大小，观察 cover 值的效果。

#### HTML


```html
<div class="bgSizeCover">
  <p>试着缩放这个元素！</p>
</div>
```


#### CSS


```css
.bgSizeCover {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}
```


#### 结果

参见
--

* `background-size`
* `background`
* 缩放 SVG 背景
Border-image 生成器
================

这个工具用于生成 CSS `border-image` 的值。
色彩选择工具
======

这个工具让创建、修改和测试自定义网页颜色变得简单。它还可以轻松实现多种 CSS 支持的颜色格式之间的转换，包括：HEXA、RGB（红、绿、蓝）和 HSL（色相、饱和度、明度）。其中 RGB（rgba）和 HSL（hsla）格式也支持控制透明度通道（alpha channel）。

随着调整，每种颜色都呈现为三种标准 CSS 格式；此外，基于当前选择的颜色，会创建一个 HSL 和 HSV 调色板和阿尔法通道。“滴管”风格的色彩选择框能在 HSL 或 HSV 格式间切换。你也可以拖拽多种颜色至色彩选择框的底部使它们重叠，来测试它们的混合效果。调整它们的相对 Z 值，可以使它们前后移动。

这个工具将帮助你找到最理想的 CSS 颜色应用到你的 HTML。

除非另有说明，否则你所创建生成的颜色可以应用到 CSS 和 HTML 的任何一个地方。

参见
--

更多关于颜色的使用，参见：

* 通过 CSS 将颜色应用到 HTML 元素上
* 基础文本和字体样式
* 通过 CSS 编辑边框样式
* 通过 CSS 改变背景样式
* 颜色及颜色对比
使列表缩进一致
=======

最常见的列表样式更改之一是缩进距离的改变，即列表项向右推移的距离。这往往会导致挫败感，因为在一种浏览器中有效的样式在另一种浏览器中往往没有相同的效果。例如，如果你声明列表没有左侧边距，那么它们在基于 Gecko 的浏览器中就会顽固地保持原位。本文将帮助你了解可能出现的问题以及如何避免这些问题。

要了解为什么会出现这种情况，更重要的是如何完全避免问题，我们有必要研究一下列表构造的细节。

创建一个列表
------

首先，来看一个简单，单独的列表项目。该列表项目没有标记符号（或称之为“着重号”），本身也不是列表的一部分。如下图图 1 所示，简单而朴素。

![图 1](/zh-CN/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure1.gif)

红色虚线边框代表列表项内容区域的外部边界。请记住，此时列表项没有任何填充或边框。如果我们再添加两个列表项，结果如图 2 所示。

![图 2](/zh-CN/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure2.gif)

现在，我们用一个父元素来封装它们；在本例中，我们将用一个无序列表（即 `<ul>`）来封装它们。根据 CSS 盒模型，列表项的框必须显示在父元素的内容区域内。由于父元素还没有内边距（padding）或外边距（margin），因此我们会看到图 3 所示的情况。

![图 3](/zh-CN/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure3.gif)

在这里，蓝色虚线边框向我们显示了 `<ul>` 元素内容区域的边缘。因为我们没有给 `<ul>` 元素添加内边距，所以它的内容的包裹层紧贴在三个列表项外。

现在我们来添加列表项目标记，由于这是一个无序列表，我们添加传统的实心圆“着重标记”，如下图图 4 所示。

![图 4](/zh-CN/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure4.gif)

从外观上看，标记位于 `<ul>` 内容区域之外，但这并不是最重要的部分。关键是标记要放在 `<li>` 元素而不是 `<ul>` 元素的“首要盒子”外。它们有点像列表项的附属物，悬挂在 `<li>` 内容区域之外，但仍与 `<li>` 相连。

这就是为什么在每一个现代浏览器中，标记都会被置于为 `<li>` 元素设置的任何边框之外，前提是 `list-style-position` 的值为 `outside`。如果改为 `inside`，那么标记就会出现在 `<li>` 的内容中，就像放在 `<li>` 开头的行内框一样。

二次缩进
----

那么，所有组成部分将如何出现在文档中呢？目前，我们的情况与这些样式类似：


```css
ul,
li {
  margin-left: 0;
  padding-left: 0;
}
```


如果我们把这个列表原封不动地放到文档中，就不会有明显的缩进，标记也会有从浏览器窗口左边缘垮散的危险。

要避免这种情况并获得一定的缩进，浏览器实现者只有三种选择。

1. 给予每个 `<li>` 元素左外边距。
2. 给予 `<ul>` 元素左外边距。
3. 给予 `<ul>` 元素左内边距。

事实证明，似乎没有人使用过第一个选项。第二个选项被 Opera 采用。Firefox 浏览器采用了第三种方案。

让我们先来看看这两种方法。在 Opera 中，通过在 `<ul>` 元素上设置 40 像素的左边距来缩进列表。如果我们对 `<ul>` 元素应用背景色，并保留列表项和 `<ul>` 的边框，就会得到图 5 所示的结果。

![图 5](/zh-CN/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure5.gif)

另一方面，Gecko 为 `<ul>` 元素设置了 40 像素的左*内边距*，因此，如果使用与制作图 5 完全相同的样式，将示例加载到基于 Gecko 的浏览器中，就会得到图 6。

![图 6](/zh-CN/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure6.gif)

正如我们所看到的，无论标记位于何处，它们都会与 `<li>` 元素相连。两者的区别完全在于 `<ul>` 的样式。只有当我们尝试在 `<ul>` 元素上设置背景或边框时，才能看到其中的区别。

寻求一致
----

综上所述，我们可以得出这样的结论：如果希望在 Gecko 和 Opera 之间一致地呈现列表，需要**同时**设置 `<ul>` 元素的左外边距和左内边距。为此，我们可以完全忽略 `<li>`。如果你想重现 Netscape 6.x 中的默认显示方式，可以这样写：


```css
ul {
  margin-left: 0;
  padding-left: 40px;
}
```


如果对 Opera 采用的模式更感兴趣，那么这样写：


```css
ul {
  margin-left: 40px;
  padding-left: 0;
}
```


当然，也可以填写自己喜欢的值。如果你喜欢，可以将两者都设置为 `1.25em`——没有理由一定要使用基于像素的缩进。如果你想将列表重置为无缩进，那么仍需将外边距和内边距都清零：


```css
ul {
  margin-left: 0;
  padding-left: 0;
}
```


但请记住，这样做会使着重符号挂在列表及其父元素之外。如果父元素是 `body`，那么着重号就很有可能完全位于浏览器窗口之外，从而不可见。

结论
--

最后，我们可以发现，本文中提到的浏览器在列表布局方面都没有对错之分。它们使用不同的默认样式，这就是问题所在。如果能确保同时为列表的左内边距和左外边距设置样式，那么列表缩进的跨浏览器一致性就会大大提高。

建议
--

* 在你调整列表的缩进的时候，务必确认同时设置了内外边距。
原始文档信息
------

* 作者：Eric A. Meyer, Netscape Communications
* 上次更新于：2002 年 8 月 30 日
* 版权信息：2001-2003 Netscape © 版权所有。保留所有权利。
* 备注：这篇转载文章最初是 DevEdge 网站的一部分。
any-pointer
===========

**`any-pointer`** CSS 媒体特性 测试用户是否拥有*任意*定点装置（如鼠标）。以及如果存在定点装置，它的精确度是什么样的。

**备注：** 如果你想测试*主*定点设备的精确度，使用 `pointer` (en-US) 。

语法
--

`any-pointer` 特性使用下面的关键字。

`none`

没有可用的定点设备。

`coarse`

至少有一个输入途径包含一个精度有限的定点装置。

`fine`

至少有一个输入途径包含一个精确的定点装置。


**备注：** 当输入设备拥有不同特性时，可能有多于一个的值被匹配。`none` 仅当它们都不是定点设备时被匹配。

示例
--

这个例子为拥有至少一个精确定点装置的用户创建了一个小 checkbox，为拥有至少一个粗略定点装置的用户创建了一个大 checkbox。大 checkbox 的优先级更高，因为它的声明在小 checkbox 的声明后。

### HTML


```html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
```

### CSS


```css
input[type="checkbox"]:checked {
  background: gray;
}

@media (any-pointer: fine) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (any-pointer: coarse) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid red;
  }
}
```

### 结果

规范
--

| Specification |
| --- |
| Media Queries Level 4 # any-input |

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

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

参见
--

* `pointer` media feature (en-US)
device-height
=============

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**`device-height`** CSS media feature 可以用来测试设备的渲染高度。注意，该条媒体查询将会在 媒体查询 level4（目前处于候选草案）中废弃

语法
--

`device-height` feature is specified as a `<length>` value. It is a range feature, meaning that you can also use the prefixed **`min-device-height`** and **`max-device-height`** variants to query minimum and maximum values, respectively.

例子
--

在高度低于 800px 时加载指定样式


```html
<link
 rel="stylesheet"
 media="screen and (max-device-height: 799px)"
 href="http://foo.bar.com/short-styles.css" />
```

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

| Specification |
| --- |
| Media Queries Level 4 # device-height |

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

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

**`any-hover`** CSS 媒体特性 可以用来测试是否有*任意*可用的输入机制可以在元素上 hover。

语法
--

`any-hover` 使用下面列表的值作为关键字。

`none`

可用的输入机制里没有机制可以方便地 hover，或者不存在定点输入机制。

`hover`

一个或多个可用的输入机制可以方便地在元素上 hover。

示例
--

### 测试是否有输入机制可以 hover

#### HTML


```html
<a href="#">Try hovering over me!</a>
```


#### CSS


```css
@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}
```


#### 结果

规范
--

| Specification |
| --- |
| Media Queries Level 4 # any-input |

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

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

更多资料
----

* the `hover` media feature
prefers-color-scheme
====================

**`prefers-color-scheme`** CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

语法
--

`no-preference`

表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 `false`。

`light`

表示用户已告知系统他们选择使用浅色主题的界面。

`dark`

表示用户已告知系统他们选择使用暗色主题的界面。



**备注：** “未得知”、“已告知”等用语，英文原文如此。
 “未得知”可理解为：浏览器的宿主系统不支持设置主题色，或者支持主题色并默认为/被设为了未设置/无偏好。
 “已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。


目前，若结果为 `no-preference`，无法通过此媒体特性获知宿主系统是否支持设置主题色，或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑，用户或用户代理也可能在一些情况下在浏览器内部将其设置为 `no-preference`。

示例
--

这个例子使用了一个有黑色背景和白色文字的元素，当用户使用浅色主题时，会翻转黑白颜色。

### HTML


```html
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div>
<br />

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
```

### CSS


```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

### 结果

规范
--

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

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

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

参见
--

* Video tutorial: Coding a Dark Mode for your Website
* Redesigning your product and website for dark mode
* Changing color schemes in Windows, macOS and Android.
aspect-ratio
============

**`aspect-ratio`** CSS 媒体属性 可以用来测试 viewport 的宽高比。

语法
--

宽高比属性被指定为`<ratio>`值来代表 viewport 的宽高比。其为一个范围，这意味着你可以使用 **`min-aspect-ratio`** 和 **`max-aspect-ratio`** 分别查询最小和最大的值。

示例
--

下面的例子包含一个 `<iframe>`，拥有它自身的 viewport。调整的 `<iframe>` 宽高来观察 `aspect-ratio` 的变化。

### HTML


```html
<div id="inner">
  Watch this element as you resize your viewport's width and height.
</div>
```

### CSS


```css
/\* 最小宽高比 \*/
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /\* blue \*/
  }
}

/\* 最大宽高比 \*/
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /\* cyan \*/
  }
}

/\* 明确的宽高比，放在最下部防止同时满足条件时的覆盖\*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /\* red \*/
  }
}
```

### 结果

规范
--

| Specification |
| --- |
| Media Queries Level 4 # aspect-ratio |

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

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

CSS 媒体特性 **`overflow-block`** 可用于测试输出设备如何处理沿块向轴溢出初始包含区块的内容。

语法
--

`overflow-block` 特性可指定为下列关键词值之一。

`none`

不显示沿块向轴溢出的内容。

`scroll`

可通过滚动看见沿块向轴溢出的内容。

`optional-paged`

可通过滚动看见沿块向轴溢出的内容，但可手动触发分页（例如通过 `break-inside` 等）使后续内容显示于下一页。

`paged`

内容按页分开；沿块向轴溢出某页的内容显示于下一页。

示例
--

### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>
```

### CSS


```css
@media (overflow-block: scroll) {
  p {
    color: red;
  }
}
```

### 结果

规范
--

| Specification |
| --- |
| Media Queries Level 4 # mf-overflow-block |

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

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

参见
--

* 使用媒体查询
* @media
-webkit-device-pixel-ratio
==========================

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

**`-webkit-device-pixel-ratio`** 是一个非标准的布尔类型 CSS 媒体类型，是标准 `resolution` (en-US) 媒体类型的一个替代方案。

Its value is the number of device pixels used to represent each CSS `px`. Although the value is a `<number>` and thus doesn't syntactically allow units, its implicit unit is `dppx`.

### Syntax

**`-webkit-device-pixel-ratio`** is a range value meaning the prefixed **`-webkit-min-device-pixel-ratio`** and **`-webkit-max-device-pixel-ratio`** are also available.


```css
@media (-webkit-min-device-pixel-ratio: 2) { ... }
/\* is equivalent to \*/
@media (min-resolution: 2dppx) { ... }

/\* And likewise \*/
@media (-webkit-max-device-pixel-ratio: 2) { ... }
/\* is equivalent to \*/
@media (max-resolution: 2dppx) { ... }
```

### Specifications

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-device-pixel-ratio |

### See also

* `-webkit-transform-2d` (en-US)
* `-webkit-transform-3d` (en-US)
* `-webkit-transition` (en-US)
* `-webkit-animation` (en-US)
scripting
=========

**`scripting`** CSS 媒体特性可以用来测试脚本（例如 JavaScript）是否可用。

语法
--

`scripting` 功能指定为从下面列表中选择的关键字值。

`none`

脚本在当前文档上完全不可用。

`initial-only`

脚本在最初的页面加载过程中被启用，但在之后则不被启用。

`enabled`

脚本是受支持的并在当前文档上激活。

示例
--

### HTML


```html
<p class="script-none">You do not have scripting available. :-(</p>
<p class="script-initial-only">
  Your scripting is only enabled during the initial page load. Weird.
</p>
<p class="script-enabled">You have scripting enabled! :-)</p>
```

### CSS


```css
p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}
```

### 结果

规范
--

| Specification |
| --- |
| Media Queries Level 5 # scripting |

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

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

参见
--

* 使用媒体查询
* @media
width
=====

可以使用 `width` CSS `@media` 基于视口宽度（或页面框，用于分页媒体）应用样式。

语法
--

该`width`特性被指定为`<length>`，表示 viewport 宽度的值。这是一个范围特性，也就是说，你也可以使用前缀 **`min-width`** 和 **`max-width`** 分别查询最小值和最大值。

示例
--

### HTML


```html
<div>改变 viewport 的宽度的同时，观察这个元素的变化。</div>
```

### CSS


```css
/\* 精确宽度 \*/
@media (width: 360px) {
  div {
    color: red;
  }
}

/\* 最小宽度 \*/
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/\* 最大宽度 \*/
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}
```

### 结果

规范
--

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

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

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

CSS 媒体属性**屏幕方向**（**`orientation`**）可用于测试视口 viewport（或者对于分页媒体而言的页面框盒）的横纵方向。

**备注：** 此属性不等价于*设备*的屏幕旋转方向。在许多设备上，当屏幕方向为纵向时，打开软键盘将导致视口 viewport 的宽度大于高度，从而导致浏览器突然改用横向样式，而不是保持纵向。

语法
--

`orientation` 属性被指定为下列关键字值中的任意一个。

### 关键字值

`portrait`

viewport 处于纵向，即高度大于等于宽度。

`landscape`

viewport 处于横向，即宽度大于高度。

示例
--

### HTML


```html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
```

### CSS


```css
body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
```

### 结果

规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
prefers-reduced-motion
======================

CSS 媒体查询特性 **`prefers-reduced-motion`** 用于检测用户的系统是否被开启了动画减弱功能。

语法
--

`no-preference`

用户未修改系统动画相关特性。

`reduce`

这个值意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除。

用户偏好
----

在火狐中，满足以下条件则 `reduce` 会生效：

* 在 GTK/Gnome 中，可以通过 *GNOME Tweaks*（在“通用”或“外观”菜单中，取决于具体版本）的配置，设置 `gtk-enable-animations` 的值为 `false`。
    + 可以在 GTK 3 的配置文件中的 `[Settings]` 模块下设置 `gtk-enable-animations = false`。
* 在 Windows 10 中：设置 > 轻松获取 > 显示 > 在 Windows 中显示动画。
* 在 Windows 7 中：控制面板 > 轻松获取 > ?是计算机更易于查看 > 关闭不必要动画。
* 在 MacOS 中：系统偏好 > 辅助使用 > 显示 > 减少运动。
* 在 iOS 上：设置 > 通用 > 辅助性 > 减少运动。
* 在 Android 9+ 上：设置 > 辅助性 > 移除动画。
例子
--

下面的例子将会展示一组令人心烦的动画，不过当你开启了系统的“减少运动”后就能看到动画减弱的效果了。

### HTML


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

### CSS


```css
.animation {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}
```


```
.animation {
  background-color: rebeccapurple;
  color: #fff;
  font:
    1.2em Helvetica,
    arial,
    sans-serif;
  width: 200px;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

/\* ----------------------------------------------
 \* Generated by Animista on 2018-9-2 13:47:0
 \* w: http://animista.net, t: @cssanimista
 \* ---------------------------------------------- \*/

/\*\*
 \* ----------------------------------------
 \* animation vibrate-1
 \* ----------------------------------------
 \*/

@keyframes vibrate {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
```

### Result

规范
--

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-motion |

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

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

参考
--

* An introduction to the reduced motion media query
hover
=====

该 **`hover`** CSS `@media` 可以根据用户的主要输入机制是否可以悬停在元素之上来应用样式。

语法
--

悬停功能指定为从下面列表中选择的关键字值。

`none`

主要输入机制无法悬停或不方便悬停（例如，当用户执行不方便的长按操作时，许多移动设备模拟悬停），或者没有主指示输入机制。

`hover`

主要输入机制可以方便地悬停在元素上。

示例
--

### HTML


```html
<a href="#">Try hovering over me!</a>
```

### CSS


```css
@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}
```

### 结果

规范
--

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

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

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

参见
--

* the `any-hover` media feature
overflow-inline
===============

CSS 媒体特性 **`overflow-inline`** 可用于测试输出设备如何处理沿行向轴溢出初始包含区块的内容。

语法
--

`overflow-inline` 特性可指定为下列关键词值之一。

`none`

不显示沿行向轴溢出的内容。

`scroll`

可通过滚动看见沿行向轴溢出的内容。

示例
--

### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>
```

### CSS


```css
p {
  white-space: nowrap;
}

@media (overflow-inline: scroll) {
  p {
    color: red;
  }
}
```

### 结果

规范
--

| Specification |
| --- |
| Media Queries Level 4 # mf-overflow-inline |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
处理 Multicol 中的溢出
================

在本指南中，我们将了解 multicol 如何处理溢出，包括在列框内以及内容超出容器容量的情况。

column boxes 内部溢出
-----------------

当子项的大小大于列框时，就会发生溢出。例如，当列中的图像宽度大于 `column-width` 值或基于 `column-count` 声明的列数生成的列宽度时，就可能会发生这种情况。

在这种情况下，内容溢出（并且是可见的）到下一列，而不是被列框裁切。你可以在下面的示例中看到，在编写本文时，浏览器以不同的方式处理预期的呈现图像。

![](/zh-CN/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout/image-overflow-multicol.png)

如果你想要一个图像尺寸缩小到适合列框，标准的响应式的解决方案是设置最大宽度:100%。

更多的列
----

如何处理溢出的列取决于是在一个片段化的媒体上下文（比如打印）中，还是在一个连续的媒体上下文（比如 web 页面）中。

在一个片段化的媒体中，一旦碎片（例如页面）中充满了列，多出的列将移至新页面。在连续介质中，列将沿横向溢出。在 web 上，这意味着水平滚动条的出现。

下面的示例显示了这种溢出行为。multicol 容器有一个高度，列的文本多于空间，因此多出的列会在容器外面出现。

本规范的未来版本中，会允许横向溢出的列向下排列，用户能向下滚动鼠标查看溢出的列。

使用纵向的媒体查询
---------

multicol 在 web 上的一个问题：如果你的列比 viewport 高，读者需要上下滚动来阅读，这样的用户体验不好。避免这种情况的一种方法是，只有在有足够的高度时才应用列属性。

在下面的示例中，我们使用了 `min-height`。

在本系列的最后一篇指南中，我们将看到片段化下的 Muticol 如何使用的规范，去控制列内容的溢出。
多列布局的样式
=======

由于在多列（*multicol*）容器中创建的列盒子是匿名盒子，我们可以对其进行的样式设置非常有限。然而，我们还是有一些可以做的事情。本指南解释了如何更改列之间的间距和样式规则。

为列盒子设置样式
--------

非常遗憾，目前无法为列盒子设置样式。构成你的列盒子的匿名盒子无法以任何方式定位，这意味着无法更改盒子的背景颜色或使一个列大于其他列。也许在未来的规范版本中可以实现。然而，目前我们可以更改列之间的间距并在列之间添加线条。

列间距
---

列之间的间距由 `column-gap` 属性控制。该属性最初在多列布局规范中定义。然而，现在它在盒子对齐中定义，以便统一其他规范（如 CSS 网格布局）中的盒子间距。

在多列中，`column-gap` 的初始值为 `1em`。这意味着你的列不会相互挤压。在其他布局方法中，`column-gap` 的初始值为 0。如果使用关键字值 "normal"，间距将设置为 1em。

你可以通过将 `column-gap` 的值设置为任何长度单位来更改间距。在下面的示例中，`column-gap` 设置为 40px。

`column-gap` 允许的值是 `<length-percentage>`，这意味着允许使用百分比。`column-gap` 的百分比值是根据多列容器宽度的百分比计算的。

分栏线条
----

该标准定义了 `column-rule-width`、`column-rule-style` 和 `column-rule-color`，并提供了简写 `column-rule`。这些属性的工作方式与 `border` 属性完全相同：任何有效的 `border-style` 都可以用作 `column-rule-style`。

这些属性应用于多列容器元素，因此所有列将具有相同的分栏线条。分栏线条仅在列之间绘制，而不在外部边缘绘制。分栏线条还应仅在具有内容的列之间绘制。

在接下来的示例中，使用长格式值创建了一个宽度为 5px、颜色为 `rebeccapurple` 的点状分栏线条。

请注意，分栏线条本身不占用任何空间：宽分栏线条不会将列分开以为分栏线条腾出空间。相反，分栏线条覆盖了间隙。

下面的示例使用了非常宽的 40px 分栏线条和 10px 间距。分栏线条在列内容的下方显示。为了在分栏线条两侧腾出空间，间距需要增加到大于 40px。

下一步
---

本文详细介绍了目前可以为列盒子设置样式的所有方法。在下一篇指南中，我们将讨论如何让容器内的元素跨越所有列。
Basic Concepts of Multicol
==========================

多列布局（通常称为 multicol）是一种规范，用于将内容布置到一组列框中，就像报纸中的列一样。本指南解释了规范如何与一些常见的用例示例一起使用。

关键概念和术语
-------

Multicol 与 CSS 中的任何其他布局方法不同，它将内容（包括所有后代元素）分段为列。这与在使用 CSS Paged Media 时将内容分段为页面的方式相同，例如通过创建打印样式表。

规范定义的属性有：

* `column-width` (en-US)
* `column-count`
* `columns`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-rule`
* `column-span`
* `column-fill` (en-US)
* `column-gap`

通过给一个元素添加 column-count 或 column-width，该元素变成了多列容器，或简称为 multicol 容器。这些列是都是匿名的盒子，在规范中描述为列盒子。

columns 定义
----------

创建一个 multicol 容器必须使用至少一个 column-\* 属性，这些就是 column-count 和 column-width。

### `column-count` 属性

`column-count` 属性指定你想要显示内容的列的数量。浏览器会将正确分配的空间给每列并创建需要的列数。

在以下示例中，我们使用 column-count 属性在 `.container` 元素上创建三列。 `.container` 元素的内容包括其子元素都会分裂成三列。

在上面的例子中内容被段落 p 标签的默认样式包裹。因此，每段都有一个间距。你可以看到这个间距引起第一行文本被推了下来。这是因为 multicol 容器创建了一个新的块格式化上下文（BFC)，这意味着子元素的间距不会与父容器的间距互相重叠。

### `column-width` 属性

`column-width` 属性用于给每列设置一个最佳宽度。如果你声明 `column-width`,浏览器将算出 该宽度在 multicol 容器能分多少列，并且把额外的的空间填充到这些列当中。因此，应将列宽视为最小宽度，因为由于额外的空间，列可能而更宽。

当单个列的可用宽度小于 column-width 的值的情况下，列的宽度会缩小为小于所声明的列宽。

在以下示例中，我们使用 column-width 属性值为 200 px。但最终为了适配容器，列的宽度却大于 200 像素，额外的空间被平均分配了。

### 同时使用 `column-count` 和 `column-width`

如果在 multicol 容器上指定这两个属性，则 `column-count` 将作为最大列数。因此，将按`column-width` 的值计算，直到达到 `column-count` 定义的列数。在此之后，即使有足够的空间容纳指定列宽大小的列，也不再绘制，并且额外空间在现有列之间均匀分布。

同时使用这两个属性时，可能会获得的列数少于 `column-count` 数值中指定的列数。

在下一个例子中，我们使用 column-width 的值为 200px，column-count 的值为 2。即使有超过两列的空间，我们也得到两个。如果没有足够的空间容纳两列 200px，我们得到一个。

### `columns` 缩写

你可以使用 columns 缩写来设置 `column-count` 和 `column-width`。如果设置长度单位，这将用于 `column-width`，设置一个整数，它将用于 `column-count`。你可以设置两者，用空格分隔这两个值。

此 CSS 结果与示例 1 相同，column-count 设置为 3。
```

.container {
  columns: 3;
}
```


此 CSS 结果与示例 2 相同，column-width 为 200px。
```

.container {
  columns: 200px;
}
```


此 CSS 结果与示例 3 相同，同时设置 column-count 和 column-width。
```

.container {
  columns: 2 200px;
}
```

下一步
---

在本指南中，我们学习了多列布局的基本用法。在下一个指南中，我们将看看我们可以为列本身设置多少样式。