recursal/MDN huggingface dataset:
在选择器中使用 :target 伪类
==================

为了辅助标识那些指向文档特定部分链接的目标，CSS3 选择器 引入了 `:target` 伪类. Netscape 7.1 已经在 Netscape 系列中加入了这个伪类的支持，这一新的举措让页面作者能够辅助用户在较大的页面中定位。

### 选择一个目标

`:target` 伪类用来指定那些包含片段标识符的 URI 的目标元素样式。例如 `https://developer.mozilla.org/zh-CN/docs/Web/CSS#参考` 这个 URI 包含了 `#参考` 片段标识符 在 HTML 中，标识符是元素的 `id` 或者 `name` 属性。由于这两者位于相同的命名空间，因此，这个示例 URI 指向的是文档顶层的“参考”。

假设你想修改 URI 指向的任何 h2 元素，但是又不想把样式应用到任何其他同类型的元素，那么以下示例足够简单有用：
```

h2:target {font-weight: bold;}
```


同样的，将样式应用于特定的文档片段也是可行的。这是通过使用 URI 中相同的标识符实现的。例如，要在 #Example 文档片段中加入边框，我们可以通过如下代码实现：
```

#Example:target {border: 1px solid black;}
```

### 定位所有元素

如果想要创建应用于所有目标元素的样式，那么可以使用通用选择器：
```

:target {color: red;}
```

### 示例

在以下示例中，5 个链接指向了同一文档中的元素。例如，选择 "First" 链接会导致 `<h1 id="one">` 成为目标元素。注意，由于目标元素有可能会被放置到浏览器窗口的顶层，因此文档可能会跳到新的滚动位置。
```

<h4 id="one">...</h4> <p id="two">...</p>
<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>
```

### 结论

在片段标识符指向部分文档的情况下，读者可能会对到底应该阅读文档的哪一部分感到疑惑。通过对不同的目标元素的样式进行修饰，读者的相关疑惑会减少或者消除。

### 相关链接

* CSS3 Selectors #target-pseudo
* CSS Reference :target
### Original Document Information

* Author(s): Eric Meyer, Standards Evangelist, Netscape Communications
* Last Updated Date: Published 30 Jun 2003
* Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
* Note: This reprinted article was originally part of the DevEdge site.
区块、绝对定位和表格布局中的盒子对齐
==================

盒子对齐规范详细说明了对齐在各种布局方法中的工作原理。在本页，我们研究盒子对齐在块布局上下文中的工作方式，包括浮动、定位和表格元素。由于本页旨在详细介绍专门与块布局和盒子对齐相关的内容，它应与主要的盒子对齐页面一起阅读，该页面详细介绍了盒子对齐在各种布局方法中的共同特性。

**备注：** 在撰写本文时（2018 年 5 月），块布局中实际上还不支持盒子对齐属性。本文详细介绍了这些属性在规范中如何期望被实现的情况，以求完整性，并可能会随着规范和浏览器实现的发展而改变。

align-content 和 justify-content
-------------------------------

`justify-content` 属性不适用于块容器或表格单元格。

`align-content` 属性适用于块向轴，以对容器中的内容进行对齐。如果请求了一个内容分布方法如 `space-between`、`space-around` 或 `space-evenly`，那么将使用后备对齐，因为内容被视为一个对齐主体 (en-US)。

justify-self
------------

`justify-self` 属性用于在行向轴上对包含块中的项目进行对齐。

此属性不适用于浮动元素或表格单元格。

align-self
----------

`align-self` 属性不适用于块级框（包括浮动），因为块轴上有多个项目。它也不适用于表格单元格。

### 使用绝对定位的元素

对齐容器是带有 top、left、bottom 和 right 偏移值的定位块。正常关键字解析为 `stretch`，除非定位项目是一个替换元素，在这种情况下它解析为 `start`。

在这些布局方法中进行对齐的现状
---------------

由于我们当前没有浏览器支持块布局中的盒子对齐，因此你可以选择使用现有的对齐方法之一，或者将容器内的单个项目设置为弹性项目，以使用弹性盒子中指定的的对齐属性。

