recursal/MDN huggingface dataset:
border-end-start-radius
=======================

CSS 属性 **`border-end-start-radius`** 定义了元素的逻辑边框半径，并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径。此属性便于构建适应各种文本朝向和书写模式的样式。

尝试一下
----

此属性影响元素块末与行首之间的拐角。例如在 `horizontal-tb` 书写模式和 `ltr` 行内方向下，此属性对应于 `border-bottom-left-radius` 属性。

语法
--


```css
/\* 长度值 \*/
/\* 使用一个值所得拐角为圆形 \*/
border-end-start-radius: 10px;
border-end-start-radius: 1em;

/\* 使用两个值所得拐角为椭圆形 \*/
border-end-start-radius: 1em 2em;

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

### 取值

`<length-percentage>`

表示圆的半径或者椭圆半长轴和半短轴的尺寸。表示绝对尺寸可用 CSS `<length>` 数据类型所允许的任意单位。水平轴的百分比参照盒的宽度，竖直轴的百分比参照盒的高度。负值无效。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the corresponding dimension of the border box |
| 计算值 | two absolute `length`s or `percentage`s |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

border-end-start-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 竖排文本的边框半径

#### HTML


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


#### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-start-radius: 10px;
}
```


#### 结果

规范
--

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

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`border-top-right-radius`
* `writing-mode`、`direction`、`text-orientation`
CSS Positioning
===============

**CSS Positioning** 是一个 CSS 模块，用来定义如何将元素在页面中进行绝对定位和相对定位。

参考
--

### CSS 属性

* `bottom`
* `clear`
* `display`
* `float`
* `left`
* `position`
* `right`
* `top`
* `visibility`
* `z-index`
向导
--

理解 CSS z-index

通过几个例子来展现上下文叠加的概念以及解释 z-ordering 是如何工作的。

规范
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |
column-span
===========

CSS 属性 **`column-span`** 的值被设置为 `all` 时，可以让一个元素跨越所有的列。

尝试一下
----


```css
/\* 关键字值 \*/
column-span: none;
column-span: all;

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


一个跨越多列的元素被称为**跨越元素**（spanning element）。

语法
--

`column-span` 属性可以被指定为下面列出的关键字值之一。

### 取值

`none`

元素不跨多个列。

`all`

元素横跨所有列。元素出现之前，出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的区块格式化上下文。

形式定义
----

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

形式语法
----
```

column-span =   
  none  |  
  all     
  
```

示例
--

### 使标题跨越列

在该示例中，标题跨越了文章中的所有列。

#### HTML


```html
<article>
  <h2>这是一个跨越了所有的列的标题</h2>
  <p>h2 元素应该跨越所有列。文本的其余内容应该分布在各列中。</p>
  <p>这是一些使用 CSS `columns` 属性分成三列的文本。文本在各列中均匀分布。</p>
  <p>这是一些使用 CSS `columns` 属性分成三列的文本。文本在各列中均匀分布。</p>
  <p>这是一些使用 CSS `columns` 属性分成三列的文本。文本在各列中均匀分布。</p>
  <p>这是一些使用 CSS `columns` 属性分成三列的文本。文本在各列中均匀分布。</p>
</article>
```


#### CSS


```css
article {
  columns: 3;
}

