recursal/MDN huggingface dataset:
border-inline-end-width
=======================

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

尝试一下
----

语法
--


```css
/\* 边框宽度值 \*/
border-inline-end-width: 2px;
border-inline-end-width: thick;

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


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

### 取值

`<'border-width'>`

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

形式定义
----

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

形式语法
----
```

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

示例
--

### 为竖排文本应用边框

#### HTML


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


#### CSS


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

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


#### 结果

规范
--

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

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

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

参见
--

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

简写属性 **`scroll-margin`** 同时设置元素的所有滚动外边距，其赋值方式较为类似 `margin` 属性为元素外边距赋值的方式。

尝试一下
----

属性构成
----

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

* `scroll-margin-bottom`
* `scroll-margin-left`
* `scroll-margin-right`
* `scroll-margin-top`
语法
--


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

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

### 取值

`<length>`

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

描述
--

通过滚动至示例内容两“页”之间的一点可见 `scroll-margin` 的效果。为 `scroll-margin` 指定的值决定了页面主要位于吸附口外的多少部分应保持可见。

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

形式定义
----

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

形式语法
----
```

scroll-margin =   
  <length>{1,4}    
  
```

示例
--

### 简单演示

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

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

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

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


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

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


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

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


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

**备注：** 此处虽然在所有侧均设置了 `scroll-margin`，但真正相关的仅有首侧边。此处若仅在此边上设置滚动外边距，例如 `scroll-margin-inline-start: 1rem` 或 `scroll-margin: 0 0 0 1rem`，则效果相同。

#### 结果

请自行尝试：

规范
--

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

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
<ratio>
=======

<ratio> CSS 数据类型，用于描述媒体查询中的宽高比，表示两个无单位值之间的比例。

句法
--

在 Media Queries Level 3 中，<ratio>数据类型包括一个正数的<integer>值，后跟一个正斜杠（'/'，Unicode U + 002F SOLIDUS）和第二个正数的<integer>值。斜杠前后的空格是可选的。第一个数字代表宽度，第二个数字代表高度。

在 Media Queries Level 4 中，<ratio>数据类型包括一个正数的<number>值，后跟一个正斜杠（'/'，Unicode U + 002F SOLIDUS）和第二个正数的<number>值。此外，允许使用单个<number>作为值。

例子
--

### 在媒体查询中使用


```css
@media screen and (min-aspect-ratio: 16/9) { ... }
```

### 常见的宽高比