区块水平对齐在弹性盒子之前通常通过对块设置自动边距来实现。`margin` 值为 `auto` 会吸收该维度中所有的可用空间，因此通过为块设置左右自动边距可以将其居中：


```css
.container {
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}
```


在表格布局中，你可以使用 `vertical-align` 属性对单元格中的内容在该单元格内进行对齐。

对于许多使用场景，将块容器转换为弹性项目将为你提供所需的对齐能力。在下面的示例中，含有单个项目的容器已转换为弹性容器，以便能够使用对齐属性。

参考
--

### CSS 属性

* `justify-content`
* `align-content`
* `justify-self`
* `align-self`
### 术语条目

* 对齐主体 (en-US)
* 对齐容器 (en-US)
* 后备对齐 (en-US)
Box alignment in Flexbox
========================

Box Alignment 规范详细说明了对齐 (alignment) 在各种布局方法中的工作原理; 在此页面中，我们将探讨盒子对齐（box aligment）在 Flexbox 环境中的工作原理。由于此页面旨在详细说明特定于 Flexbox 和框对齐的内容，因此应与Box Alignment 页面一起阅读，该页面详细说明了不同布局方法的框对齐的常见方法。

基础示例
----

在此示例中，使用`justify-content`在主轴上对齐三个弹性元素（flex items），并使用`align-items`在十字轴上对齐。第一个元素通过将`align-self`设置为居中来覆盖在父元素设置的 align-items 值。

轴 与 flex-direction
------------------

Flexbox 与文档的写入模式有关，因此如果你使用英语并将`justify-content`设置为 flex-end，则会将项目对齐到 Flex 容器的末尾。如果你将`flex-direction`设置为行，则此对齐将处于内联方向。

但是，在 Flexbox 中，你可以通过将 flex-direction 设置为 column 来更改主轴。在这种情况下，justify-content 将在块方向上对齐项目。因此，在 Flexbox 中工作时最容易考虑主轴和纵轴，如下所示：

* 主轴由`flex-direction`设置方向，通过`justify-content` 属性对齐
* 纵轴穿过主轴，通过`align-content`，`align-self` / `align-items`对齐
### 主轴

* `justify-content`
### 纵轴

* `align-self`
* `align-items`
* `align-content`
### justify-self 在 Flexbox 布局中失效

在主轴上，Flexbox 将我们的内容作为一个组进行处理。计算布置子元素所需的空间量，然后剩余空间可用于分配。 `justify-content`属性控制剩余空间的使用方式。设置`justify-content：flex-end`，额外空间放在所有子元素之前，`justify-content：space-around`，它放在该维度的子元素的两侧，等等。

这意味着在 Flexbox 中，`justify-self`属性没有意义，因为我们总是处理移动整个元素组。

在十字轴上，`align-self`是有意义的，因为我们可能在该维度中的 flex 容器中有额外的空间，其中单个元素可以移动到开始和结束位置。

对齐 与 auto margins
-----------------

在 Flexbox 中有一个特定的用例，我们可能会认为`justify-self`是我们需要的，这就是我们想要分割一组 flex items，也许是为了创建一个分割导航模式。对于此用例，我们可以使用自动边距。设置为 auto 的边距将吸收其维度中的所有可用空间。这就是以自动边距为中心的块的工作原理。通过将左右边距设置为 auto，我们块的两侧都会尝试占用所有可用空间，因此将盒子推入中心。

通过在一组弹性项目中的一个项目上设置 auto 的`margin`全部对齐以开始，我们可以创建拆分导航。这适用于 Flexbox 和对齐属性。一旦没有可用于自动边距的空间，该项目的行为与所有其他弹性项目的行为相同，并且收缩以尝试适合空间。

`gap` 属性
--------

* `row-gap`
* `column-gap`
* `gap`
### 在子元素之间创建固定大小的差距

在主轴上，`column-gap`属性将在相邻项之间创建固定大小的间隙。

在纵轴上，`row-gap`属性将在相邻的子元素之间创建间距，因此还必须将`flex-wrap`设置为`wrap`,以使其具有任何效果。

**备注：** 从 Firefox 63 开始，Firefox 是唯一实现 Flexbox gap 属性的浏览器。