h2 {
  column-span: all;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # column-span |

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

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

参见
--

* 行级元素
* `HTMLSpanElement`
:active
=======

CSS **`:active`** 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。


```css
/\* Selects any <a> that is being activated \*/
a:active {
  color: red;
}
```


`:active` 伪类一般被用在 `<a>` 和 `<button>` 元素中。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的`<label>`标签被激活的表格元素。

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 `:link`，`:hover` 和 `:visited`。为保证样式生效，需要把 `:active` 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 *LVHA 顺序*：`:link` — `:visited` — `:hover` — `:active`。

**备注：** 在有多键鼠标的系统中，CSS 3 规定 `:active` 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。

语法
--
```

:active
```

示例
--

### 激活链接

#### HTML


```html
<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>
```


#### CSS


```css
a:link {
  /\* 未访问链接 \*/
  color: blue;
}
a:visited {
  /\* 已访问链接 \*/
  color: purple;
}
a:hover {
  /\* 用户鼠标悬停 \*/
  background: yellow;
}
a:active {
  /\* 激活链接 \*/
  color: red;
}

p:active {
  /\* 激活段落 \*/
  background: #eee;
}
```


#### 结果

### 激活表单元素

#### HTML


```html
<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
```


#### CSS


```css
form :active {
  color: red;
}

form button {
  background: white;
}
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-active |
| Selectors Level 4 # the-active-pseudo |

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

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

参见
--

* 链接相关伪类：`:link`、`:visited` 和 `:hover`。
border-start-end-radius
=======================

CSS 属性 **`border-start-end-radius`** 定义了元素的逻辑边框半径，并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径。此属性便于构建适应各种文本朝向和书写模式的样式。

尝试一下
----

此属性影响元素块首与行末之间的拐角。例如在 `horizontal-tb` 书写模式和 `ltr` 行内方向下，此属性对应于 `border-top-right-radius` 属性。

语法
--


```css
/\* 长度值 \*/
/\* 使用一个值所得拐角为圆形 \*/
border-start-end-radius: 10px;
border-start-end-radius: 1em;

/\* 使用两个值所得拐角为椭圆形 \*/
border-start-end-radius: 1em 2em;

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

### 取值

`<length-percentage>`

表示圆的半径或者椭圆半长轴和半短轴的尺寸。表示绝对尺寸可用 CSS `<length>` 数据类型所允许的任意单位。水平轴的百分比参照盒的宽度，竖直轴的百分比参照盒的高度。负值无效。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the corresponding dimension of the border box |
| 计算值 | two absolute `length`s or `percentage`s |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

border-start-end-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 竖排文本的边框半径

#### HTML


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


#### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-end-radius: 10px;
}
```


#### 结果

规范
--

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

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

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

参见
--

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

**`top`**样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。


```css
/\* <length> values \*/
top: 3px;
top: 2.4em;

/\* 参照于包含块高度的百分比 \*/
top: 10%;

/\* Keyword value \*/
top: auto;

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


`top`的效果取决于元素的`position`属性：

* 当`position`设置为`absolute`或`fixed`时，`top`属性指定了定位元素上外边距边界与其包含块上边界之间的偏移。
* 当`position`设置为`relative`时，`top`属性指定了元素的上边界离开其正常位置的偏移。
* 当`position`设置为`sticky`时，如果元素在 viewport 里面，`top`属性的效果和 position 为`relative`等同；如果元素在 viewport 外面，`top`属性的效果和 position 为`fixed`等同。
* 当`position`设置为`static`时，`top`属性无效。

当`top`和`bottom`同时指定时，并且 `height`没有被指定或者指定为`auto`的时候，`top`和`bottom` 都会生效，在其他情况下，如果 `height`被限制，则`top`属性会优先设置，`bottom`属性则会被忽略。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the height of the containing block |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length, percentage or calc(); |

语法
--

### 取值

`<length>`

可以是负的，正的 或者 null `<length>` 表示：

* 对于**绝对定位的元素**，元素下外边距边界与其包含块下边界之间的偏移。
* 对于**相对定位定位的元素**，元素的下边界离开其正常位置的偏移。

`<percentage>`

代表元素包含块的高度的百分比 `<percentage>`。

`auto`

这个关键字表示：

* 对于绝对定位元素，元素将忽略此属性已`bottom`属性为准，如果此时设置`height: auto`，将基于内容需要的高度设置高度；如果`bottom`也为`auto`的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。
* 对于相对定位元素，元素相对正常位置的偏移量将基于`bottom`属性；如果`bottom`也为`auto`的话，元素将不会有偏移。

`inherit`

这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为 `<length>`， `<percentage>` 或 `auto` 一样。

示例
--


```css
body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}
```



```html
<div>The size of this content is determined by the position of its edges.</div>
```

规范
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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

CSS 函数 **`exp()`** 为指数型函数，以数值为参数，返回数学常数 `e` 的指定次方。

数学常数 e 为自然对数的底数，约为 `2.718281828459045`。

`exp(number)` 函数含有单个计算式，此式返回与 `pow(e, number)` 相同的值。