( (

|  | 比 | 用法 |
| --- | --- | --- |
| Ratio4_3.png | `4/3` | 在 20 传统电视制式格式。 |
| Ratio16_9.png | `16/9` | 现代"宽屏”电视格式。 |
| Ratio1_1.85.png | `185/100`= `91/50` *(不允许非整数除数和除数)* | 自 20 世纪 60 年代以来最常见的电影格式。 |
| Ratio1_2.39.png | `239/100` *(不允许使用非整数红利和除数)* | "宽屏”,变形电影格式。 |

规范
--

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

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

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

参见
--

* `aspect-ratio` 媒体功能
-webkit-text-stroke-color
=========================

CSS 属性 **`-webkit-text-stroke-color`** 指定了文本字符的笔触颜色。若未设置此属性，则使用 `color` 属性的值。


```css
/\* 颜色值 \*/
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

/\* 全局值 \*/
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
-webkit-text-stroke-color: revert;
-webkit-text-stroke-color: revert-layer;
-webkit-text-stroke-color: unset;
```

语法
--

### 取值

`<color>`

笔触颜色。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | computed color |
| Animation type | a color |

形式语法
----
```

-webkit-text-stroke-color =   
  <color>    
  
```

示例
--

### 改变笔触颜色

#### HTML


```html
<p>带笔触的文本</p>
<input type="color" value="#ff0000" />
```


#### CSS


```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000; /\* 可在运行实例中被修改 \*/
}
```


```
const colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", (evt) => {
  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});
```


#### 结果

规范
--

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-color |

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

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

参见
--

* 宣布此特性的 Safari 博客文章
* 解释此特性的 CSS-Tricks 文章
* `-webkit-text-fill-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
CSS Text
========

**CSS Text** 是一个控制文本渲染方式的 CSS 模块，例如换行、对齐、空格处理、大小写。

参考
--

### 属性

* `hanging-punctuation`
* `hyphens`
* `letter-spacing`
* `line-break`
* `overflow-wrap`
* `tab-size`
* `text-align`
* `text-align-last`
* `text-indent`
* `text-justify`
* `text-size-adjust`
* `text-transform`
* `white-space`
* `word-break`
* `word-spacing`
规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |
| CSS Text Module Level 3  |
| CSS Text Module Level 4  |
color
=====

CSS **`color`** 属性设置元素的文本以及文本装饰的前景色颜色值，并设置 `currentcolor` 值。`currentcolor` 可以用作*其他*属性的间接值，且为其他颜色属性（如 `border-color`）的默认值。

尝试一下
----

对于在 HTML 中使用颜色的概述，请参考使用 CSS 为 HTML 元素应用颜色。

语法
--


```css
/\* 关键字值 \*/
color: currentcolor;

/\* <named-color> 值 \*/
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/\* <hex-color> 值 \*/
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/\* <rgb()> 值 \*/
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/\* <hsl()> 值 \*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/\* <hwb()> 值 \*/
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);

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


`color` 属性被指定为 `<color>` 类型的单值。

注意值必须是一致的 `color` 值。它不可以是 `<gradient>`（实际上为 `<image>` 类型之一）。

### 值

`<color>`

设置元素的文本和装饰部分的颜色。

`currentcolor`

将颜色设置为元素的 `color` 属性值。但是，如果设置为 `color` 的值，`currentcolor` 将被视为 `inherit`。

无障碍考虑
-----

有一点很重要，要确保文本颜色与文本所在背景之间的对比度足够高，以便低视力的人群能够阅读页面内容。

颜色的对比度是通过比较文本和背景颜色值的亮度确定的。要符合当前的 Web 内容无障碍指南（WCAG），文本至少要有 4.5:1 的比例，大文本（比如标题）至少要有 3:1 的比例。具有加粗和至少 18.66px 大小，或者具有至少 24px 大小的文本称为大文本。

* WebAIM：颜色对比度检查器
* MDN 理解 WCAG，指南 1.4 解释 (en-US)
* 理解成功标准 1.4.3 | W3C 理解 WCAG 2.0
形式定义
----

|  |  |
| --- | --- |
| 初始值 | `canvastext` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | computed color |
| Animation type | by computed value type |

形式语法
----
```

color =   
  <color>    
  
```

示例
--

### 使文本为红色

以下方式可以使得文本显示为红色：


```css
p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255, 0, 0);
}
p {
  color: rgb(100%, 0%, 0%);
}
p {
  color: hsl(0, 100%, 50%);
}

/\* 50% 透明 \*/
p {
  color: #ff000080;
}
p {
  color: rgba(255, 0, 0, 0.5);
}
p {
  color: hsla(0, 100%, 50%, 0.5);
}
```

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # the-color-property |

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

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

参见
--

* 颜色 `<color>` 数据类型
* 其他颜色相关属性：`background-color`、`border-color`、`outline-color`、`text-decoration-color`、`text-emphasis-color` (en-US)、`text-shadow`、`caret-color`、`column-rule-color` 和 `color-adjust` (en-US)
* 使用 CSS 为 HTML 元素应用颜色
inset-block
===========

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

尝试一下
----

属性构成
----

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

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


```css
/\* 长度值 \*/
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /\* 应用于块首和块末 \*/

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

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

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

### 取值

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

形式定义
----

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

形式语法
----
```

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

示例
--

### 设置块首和块末偏移

#### HTML


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


#### CSS


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

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


#### 结果

规范
--

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

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

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

参见
--

* 对应的实体属性：`top`、`right`、`bottom` 和 `left`
* 对应的实体简写属性：`inset`
* 对应的行向简写属性：`inset-inline`
* `writing-mode`、`direction`、`text-orientation`
CSS 过渡
======

**CSS 过渡**这一 CSS 模块让你可以在特定的 CSS 属性值之间创建平缓过渡。可通过指定这些过渡的计时函数、时长和其他属性控制其行为。

参考
--

### 属性

* `transition`
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
指南
--

使用 CSS 过渡

关于如何使用 CSS 创建过渡的分步教程。此文描述了各相关 CSS 属性并解释了这些属性如何互相作用。

规范
--

| Specification |
| --- |
| CSS Transitions  |

参见
--

* 与 CSS 过渡相关的 CSS 动画为动画性属性提供了更精细的控制
指定值
===

概述
--

CSS 属性的 **指定值** (specified value) 会通过下面 3 种途径取得：

1. 在当前文档的样式表中给这个属性赋的值，会被优先使用。例如：把 `color` 属性的值设为`green` ，那么对应元素内的文字就会变成绿色。
2. 如果在当前文档的样式表中没有给这个属性赋值，那么它会尝试从父元素那继承一个值。例如：在一个 `<div>` 内部放置一个段落 (`<p>`)，这个 `<div>` 的 `font` 属性值为 "Arial"，而 `<p>` 的 `font` 属性没有被赋值，那么它的字体就会继承为 Arial
3. 如果上面的两种途径都不可行，则把 CSS 规范中针对这个元素的这个属性的初始值作为指定值
相关规范
----

* CSS 2.1 Assigning property values #specified-value
CSS 容器查询
========

容器查询使你能够根据元素容器的大小应用样式。例如，如果容器在周围的上下文中可用的空间更少，你可以隐藏某些元素或使用较小的字体。容器查询是媒体查询的另一种选择，后者根据视口大小或其他设备特征为元素应用样式。

![一个基于视口宽度（即浏览器的完整宽度）的媒体查询和一个基于容器上下文宽度（即容器元素的宽度）的容器查询](/zh-CN/docs/Web/CSS/CSS_container_queries/container-query.svg)

使用容器查询
------

要使用容器查询，你需要在元素上声明一个**局限上下文**，以便浏览器知道你可能希望稍后查询此容器的尺寸。为此，请使用 `container-type` (en-US) 属性，值为 `size`、`inline-size` 或 `normal`。

这些值具有以下效果：

`size`

查询将基于容器的行向和块向尺度，将布局、样式和大小的限制应用于容器。

`inline-size`

查询将基于容器的行向尺度，将布局、样式和行向大小的限制应用于元素。

`normal`

该元素不是任何容器大小查询的查询容器，但仍然是容器样式查询的查询容器。

考虑以下带有标题和一些文本的博客文章的卡片组件示例：


```html
<div class="post">
  <div class="card">
    <h2>卡片标题</h2>
    <p>卡片内容</p>
  </div>
</div>
```


你可以使用 `container-type` 属性创建一个容器上下文：


```css
.post {
  container-type: inline-size;
}
```


接下来，使用 at 规则 `@container` (en-US) 定义容器查询。以下示例中的查询将根据具有局限上下文的最近祖先元素的大小应用样式于元素。具体而言，如果容器宽度大于 `700px`，则此查询将为卡片标题应用更大的字体大小：


```css
/\* 默认的卡片标题样式 \*/
.card h2 {
  font-size: 1em;
}

/\* 如果容器宽度大于 700px \*/
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}
```


使用容器查询时，卡片可以在页面的多个区域中重复使用，无需每次都知道它放置在的具体位置。如果包含卡片的容器宽度小于 `700px`，卡片标题的字体将变小，如果卡片在宽度大于 `700px` 的容器中，则卡片标题的字体将变大。

有关容器查询语法的更多信息，请参阅 `@container` (en-US) 页面。

### 为局限上下文命名

在上一节中，容器查询基于有局限上下文的最近祖先元素应用样式。可以使用 `container-name` (en-US) 属性为局限上下文命名。命名后，可以在 `@container` 查询中使用该名称以选择特定容器。以下示例创建了一个名为 `sidebar` 的局限上下文：


```css
.post {
  container-type: inline-size;
  container-name: sidebar;
}
```


然后，你可以使用 at 规则 `@container` 选择此局限上下文：


```css
@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}
```


有关为局限上下文命名的更多信息，请参见 `container-name` (en-US) 页面。

### 简写容器语法

声明局限上下文的简写方法是使用 `container` 属性：


```css
.post {
  container: sidebar / inline-size;
}
```


有关此属性的更多信息，请参见 `container` (en-US) 参考。

### 容器查询长度单位

当应用样式到一个容器中使用容器查询时，可以使用容器查询长度单位。这些单位指定了一个相对于查询容器尺寸的长度。使用相对于容器的长度单位的组件更灵活，可以在不必重新计算具体长度值的情况下在不同的容器中使用。

容器查询长度单位包括：

* `cqw`：查询容器宽度的 1%
* `cqh`：查询容器高度的 1%
* `cqi`：查询容器行向尺寸的 1%
* `cqb`：查询容器块尺寸的 1%
* `cqmin`：`cqi` 和 `cqb` 中较小的值
* `cqmax`：`cqi` 和 `cqb` 中较大的值

以下示例使用 `cqi` 单位根据容器的行向尺寸设置标题的字体大小：


```css
@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}
```


有关这些单位的更多信息，请参阅容器查询长度单位参考。

容器查询的回退
-------

对于尚不支持容器查询的浏览器，`grid` 和 `flex` 可用于为该页面上使用的卡片组件创建类似的效果。以下示例使用 `grid-template-columns` 声明为卡片组件创建了一个两列布局。


```css
.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
```


如果你想在视口较小的设备上使用单列布局，则可以使用媒体查询来更改网格模板：


```css
@media (max-width: 700px) {
  .card {
    grid-template-columns: 1fr;
  }
}
```

参见
--

* 媒体查询
* CSS `@container` (en-US) at 规则
* CSS `contain` 属性
* CSS `container` (en-US) 简写属性
* CSS `container-name` (en-US) 属性
* CSS `content-visibility` 属性
* Say Hello to CSS Container Queries，作者 Ahmad Shadeed
* Container Queries: a Quick Start Guide
* Collection of Container Queries articles
hanging-punctuation
===================

**`hanging-punctuation`** CSS 属性指定了标点符号应该放在文本句子的开头还是结尾。悬挂标点符号可能被放在线框外。


```css
/\* Keyword values \*/
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/\* Two keywords \*/
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/\* Three keywords \*/
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/\* Global values \*/
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;
```


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

语法
--

这个属性可被指定多个值，可以是一个值，也可以是两个值，或者是三个值。

* 一个值 语法：在下面列表中的任意一个值。
* 两个值 语法：
    + 或者与以下任何一个一起使用，并以它们结尾：last，allow-end 或 force-end
    + 或者与以下任何一个一起使用，并以它们开头：first，allow-end 或 force-end。
* 三个值 语法：
    + 或者`first`, `allow-end`, 和`last`
    + 或者 `first`, `force-end`, 和 `last`.
### 取值

`none`

无悬挂字符。

`first`

显示元素的第一个格式化行开头的括号或引号。

`last`

显示元素的最后一个格式化行结尾的括号或引号。

`force-end`

显示行结尾处的句号或逗号。

`allow-end`

如果预先没有其他适合的来适应的，则在行尾显示句号或逗号。

### 正式语法
```

hanging-punctuation =   
  none                                            |  
  [ first || [ force-end | allow-end ] || last ]    
  
```

示例
--

### HTML


```html
<p>
  “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim
  nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor
  massa, sit amet vulputate nulla pharetra ut.”
</p>
```

### CSS


```css
p {
  hanging-punctuation: first;
  margin: 0.5rem;
}
```

### Result

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

* CSS Text Module Level 3 (Working Draft, 10-Oct-2013)
* CSS Text Module Level 3 (Editor’s Draft, 03-May-2017)
height
======

`height` CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 `box-sizing` 设置为 `border-box` , 这个属性决定的将是边框区域（border area）的高度。

尝试一下
----

`min-height` 和 `max-height` 属性会覆盖 `height`。语法
--


```css
/\* Keyword value \*/
height: auto;

/\* <length> values \*/
height: 120px;
height: 10em;

/\* <percentage> value \*/
height: 75%;

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

### 值

`<length>`

将高度定义为一个绝对值。

`<percentage>`

将高度定义为相对包含块高度的百分比。

`border-box` 
实验性

如果设置该值，则 `<length>` 或者 `<percentage>` 会设置为该元素的 border box。

`content-box` 
实验性

如果设置该值，则 `<length>` 或者 `<percentage>` 会设置为该元素的 content box。

`auto`

由浏览器为元素计算并选择一个高度。

`fill` 
实验性

根据文字方向，使用 `fill-available` 作为行大小或者块大小。

`max-content` 
实验性

设置为允许的最大高度。

`min-content` 
实验性

设置为允许的最小高度。

`available` 
实验性

包含块高度减去当前元素的边距，边框和填充。

`fit-content` 
实验性

将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, ))

### Formal syntax
```

height =   
  auto                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### HTML


```html
<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
  <div id="child">I'm half the height of my parent.</div>
</div>
```

### CSS


```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

### 结果

无障碍问题
-----

确保设定了 `height` 的元素在显示上不会被截断，或者当页面放大时增大的字体大小不会遮挡其他内容。

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements but non-replaced inline elements, table columns, and column groups |
| 是否是继承属性 | 否 |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`. A percentage height on the root element is relative to the initial containing block. |
| 计算值 | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

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

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

参见
--

* box model, `width`, `box-sizing`, `min-height`, `max-height`
CSS 分页媒体
========

**CSS 分页媒体**（paged media）模块定义控制打印内容或将内容拆分为离散页面的任何其他媒体的内容的表现属性。它允许你设置分页、控制可打印区域、以不同方式设置左侧和右侧页面的样式，以及控制元素内的分隔符。

参考
--

### 属性

* `break-after`
* `break-before` (en-US)
* `break-inside`
* `orphans` (en-US)
* `widows`
### At 规则

* `@page`
### 伪类

* `:blank`
* `:first`
* `:left`
* `:right`
规范
--

| Specification |
| --- |
| CSS Paged Media Module Level 3  |
| CSS Fragmentation Module Level 3  |

参见
--

* 打印指南
* CSS 媒体查询模块
:blank
======

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

**`:blank`** CSS 伪类选择器 用于匹配如下节点

1. 没有子节点;
2. 仅有空的文本节点;
3. 仅有空白符的文本节点。
形式语法
----

Error: could not find syntax for this item示例
--

### HTML


```html
<div></div>
```

### CSS
```

:root {
  overflow: hidden;
  max-width: 100vw;
  max-height: 100vh;
}

div {
  background-color: #ccc;
  box-sizing: border-box;
  height: 100vh;
  min-height: 16px;
  min-height: 1rem;
}

:-moz-only-whitespace {
  border-color: lime;
}
```



```css
div {
  border: 4px solid red;
}

:blank {
  border-color: lime;
}
```

### 结果

规范
--

在 Selectors Level 4 中被简要地定义为 `:blank`，但其功能随后被并入 `:empty`，而 `:blank` 则被重新定义为空的 `<input>`。

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

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

参见
--

* `:empty`
:scope
======

**`:scope`** 属于 CSS 伪类，它表示作为选择器要匹配的参考点的元素。


```css
/\* Selects a scoped element \*/
:scope {
  background-color: lime;
}
```


当前，在样式表中使用时，`:scope` 等效于 `:root`，因为目前尚无一种方法来显式建立作用域元素。当从 DOM API 使用，如（`querySelector()`, `querySelectorAll()`, `matches()`, 或 `Element.closest()`）, `:scope` 匹配你调用 API 的元素。

用法
--

Error: could not find syntax for this item示例
--

### Identity match

在这个简单的示例中，我们演示了调用 `Element.matches()` 方法中使用 `:scope` 伪类来匹配调用它的元素。

#### JavaScript


```js
let paragraph = document.getElementById("para");
let output = document.getElementById("output");

if (paragraph.matches(":scope")) {
  output.innerText = "Yep, the element is its own scope as expected!";
}
```


#### HTML


```html
<p id="para">
  This is a paragraph. It is not an interesting paragraph. Sorry about that.
</p>
<p id="output"></p>
```


#### 结果

### Direct children

当需要获取已检索到的的直接后代元素时，`:scope` 伪类很有用。

#### JavaScript


```js
var context = document.getElementById("context");
var selected = context.querySelectorAll(":scope > div");

document.getElementById("results").innerHTML = Array.prototype.map
  .call(selected, function (element) {
    return "#" + element.getAttribute("id");
  })
  .join(", ");
```


#### HTML


```html
<div id="context">
  <div id="element-1">
    <div id="element-1.1"></div>
    <div id="element-1.2"></div>
  </div>
  <div id="element-2">
    <div id="element-2.1"></div>
  </div>
</div>
<p>
  Selected elements ids :
  <span id="results"></span>
</p>
```


#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-scope-pseudo |

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

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

参见
--

* `:root` 与 `Pseudo-classes`
* 使用选择器定位 DOM 元素
* `Element.querySelector()` 与 `Element.querySelectorAll()`
* `Document.querySelector()` 与 `Document.querySelectorAll()`
* `DocumentFragment.querySelector()` 与 `DocumentFragment.querySelectorAll()`
* `ParentNode.querySelector()` 与 `ParentNode.querySelectorAll()`