Reference
---------

### CSS Properties

* `justify-content`
* `align-content`
* `place-content`
* `justify-items`
* `align-items`
* `place-items`
* `align-self`
* `row-gap`
* `column-gap`
* `gap`
### Glossary Entries

* Cross axis
* Main axis
Guides
------

* Alignment in flexbox
External Resources
------------------

* Box alignment cheatsheet
* CSS Grid, Flexbox and Box Alignment
* Thoughts on partial implementations of Box Alignment
Web 开放字体格式（WOFF）
================

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

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

* Learn more
* See full compatibility
* Report feedback
**WOFF**（**Web Open Font Format**，Web 开放字体格式）是由 Mozilla 与 Type Supply、LettError 及其他组织协同开发的一种新的网页字体格式。它使用了与 TrueType、OpenType、Open Font 所采用的 `sfnt` 结构类似的压缩算法，不过还添加了元数据（metadata）及私有数据结构，其中包括了自定义空间，允许厂家和经销商在需要时提供许可证。

WOFF 有以下三点优势：

1. 字体采用压缩格式，因此，使用 WOFF 的网站将使用更少的带宽，并且比使用同等的未压缩的 TrueType 或 OpenType 文件加载更快。
2. 许多字体经销商并不愿意将 TrueType 或 OpenType 的许可证颁发给网站，他们更愿意颁发 WOFF 的许可证。这提高了网站设计者对字体的可用性。
3. 无论是收费还是免费的浏览器厂家都喜欢 WOFF 格式，因此它很可能成为真正通用的、可互操作的网络字体格式，这与目前其他的字体格式不同。

WOFF 有两个版本：WOFF 和 WOFF2。它们之间最大的差别体现在使用的压缩算法上。在 `@font-face` 属性中，它们使用 `'woff'` 和 `'woff2'` 这两个标识符来区分。

使用 WOFF
-------

通过 `@font-face` 这个 CSS 属性来为你的网站使用 WOFF 字体。它的工作原理与 OpenType 和 TrueType 格式的字体完全一样，只是由于增加了压缩功能，它可能会让你的内容下载更有效率。

用于处理 WOFF 字体的工具
---------------

* 用于处理 WOFF 字体的工具。`sfnt2woff` 和 `woff2sfnt` 可以在 WOFF 和 OpenType 之间相互转换。
规范
--

| Specification |
| --- |
| WOFF File Format 1.0 # OverallStructure |
| WOFF File Format 2.0 # FileStructure |

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

### css.at-rules.font-face.WOFF

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

### css.at-rules.font-face.WOFF\_2

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

参见
--

* `@font-face`
pad
===

\*\*`pad`\*\*属性和自定义记数样式一起使用时，可以用来限定记数样式的最小长度。如果某个记数样式小于 pad 所指定的长度，那么会用 pad 指定的填充字符串来填充至指定长度。如果比 pad 所指定的长度长，则会正常显示。Pad 属性的第一个参数是最小长度，第二个参数是填充字符串。一个常见的用处是序号编号需要填充两位的时候，即需要编号"01","02","03",……, 而不仅仅是 1, 2, 3...

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| 初始值 | `0 ""` |
| 计算值 | as specified |

参数
--


```css
pad: 3 "0";
```

### 参数值

`<integer> && <symbol>`

`<integer>` 表示所有计数样式必须达到的最小长度 (必须是非负整数). 如果指定的最小长度没有达到，将会用`<symbol>`来填充直到最小长度。

### 形式语法
```

pad =   
  <integer [0,∞]>  &&  
  <symbol>           
  
<symbol> =   
  <string>        |  
  <image>         |  
  <custom-ident>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

示例
--

### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

### CSS


```css
@counter-style pad-example {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5";
  pad: 2 "0";
}

.list {
  list-style: pad-example;
}
```

### 结果

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-pad |

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

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

参见
--

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()` (en-US), 该功能符号创建匿名计数器样式 .
speak-as
========

当已明确定义 `@counter-style` 后，可以用 **`speak-as`** 定义在口语场景中如何表述这个 counter 符号。比如作为一篇文章的作者可以指定，当计算机读出这篇文章时，是以数字序号表示 counter，还是仅仅用语音提示。

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| 初始值 | `auto` |
| 计算值 | as specified |