语法
--


```css
/\* <number> 值 \*/
width: calc(100px * exp(-1)); /\* 100px \* 0.367879441171442 = 36px \*/
width: calc(100px * exp(0)); /\* 100px \* 1 = 100px \*/
width: calc(100px * exp(1)); /\* 100px \* 2.718281828459045 = 217px \*/
```

### 参数

`exp(number)` 函数仅接受一值作为其参数。

`number`

解析为 `<number>` 的计算式，表示 `e` 的幂次。

### 返回值

返回表示 enumber 的非负 `<number>`，为计算 `e` 的 `number` 次方的结果。

* 若 `number` 为 `-Infinity`，则结果为 `0`。
* 若 `number` 为 `0`，则结果为 `1`。
* 若 `number` 为 `1`，则结果为 `e`（即 `2.718281828459045`）。
* 若 `number` 为 `Infinity`，则结果为 `Infinity`。
### 形式语法
```

<exp()> =   
  exp( <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          
  
```

示例
--

### 旋转元素

由于 `exp()` 函数返回 `<number>`，故可用于旋转（`rotate`）元素。

#### HTML


```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```


#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```



```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(calc(1turn * exp(-1))); // 0.3678794411714423turn
}
div.box-2 {
  transform: rotate(calc(1turn * exp(-0.75))); // 0.4723665527410147turn
}
div.box-3 {
  transform: rotate(calc(1turn * exp(-0.5))); // 0.6065306597126334turn
}
div.box-4 {
  transform: rotate(calc(1turn * exp(-0.25))); // 0.7788007830714049turn
}
div.box-5 {
  transform: rotate(calc(1turn * exp(0))); // 1turn
}
```


#### 结果

### 以固定比值缩放标题

`exp()` 函数可用于如 CSS 模块式缩放等策略，即将页面上的所有字体尺寸以固定比值互相联系在一起。

#### HTML


```html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```


#### CSS


```css
h1 {
  font-size: calc(1rem * exp(1.25)); // 3.4903429574618414rem
}
h2 {
  font-size: calc(1rem * exp(1)); // 2.718281828459045rem
}
h3 {
  font-size: calc(1rem * exp(0.75)); // 2.117000016612675rem
}
h4 {
  font-size: calc(1rem * exp(0.5)); // 1.6487212707001282rem
}
h5 {
  font-size: calc(1rem * exp(0.25)); // 1.2840254166877414rem
}
h6 {
  font-size: calc(1rem * exp(0)); // 1rem
}
```


#### 结果

规范
--

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

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

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

参见
--

* `pow()`
* `sqrt()`
* `hypot()`
* `log()`
inset-inline
============

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

尝试一下
----

属性构成
----

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

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


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

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

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

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

### 取值

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

形式定义
----

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

形式语法
----
```

inset-inline =   
  <'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-inline: 20px 50px;
  background-color: #c8c800;
}
```


#### 结果

规范
--

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

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

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

参见
--

* 对应的实体属性：`top`、`right`、`bottom` 和 `left`
* 对应的实体简写属性：`inset`
* 对应的块向简写属性：`inset-block`
* `writing-mode`、`direction`、`text-orientation`
<length-percentage>
===================

CSS **`<length-percentage>`** 数据类型表示一个值，该值可以是 `<length>` 或 `<percentage>`。

语法
--

参考 `<length>` 和 `<percentage>` 的文档以具体了解该类型允许使用的语法。

形式语法
----
```

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

示例
--

### length-percentage 示例

以下简单示例描述了使用 `<length-percentage>` 值的一些属性。

#### HTML


```html
<p>你可以在很多地方使用百分比（percentage）和长度（length）值。</p>
```


#### CSS


```css
p {
  /\* length-percentage 示例 \*/
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /\* 长度值示例 \*/
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /\* 百分比值示例 \*/
  text-size-adjust: 20%;
}
```


#### 结果

在 calc() 中使用
------------

当 `<length-percentage>` 被指定为允许类型时，这意味着百分比解析为长度，因此可以在 `calc()` 表达式中使用。因此，`width` 可以接受以下所有值：


```css
width: 200px;
width: 20%;
width: calc(100% - 200px);
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