语法
--


```css
/\* Keyword values \*/
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/\* @counter-style name value \*/
speak-as: <counter-style-name>;
```

### 值

`auto`

如果 **`speak-as`** 的值是 **`auto`**，那么它的实际值是由 `system` (en-US) 的值决定的：

* 如果 `system` 的值是 `alphabetic`，**`speak-as`** 的值是 `spell-out`**。**
* 如果 `system` 的值是 `cyclic`，**`speak-as`** 的值是 `bullets`。
* 如果 `system` 的值是 `extends`，当被继承的样式上也定义了 **`speak-as: auto`**，那么 **`speak-as`** 的值就和被继承样式的值相同。
* 其他场景下，表现都与 **`speak-as: numbers`** 相同。

`bullets`

用于表示无序的列表项，具体的发音由user agent决定。

`numbers`

根据文档语言的规范，读出计数器标明的数字的值。

`words`

在显示上，由用户代理决定计数器的值，读的时候以单词为单位。

`spell-out`

依然是用户代理决定了计数器，但它将会以逐个字母的形式被读出。如果遇到某个计数器，用户代理不知道要如何读时，会将它当做 `numbers` 处理。

`<counter-style-name>`

The name of another counter style, specified as a `<custom-ident>`. If included, the counter will be spoken out in the form specified in that counter style, kind of like specifying the `fallback` (en-US) descriptor. If the specified style does not exist, `speak-as` defaults to `auto`.它的另一个名称是 `<custom-ident>`。使用了这个值后，计数器将以被指定的样式名的形式读出，和声明了 `fallback` (en-US) 的效果类似。如果被指定的样式不存在，`speak-as` 将回退为`auto`。

### 语法
```

speak-as =   
  auto                  |  
  bullets               |  
  numbers               |  
  words                 |  
  spell-out             |  
  <counter-style-name>    
  
```

例子
--

### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

### CSS


```css
@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;
}
```

### 结果

无障碍问题
-----

这个属性的无障碍支持度不太友好。请别指望靠它能正确地传递出页面的核心信息。

Let's Talk About Speech CSS | CSS Tricks

规范
--

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-speak-as |

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

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

参考
--

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()` (en-US), the functional notation creating anonymous counter styles.
additive-symbols
================

`additive-symbols` 描述符定义符号，用于值可累积的可数的 `system` (en-US)的项。 `additive-symbols` 定义累积的的元组（tuples）,每个元组项都包含一个符号和一个非负整数的权重。`additive system` 被用于构造 sign-value numbering （符号 - 值，指数字的值就是是符号加在一起的值）系统，比如罗马数字。


```css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);
```


当系统描述符是循环，数字，拼音，象征，或固定的时候，使用 `symbols()` (en-US)代替`additive-symbols`

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| 初始值 | `n/a (required)` |
| 计算值 | as specified |

语法
--

### Formal syntax
```

additive-symbols =   
  [ <integer [0,∞]> && <symbol> ]#    
  
<symbol> =   
  <string>        |  
  <image>         |  
  <custom-ident>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

示例
--

### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

### CSS


```css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols:
    V 5,
    IV 4,
    I 1;
}
.list {
  list-style: additive-symbols-example;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

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

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

相关链接
----

* `list-style`, `list-style-image`, `list-style-position`
* The `symbols()` (en-US), functional notation is used for creating anonymous counter styles.
在 CSS 中实现图像合并
=============

CSS **图像合并**（**Image sprites**）技术，亦作 CSS 贴图定位、图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。

**备注：** 备注：当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好。

实现
--

若要为所有类名为 `toolbtn` 的元素附加上一张图片：


```css
.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}
```


为设置 `background-position` 以使每个按钮得到合并后图片中的正确部分，可以在 `background` 属性中的 `url()` 后添加 x, y 两个坐标值，或直接使用 `background-position` 属性。例如：


```css
#btn1 {
  background-position: -20px 0px;
}
#btn2 {
  background-position: -40px 0px;
}
```


这会将 ID 为 btn1 的元素的背景向左移 20px，ID 为 btn2 的元素的背景向左移 40px（假设这两个元素都带有 `toolbtn` 这个类且应用了上面 `background` 属性中定义的图片背景）

类似的，你也可以使用下面的代码添加悬停效果：


```css
#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;
}
```

### 深入阅读

CSS Tricks 上的完整 Demo：http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
滚动吸附的基本概念
=========

CSS 滚动吸附模块中的属性可以定义用户在滚动文档时滚动吸附到指定点的方式。

滚动吸附特性可以定义吸附位置。滚动容器的滚动口在完成滚动操作后可能会停在或“吸附到”这些位置。

CSS 滚动吸附的关键属性
-------------

在定义滚动吸附前，需要在滚动容器上启用滚动。通过确保滚动容器指定了尺寸且启用 `overflow` 可启用滚动。

然后可以在滚动容器上使用下列关键属性定义滚动吸附：

* `scroll-snap-type`——使用这个属性可定义滚动式视口是否可被吸附、必须还是可选吸附以及吸附应当出现在哪些轴上。
* `scroll-snap-align`——这个属性设置在滚动容器的每个子元素上，可用于定义每个子元素的吸附位置或没有吸附位置。
* `scroll-snap-stop`——这个属性确保在滚动中吸附到而不是越过某个子元素。
* `scroll-margin`——这个属性可以设置在在滚动中可以被吸附的子元素上，用于在指定盒子上创建吸附外边距。
* `scroll-padding`——这个属性可以设置在滚动容器上，用于创建吸附偏移。

下列示例演示了由 `scroll-snap-type` 所定义的纵轴方向的滚动吸附。此外，`scroll-snap-align` 被应用于 `<section>` 元素的所有子元素，决定了每个子元素的滚动止点。

使用 scroll-snap-type
-------------------

`scroll-snap-type` 属性需要知道在哪个方向上有滚动吸附。方向可以是 `x`、`y` 或者逻辑对应关系 `block`、`inline`。还可以用关键字 `both` 使两个轴都有滚动吸附。

你还可以传入关键字 `mandatory` 或 `proximity`。关键字 `mandatory` 告诉浏览器无论滚动到哪个位置，内容都*必须*吸附到特定的点，而关键字 `proximity` 意味着内容可以吸附而不是必须吸附到点上。

使用 `mandatory` 可以创造非常一致的滚动效果——你知道浏览器总会吸附到每个指定的点。这意味着有把握相信在滚动结束时，你希望出现在屏幕顶部的东西就会出现在那里。然而，如果内容比预想的大，那么会产生问题——用户可能会沮丧地发现他们永远无法滚动并查看内容中特定的某处。因此，使用 `mandatory` 应当仔细考虑，而且只用于你知道屏幕上或滚动式区域在任何时刻有多少内容的情形。

**备注：** 如果某个子元素的内容会溢出父容器，那么请务必不要使用 `mandatory`，这是因为用户会无法把溢出内容滚入视野。

`proximity` 值只在子元素靠近某个位置时把它吸附到这个位置，具体的距离由浏览器决定。

在下列示例中，可以在 `mandatory` 和 `proximity` 之间改变取值，看看对滚动产生的效果。

在上述示例中的滚动容器上同时设置了 `height: 300px;` 和 `overflow-y: scroll;`。

如果内容没有溢出容器，那么没有用于滚动的内容。

使用 scroll-snap-align
--------------------

`scroll-snap-align` 属性的有效值包括 `start`、`end`、`center` 和 `none`。这些值用于标示内容应当吸附到滚动容器中的哪个点。在下列示例中，可以改变 `scroll-snap-align` 的值，看看滚动行为如何变化。

如果 `scroll-snap-type` 是 `mandatory` 而且某个子元素上的 `scroll-snap-align` 被设置为 `none` 或者未被设置（此时默认为 `none`），那么用户会无法把这个元素滚入视野。

使用 scroll-padding
-----------------

如果你在使用 `start` 或 `end` 时不想将内容恰好吸附到滚动容器的边上，或者在使用 `center` 时想让吸附位置略微偏离中心，请使用 `scroll-padding` 属性或者等价的全称属性添加一点内边距。

在下列示例中，`scroll-padding` 被设置为 `40px`。当内容吸附到第二和第三节的开头时，滚动会停在离章节开头 40 像素远的位置。试试改变 `scroll-padding` 的值，看看距离如何变化。

如果有像导航栏这种可能遮盖滚动内容的固定元素，那么这个属性可以派上用场。使用 `scroll-padding` 可以为固定元素留出空间。例如在下列示例中，当内容在 `<h1>` 元素下方滚动时，`<h1>` 在屏幕上保持不动。如果没有内边距，那么在发生吸附时，标题会遮盖一些内容。

使用 scroll-margin
----------------

在子元素上可以设置 `scroll-margin` 属性或者全称滚动外边距值，用于定义指定盒子的外边距。这可以让不同的子元素有不同大小的空间，而且可以和父元素上的 `scroll-padding` 一起使用。在下列示例中尝试一下。

使用 scroll-snap-stop
-------------------

使用 `scroll-snap-stop` 属性可以指定滚动是否必须吸附到指定的吸附点。在上述示例中，这意味着滚动究竟是会停在每个章节的开头还是可以跳过章节。

这个属性可以确保用户看见滚动区域的每个章节而不会不小心滚过章节。然而这个设置会阻止用户快速滚动到想要的内容，因而对用户体验产生负面影响。

参见
--

* CSS 滚动吸附模块
* 用 CSS 滚动吸附明确控制滚动（载于 web.dev，2021 年）
* 实用 CSS 滚动吸附（载于 CSS-Tricks，2020 年）
* CSS 滚动吸附（载于 12 Days of Web，2019 年）
* 滚动吸附示例（载于 Codepen）
blur()
======

**`blur()`** CSS 方法将高斯模糊应用于输出图片。结果为 `<filter-function>`.

尝试一下
----

语法
--
```