参见
--

* `<percentage>`
* `<length>`
* CSS 值和单位
<url>
=====

概述
--

CSS 数据类型 `<url>` 指向一个资源。它没有独有的表达形式，只能通过 `url()` 函数定义。

**备注：** **URI 和 URL?**

URI（统一资源标识符）与 URL（统一资源定位符）不同。URL 描述资源的位置，而 URI 描述资源的 id。URI 可以是一个资源的 URL（地址）、或 URN（统一资源名称）。

在 CSS Level 1 中，`url()` 函数被引入并用于描述 URL，即地址（虽然没有明确定义，但指一个 CSS 数据类型 `<url>`）

在 CSS Level 2 中，`url()` 函数被扩展为可以描述任何一个 URI，即 URL 或 URN。这一定义导致 `url()` 函数被用于创建一个 `<uri>` 数据类型。这一行为使人迷惑，且在 CSS 中几乎从不使用 URN。

为了解决这一问题，在 CSS Level 3 中恢复了它的初始定义， `url()` 函数被明确定义为指代 `<url>` CSS 数据类型，且 `<uri>` CSS 数据类型不再存在。

注意，这些语义信息并不会影响 Web 开发者的开发和对此数据类型的具体实现。

许多 CSS 属性 将 URL 作为属性值，例如 `background-image`、`cursor`、`@font-face`、`list-style` 等。

url() 函数
--------

URL 可以使用单引号或双引号包含，也可以直接书写。可以在此函数中使用相对地址。相对地址相对于 CSS 样式表的 URL（而不是网页的 URL）。

语法
--
```

 <CSS 属性>:  url("http://mysite.example.com/mycursor.png")

 <CSS 属性>:  url(http://mysite.example.com/mycursor.png)
```


**备注：** 从 Firefox 15 开始，不再允许在未用引号包含的 url() 中使用大于 0x7e 的控制字符。详情请查看 Firefox bug 752230。

示例
--


```css
.topbanner {
  background: url("topbanner.png") #00d no-repeat fixed;
}
```



```css
ul {
  list-style: square url(http://www.example.com/redball.png);
}
```

规范
--

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

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

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

**`:empty`** CSS 伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令和 CSS `content` 不会影响元素是否被认定为空。

尝试一下
----

**备注：** 在选择器 Level 4 中，`:empty` 伪类被更改为与 `:-moz-only-whitespace` 类似一样的行为，但目前还没有浏览器支持它。

语法
--


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

示例
--

### HTML


```html
<div class="box"><!-- 它将呈现为青柠色。 --></div>
<div class="box">我将会是粉色。</div>
<div class="box">
  <!-- 由于这个注释周围存在空格，所以它将在旧版本的浏览器中呈现为粉色。 -->
</div>
<div class="box">
  <p>
    <!-- 由于这个注释周围存在无法折叠的空格和元素，所以它将在所有浏览器中呈现为粉色。 -->
  </p>
</div>
```

### CSS
```

body {
  display: flex;
  justify-content: space-around;
}
```



```css
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}
```

### 结果

无障碍考虑
-----

辅助技术（如屏幕阅读器）无法解析交互内容为空的情况。所有交互内容必须具有无障碍名称，这是通过为交互控件的父元素（如锚点、按钮等）提供文本值来创建的。无障碍名称将交互控件暴露给无障碍树，这是一个传达对辅助技术有用的信息的 API。

提供交互控件的无障碍名称的文本可以使用一些属性的组合进行隐藏，这些属性可以将其在视觉上从屏幕上移除，但可以被辅助技术解析。这通常用于仅依靠图标来传达目的的按钮。

* 什么是无障碍名称？ | The Paciello Group
* 隐藏内容以获得更好的辅助功能 | Go Make Things
* MDN 理解 WCAG，指南 2.4 解释 (en-US)
* 理解成功标准 2.4.4 | W3C 理解 WCAG 2.0
规范
--

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

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

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

参见
--

* `:-moz-only-whitespace` 
非标准
 是选择器 Level 4 更改的前缀实现。
* `:blank` 
实验性
text-size-adjust
================

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