blur(radius)
```

### 值

`radius`

模糊的半径，值为`<length>`。它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。值为 0 会使输入保持不变。该值为空则为 0。

示例
--


```css
blur(0)        /\* No effect \*/
blur(8px)      /\* Blur with 8px radius \*/
blur(1.17rem)  /\* Blur with 1.17rem radius \*/
```

参见
--

* `<filter-function>`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()` (en-US)
* `invert()` (en-US)
* `opacity()`
* `saturate()` (en-US)
* `sepia()` (en-US)
grayscale()
===========

**`grayscale()`** : 对图片进行灰度转换，它是 `<filter-function>` 的子属性。

尝试一下
----

语法
--
```

grayscale(amount)
```

### 参数

`amount`

转换值的大小，可以是`<number>` 或 `<percentage>`. 当值为 100% 时，灰度最大。0% 时与原图没有区别。0% 到 100% 之间的值会使灰度线性变化。amount 为空时使用值为`1`.

例子
--


```css
grayscale(0)     /\* 无效果 \*/
grayscale(.7)    /\* 70% 灰度 \*/
grayscale(100%)  /\* 灰度最大 \*/
```

更多
--

* `<filter-function>`
contrast()
==========

**`contrast()`** CSS 函数调整输入图像的对比度。结果是一个 `<filter-function>`.

尝试一下
----

语法
--
```

contrast(amount)
```

### 参数

`amount`

输出的对比度取决于 `<number>`或者`<percentage>`的大小。低于 `100%` 的值会降低对比度，高于 `100%` 的值会增加对比度。值为 `0%` 将创建完全灰色的图像，值为 `100%` 时不会有任何变化。该值为空时默认为 `1`.

例子
--


```css
contrast(0)     /\* 完全灰色 \*/
contrast(65%)   /\* 65% 对比度 \*/
contrast(1)     /\* 无效果 \*/
contrast(200%)  /\* 两倍对比度 \*/
```

参见
--

* `<filter-function>`
* `blur()`
* `brightness()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()` (en-US)
* `invert()` (en-US)
* `opacity()`
* `saturate()` (en-US)
* `sepia()` (en-US)
opacity()
=========

The **`opacity()`** CSS 函数在输入的图片实例上应用透明度属性，它的结果是一个 `<filter-function>`.

尝试一下
----

**备注：** 这个函数与其他既有的`opacity`属性类似，区别在于有了 filters，有些浏览器会提供硬件加速以获取更好的性能表现。

语法
--
```

opacity(amount)
```

### 参数

`amount`

转化的数值，要求是一个 `<number>` 或一个 `<percentage>`（百分比）。值为 `0%` 是完全透明的，值为 100% 会保留原来的效果。值在 0% 与 100% 之间效果为线性变化的，参数的最小差值为 1。

Examples
--------


```css
opacity(0%)   /\* 完全透明\*/
opacity(50%)  /\* 50% 透明 \*/
opacity(1)    /\* 无效果 \*/
```

See also
--------

* `<filter-function>`
* CSS `opacity` property
brightness()
============

**`brightness()`** CSS函数将线性乘数应用于输入图像，使其看起来更亮或更暗。结果是一个`<filter-function>`.

尝试一下
----

语法
--
```

brightness(amount)
```

### 值

`amount`

输出的亮度值取决于`<number>`或`<percentage>`的大小。低于`100%` 的值会使图片变暗，超过`100%`的值将会使其变亮。当值为`0%`时将会创建一个全黑的图像，当值为`100%`时不会有任何变化。该值为空时默认为`1`.

例子
--


```css
brightness(0%)   /\* 全黑 \*/
brightness(0.4)  /\* 40% 亮度 \*/
brightness(1)    /\* 无效果 \*/
brightness(200%) /\* 两倍亮度 \*/
```

参见
--

* `<filter-function>`
drop-shadow()
=============

The **`drop-shadow()`** CSS function applies a drop shadow effect to the input image. Its result is a `<filter-function>`.

尝试一下
----

投影实际上是输入图像的 alpha 蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。

**备注：** 这个函数有点类似于 `box-shadow` 属性。`box-shadow` 属性在元素的整个框后面创建一个矩形阴影，而 `drop-shadow()` 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。

Syntax
------
```

drop-shadow(offset-x offset-y blur-radius spread-radius color)
```


The `drop-shadow()` function accepts a parameter of type `<shadow>` (defined in the `box-shadow` property), with the exception that the `inset` keyword is not allowed.

### Parameters

`offset-x` `offset-y` (required)

`offset-x`指定水平距离，其中负值将阴影放置到元素的左侧。`offset-y`指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 `0`，则阴影直接放置在元素后面。

`blur-radius` (optional)

阴影的模糊半径，指定为 `<length>`。值越大，阴影就越大，也越模糊。如果未指定，则默认为 `0`，从而产生清晰、不模糊的边缘。不允许有负值。

`spread-radius` (optional)

阴影的扩展半径，指定为 `<length>`. 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为 0，阴影的大小将与输入图像相同。

**警告：** 大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止 2020 年 10,14 日，Chrome v.85.0.4183.121（正式版本）,Microsoft Edge Beta v85.0.564.63(64 位), Firefox v.85.0.564.63 暂未支持

`color` (optional)

阴影的颜色，指定为 `<color>`。如果未指定，则使用 `color` 属性的值。

Examples
--------


```css
/\* Black shadow with 10px blur \*/
drop-shadow(16px 16px 10px black)

/\* Reddish shadow with 1rem blur and .3rem spread \*/
/\* WARNING: not generally supported by browsers \*/
drop-shadow(.5rem .5rem 1rem .3rem #e23)
```

See also
--------

* `<filter-function>`
* CSS `box-shadow` property
* `blur()`
* `brightness()`
* `contrast()`
* `grayscale()`
* `hue-rotate()` (en-US)
* `invert()` (en-US)
* `opacity()`
* `saturate()` (en-US)
* `sepia()` (en-US)
掌握外边距折叠
=======

区块的上下外边距有时会合并（折叠）为单个边距，其大小为两个边距中的最大值（或如果它们相等，则仅为其中一个），这种行为称为**外边距折叠**。注意：有设定浮动和绝对定位的元素不会发生外边距折叠。

有三种情况会形成外边距折叠：

相邻的兄弟元素

相邻的同级元素之间的外边距会被折叠（除非后面的元素需要清除之前的浮动）。