**`text-size-adjust`** CSS 控制将一些手机或平板设备上使用的文本溢出算法（text inflation algorithm）。其他类型的设备上的浏览器会忽略此属性。

因为许多网站还没有适配屏幕较小的设备，移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。它们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的视口去布局网页，通常是 800 到 1000 像素。为了将视口上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。

因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法放大文本，改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。`text-size-adjust` 这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。

语法
--


```css
/\* 关键字值 \*/
text-size-adjust: none;
text-size-adjust: auto;

/\* <percentage> 值 \*/
text-size-adjust: 80%;

/\* 全局值 \*/
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: revert;
text-size-adjust: revert-layer;
text-size-adjust: unset;
```


`text-size-adjust` 属性的值为 `none`、`auto` 或 `<percentage>`。

### 属性值

`none`

禁用浏览器的文本溢出算法。

`auto`

启用浏览器的文本溢出算法。该值一般用于取消先前使用 CSS 设置的 `none`。

`<percentage>`

启用浏览器的文本溢出算法，并使用用一个百分数来确定文本放大程度。

### 形式定义

|  |  |
| --- | --- |
| 初始值 | `auto` for smartphone browsers supporting inflation, `none` in other cases (and then not modifiable). |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| Percentages | yes, refer to the corresponding size of the text font |
| 计算值 | as specified |
| Animation type | by computed value type |

### 形式语法
```

text-size-adjust =   
  auto                |  
  none                |  
  <percentage [0,∞]>    
  
```

规范
--

| Specification |
| --- |
| CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control |

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

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

参见
--

* Apple 的文档
* Google Chrome 的行为描述
* Gecko 的行为描述，来自 L. David Baron
word-spacing
============

CSS 属性 **`word-spacing`** 设置标签、单词之间的空格长度。

尝试一下
----

语法
--


```css
word-spacing: normal; /\* Keyword value \*/
word-spacing: 3px; /\* <length> values \*/
word-spacing: 0.3em;

word-spacing: inherit;
```

### Values

`normal`

正常的单词间距，由当前字体和/或浏览器定义。

`<length>`

通过指定具体的额外间距来增加字体的单词间距。查看 `<length>` 了解可用单位。

`<percentage>`

通过指定受影响字符的宽度的百分比的方式来增加的间距。

示例
--

### HTML


```html
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>
```

### CSS


```css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}
```

无障碍考虑
-----

过大的正或负的 `word-spacing` 将使应用样式的句子不可读。对于应用了非常大正值样式的文本，单词将相距非常远，甚至不再显示为句子。对于使用非常大负值样式的文本，单词将相互重叠，甚至每个单词的开头和结尾都无法识别。

必须根据具体情况确定合适的 `word-spacing` 值，因为不同的字体具有不同的字符宽度。没有一个值可以确保所有字体系列都自动保持其易读性。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| Percentages | refer to the width of the affected glyph |
| 计算值 | absolute `length` |
| Animation type | a length |

形式语法
----
```

word-spacing =   
  normal    |  
  <length>    
  
```

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # word-spacing-property |

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

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

参见
--

* `letter-spacing`
scroll-padding-bottom
=====================

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

尝试一下
----

语法
--


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

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

/\* 全局值 \*/
scroll-padding-bottom: inherit;
scroll-padding-bottom: initial;
scroll-padding-bottom: revert;
scroll-padding-bottom: revert-layer;
scroll-padding-bottom: 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-bottom =   
  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 滚动吸附明确控制滚动
column-count
============

**column-count** CSS 属性，描述元素的列数。
```

column-count: 3;
column-count: auto;

column-count: inherit;
column-count: initial;
column-count: unset;
```

语法
--

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | Block containers except table wrapper boxes |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | an integer |

### 取值

`auto`

用来表示列的数量由其他 CSS 属性指定，例如 `column-width` (en-US).

`<number>`

是个严格的正数 `<integer>` ，用来描述元素内容被划分的理想列数。假如 `column-width` (en-US)也被设置为非零值，此参数仅表示所允许的最大列数。

例子
--


```css
.content-box {
  border: 10px solid #000000;
  column-count: 3;
}
```

规范
--

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # cc |

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

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