没有内容将父元素和后代元素分开

如果没有设定边框（border）、内边距（padding）、行级（inline）内容，也没有创建区块格式化上下文或*间隙*来分隔块级元素的上边距（`margin-top`）与其内一个或多个子代块级元素的上边距（`margin-top`）；或者没有设定边框、内边距、行级内容、高度（`height`）或最小高度（`min-height`）来分隔块级元素的下边距（`margin-bottom`）与其内部的一个或多个后代后代块元素的下边距（`margin-bottom`），则会出现这些外边距的折叠，重叠部分最终会溢出到父代元素的外面。

空的区块

如果块级元素没有设定边框、内边距、行级内容、高度（`height`）、最小高度（`min-height`）来分隔块级元素的上边距（`margin-top`）及其下边距（`margin-bottom`），则会出现其上下外边距的折叠。

一些需要注意的地方：

* 上述情况的组合会产生更复杂的（超过两个外边距的）外边距折叠。
* 即使某一外边距为 0，这些规则仍然适用。因此就算父元素的外边距是 0，第一个或最后一个子元素的外边距仍然会（根据上述规则）“溢出”到父元素的外面。
* 如果包含负边距，折叠后的外边距的值为最大的正边距与最小（绝对值最大）的负边距的和。
* 如果所有的外边距都为负值，折叠后的外边距的值为最小（绝对值最大）的负边距的值。这一规则适用于相邻元素和嵌套元素。
* 外边距折叠仅与垂直方向有关。
* `display` 设置为 `flex` 或 `grid` 的容器中不会发生外边距折叠。
示例
--

### HTML


```html
<p>这一段落的下边距与…</p>
<p>
  … 这一段落的上边距被折叠了，在两者之间产生了一个
  <code>1.2rem</code> 的边距。
</p>

<div>
  这个父元素包含两个段落！
  <p>该段落与上面的文本之间有一个 <code>.4rem</code> 的边距。</p>
  <p>我的下边距与我的父元素折叠，产生了一个 <code>2rem</code> 的边距。</p>
</div>

<p>我在上面元素的下方 <code>2rem</code> 处。</p>
```

### CSS


```css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}
```

### 结果

参见
--

* CSS 关键概念：
    + CSS 语法
    + At 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 值
        - 初始值
        - 计算值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素
CSS 基础框盒模型介绍
============

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 **CSS 基础框盒模型**（**CSS basic box model**），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

每个盒子由四个部分（或称*区域*）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：*内容边界* *Content edge*、*内边距边界* *Padding Edge*、*边框边界* *Border Edge*、*外边框边界* *Margin Edge*。

![CSS 盒模型](/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model/boxmodel.png)

内容区域
----

**内容区域**（content area）由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 *content-box 宽度*）和内容高度（或称 *content-box 高度*）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。

如果 `box-sizing` 为 `content-box`（默认），则内容区域的大小可明确地通过 `width`、`min-width`、`max-width`、`height`、`min-height` 和 `max-height` 控制。

内边距区域
-----

**内边距区域**（padding area）由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 *padding-box 宽度* 和 *padding-box 高度*。

内边距的粗细可以由 `padding-top`、`padding-right`、`padding-bottom`、`padding-left`，和简写属性 `padding` 控制。

边框区域
----

**边框区域**（border area）由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 *border-box 宽度*和 *border-box 高度*。

边框的粗细由 `border-width` 和简写的 `border` 属性控制。如果 `box-sizing` 属性被设为 `border-box`，那么边框区域的大小可明确地通过 `width`、`min-width`, `max-width`、`height`、`min-height`，和 `max-height` 属性控制。假如框盒上设有背景（`background-color` 或 `background-image`），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 `background-clip` 来改变。

外边距区域
-----

**外边距区域**（margin area）由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 *margin-box 宽度*和 *margin-box 高度*。

外边距区域的大小由 `margin-top`、`margin-right`、`margin-bottom`、`margin-left`，和简写属性 `margin` 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。

最后，请注意，除可替换元素外，对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由 `line-height` 属性决定，即使边框和内边距仍会显示在内容周围。

参见
--

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