recursal/MDN huggingface dataset:
will-change
===========

CSS 属性 `will-change` 为 web 开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

**警告：** `will-change` 应该被视为最后的应对手段，用于解决现有的性能问题。不应该被用来预测性能问题。


```css
/\* 关键字值 \*/
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /\* <custom-ident> 示例 \*/
will-change: opacity; /\* <custom-ident> 示例 \*/
will-change: left, top; /\* 两个 <animatable-feature> 例子 \*/

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


想要用好该属性可能有些棘手：

* *不要将 will-change 应用于过多的元素*。浏览器已经尽力优化了所有东西。一些较强的优化可能与 `will-change` 相关联，它们可能会使用大量机器资源，当过度使用时会导致页面变慢或消耗大量资源。
* *谨慎使用*。浏览器进行的优化通常是在尽可能短的时间内删除优化并恢复到正常状态。但是，将 `will-change` 直接添加到样式表中意味着目标元素通常会在不久的将来发生变化，而浏览器会保留优化更长的时间。因此，最好的做法是在更改发生之前和之后使用脚本代码开启和关闭 `will-change`。
* *不要为了过早优化而将 `will-change` 应用于元素*。如果你的页面表现良好，则不要仅仅为了提高一点速度而将 `will-change` 属性添加到元素中。`will-change` 旨在作为最后的手段使用，以尝试解决现有的性能问题。不应该用来预测性能问题。过度使用 `will-change` 将导致内存使用过多，并导致更复杂的渲染发生，因为浏览器试图为可能的更改做准备。这将导致更差的性能。
* *要给它足够的时间来发挥作用*。该属性旨在为开发者提供一种方法，让用户代理提前了解可能会发生变化的属性。然后浏览器可以选择在实际属性更改之前应用所需的任何提前优化。因此，重要的是给浏览器一些时间来实际执行优化。找到一些方法，预测某些事情将会在稍微提前的时间内发生，并在那时设置 `will-change`。
* *请注意*。当与创建层叠上下文的属性值一起使用（例如 will-change: opacity）时，`will-change` 实际上可能会影响元素的视觉外观，因为层叠上下文是提前创建的。
语法
--

### 取值

`auto`

表示没有特别指定哪些属性会变化，浏览器需要自己去猜，然后使用浏览器经常使用的一些常规方法优化。

`<animateable-feature>` 可以是以下值：

`scroll-position`

表示开发者希望在不久后改变滚动条的位置或者使之产生动画。

`contents`

表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。

`<custom-ident>`

该属性表示开发者期望在不久的将来对元素上给定名称的属性进行动画或更改。如果给定的属性是一个缩写，它表示对缩写展开的所有属性的期望。它不能是以下任何值：`unset`、`initial`、`inherit`、`will-change`、`auto`、`scroll-position` 或 `contents`。规范没有定义特定值的行为，但是 `transform` 通常被用作合成层提示。在给定特定的 CSS 属性标识时，Chrome 目前会执行两个操作：建立新的合成层或新的层叠上下文。

### 通过样式表设置

在需要通过按键进行页面翻转的应用程序中（例如相册或幻灯片演示文稿），或者在页面内容较大、较复杂的应用程序中，将 `will-change` 属性包含在样式表中可能是合适的。这将让浏览器提前准备好转换，并允许在按键按下时实现流畅的页面转换效果。但是，在样式表中直接使用 `will-change` 属性时需要谨慎。这可能会导致浏览器将优化保留在内存中的时间比实际需要的时间更长。


```css
.sidebar {
  will-change: transform;
}
```

形式定义
----

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

形式语法
----
```

will-change =   
  auto                    |  
  <animateable-feature>#    
  
<animateable-feature> =   
  scroll-position  |  
  contents         |  
  <custom-ident>     
  
```

示例
--

### 通过脚本设置

这是一个示例，演示如何通过脚本应用 `will-change` 属性，这可能是在大多数情况下你应该采用的方法。


```js
const el = document.getElementById("element");

// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // 将在动画关键帧块中发生变化的可优化属性
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}
```

规范
--

| Specification |
| --- |
| CSS Will Change Module Level 1 # will-change |

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

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

参见
--

* `transform`
* 独立的 transform 属性：
    + `translate`
    + `scale`
    + `rotate`
    + 备注：并没有单独的 `skew` 属性
border-top-left-radius
======================

概要
--

**`border-top-left-radius`** 用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为 0，那么将无圆角效果（见 **`border-top-left-radius`** 取值方式)。

![border-radius.png](/zh-CN/docs/Web/CSS/border-top-left-radius/border-radius.png)

盒模型的背景，可以是一张图片或一种颜色，会在边框处被剪裁，更甚至可以是一个圆；剪切的额外定位通过另一个 CSS 属性"background-clip"来定义。

**备注：** 在 border-top-left-radius 属性值之后，如果作用的元素上没有设置“border-radius”属性，那么这个属性值就会通过简写属性重新设置成它的初始值。

语法
--


```css
/\* the corner is a circle \*/
/\* border-top-left-radius: radius \*/
border-top-left-radius: 3px;

/\* the corner is an ellipsis \*/
/\* border-top-left-radius: horizontal vertical \*/
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;
```


##### 属性值：

*radius*

可以是 `<length>` 或者 `<percentage>`，表示左上角边框的圆角半径。

*horizontal*

可以是 `<length>` 或者 `<percentage>`，表示椭圆的水平半长轴在被用作边框左上角的半径。

*vertical*

可以是 `<length>` 或者 `<percentage>`，表示椭圆的垂直半长轴在被用作边框左上角的半径。

### 取值

`<length>`

`<length>` 定义圆形半径或椭圆的半长轴，半短轴。不能用负值。

`<percentage>`

使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值。

### Formal syntax
```

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

示例
--

| 实例 | 代码 |
| --- | --- |
|  | 椭圆的弧被用作左上角边框

```css
div {
  border-top-left-radius: 40px 40px;
}
```

 |
|  | 椭圆的弧被用作左上角边框

```css
div {
  border-top-left-radius: 40px 20px;
}
```

 |
|  | 盒子是方形的，圆弧被用作左上角边框

```css
div
  border-top-left-radius: 40%;
}
```

 |
|  | 盒子不是方形的，椭圆的弧被用作左上角边框

```css
div {
  border-top-left-radius: 40%;
}
```

 |
|  | 背景色在左上角被剪切

```css
div {
  border-top-left-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}
```

 |

规范
--

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

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

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

参见
--

* border-radius 相关 CSS 属性：`border-radius`, 其他边角属性： `border-top-right-radius`, `border-bottom-right-radius` (en-US), and `border-bottom-left-radius`.
行内格式化上下文（Inline formatting context）
===================================

这篇文章将解释什么是行内格式化上下文（Inline formatting context）

核心概念
----

行内格式化上下文是一个网页的渲染结果的一部分。其中，各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：

* 对于水平书写模式，各个框从左边开始水平地排列
* 对于垂直书写模式，各个框从顶部开始水平地排列

在下面给出的例子中，带黑色边框的两个 (`<div>`) 元素组成了一个块级格式化上下文（block formatting context），其中的每一个单词都参与一个行内格式化上下文中。水平书写模式下的各个框水平地排列，垂直书写模式下的各个框垂直地排列。

各个框组成了一行，而该行位于一个称为“行框（line box）”的矩形区域之中。该行框的大小将足以包含该行中所有的行内框（inline boxes）；当行内方向上没有剩余空间时，将会创建新行。因此，一个段落实际上是一系列行框的集合，这些行框在块的方向上排列。

一个行内框（inline box）被分割到多行中时，margins, borders, 以及 padding 的设定均不会在断裂处生效。下例中有一个 (`<span>`) 元素，它包裹了一系列单词，占据了两行。可以看见在断裂处，`<span>` 的 border 同样发生了断裂。

Margins, borders, 以及 padding 的设置，在行的方向上是生效的。在下例中，可以看见行内元素 `<span>` 的 margin，border 以及 padding 是被加上了的。

**备注：** 此处使用了 logical, flow-relative properties — `padding-inline-start`，而不是 `padding-left` — so that they work in the inline dimension whether the text is horizontal or vertical. Read more about these properties in Logical Properties and Values.

在块的方向上对齐
--------

行内框（Inline boxes）可使用`vertical-align`属性，以不同的方式在块的方向上进行对齐（因此在垂直书写模式下，`vertical-align` 中的“vertical”根本是名不副实——此时行内框将在水平方向上进行对齐）。下例中，字号较大的文本使得第一个句子的行框变大，因此 `vertical-align` 能让行内框（inline boxes）分布于上侧或下侧。例子里用的值是 `top`, 可以试试 `middle`, `bottom`, 或 `baseline` 这些值。

在行内方向上对齐
--------

如果行内方向上还有额外空间，那么 `text-align` 可用于将各行内框（inline boxes）在行框（line box）内对齐。可以试试把 `text-align` 的值改成 `end` 。

浮动造成的效果
-------

在行内方向上，各行框（Line Boxes）通常具有相同的尺寸，即在水平书写模式下，它们有同样的宽度；在垂直书写模式下，它们有同样的高度。但是，如果同一个块格式化上下文中存在一个 `float`，则这个浮动元素将导致包裹了它的各行框变短。

另见
--

* Block formatting context
* Visual Formatting Model
border-left
===========

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


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


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

**备注：** 和 CSS 所有的缩写属性一样，border-left 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS 缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......


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


......实际上应该是下面这个样子......


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


......并且在 border-left 之前定义的 `border-left-style` 的值也会被覆盖。由于 `border-left-style` 的默认值是 none, border-style 的最终结果就是没有边框。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-left-width`: `medium`
* `border-left-style`: `none`
* `border-left-color`: `currentcolor`
 |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
* `border-left-style`: as specified
* `border-left-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-left-color`: a color
* `border-left-style`: discrete
* `border-left-width`: a length
 |

Syntax
------

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

### Values

`<br-width>`

请参阅`border-left-width`.

`<br-style>`

请参阅`border-left-style`.

``<color>``

请参阅 `border-left-color`.

### Formal syntax
```

border-left =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Example
-------


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



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

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

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

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

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

层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。

哪些 CSS 实体会参与层叠计算
----------------

只有 CSS 声明，就是属性名值对，会参与层叠计算。这表示包含 CSS 声明以外实体的 @规则不参与层叠计算，比如包含描述符（descriptors）的`@font-face`。对于这些情形，@规则是做为一个整体参与层叠计算，比如 @font-face 的层叠是由其描述符 font-family 确定的。如果对同一个描述符定义了多次 @font-face，则最适合的 @font-face 是做为一个整体而被考虑的。

包含在大多数 @规则的 CSS 声明是参与层叠计算的，比如包含于`@media`、`@documents`或者`@supports`的 CSS 声明，但是包含于`@keyframes`的声明不参与计算，正如`@font-face`，它是作为一个整体参与层叠算法的筛选。

最后，注意 `@import` 和 `@charset` 遵循特定的算法，并且不受层叠算法影响。

CSS 声明的源
--------

CSS 层叠算法期望通过挑选 CSS 声明来给 CSS 属性设置正确的值。CSS 声明可以有不同的来源：

* 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称**用户代理样式**。一些浏览器通过使用真正的样式表，而其他则通过代码模拟，但无论是哪种情形都应是不可被检测的。而且部分浏览器允许用户修改用户代理样式。尽管 HTML 标准对用户代理样式做了诸多限制，浏览器仍大有可为，具体表现在不同浏览器间会存在重大的差异。为了减轻开发成本以及降低样式表运行所需的基本环境，网页开发者通常会使用一个 CSS reset 样式表，强制将常见的属性值转为确定状态。
* 网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即主题。
* 读者，作为浏览器的用户，可以使用自定义样式表定制使用体验。

尽管 CSS 样式会来自这些不同的源，但它们的作用范围是重叠的，而层叠算法则定义了它们如何相互作用。

层叠顺序
----

层叠算法决定如何找出要应用到每个文档元素的每个属性上的值。

1. 它首先过滤来自不同源的全部规则，并保留要应用到指定元素上的那些规则。这意味着这些规则的选择器匹配指定元素，同时也是一个合适的 @规则（at-rule）的一部分。
2. 其次，它依据重要性对这些规则进行排序。即是指，规则后面是否跟随者 !import 以及规则的来源。层叠是按升序排列的，这意味着来着用户自定义样式表的 !important 值比用户代理样式表的普通值优先级高：


|  | 来源 | 重要程度 |
| --- | --- | --- |
| 1 | 用户代理 | 普通 |
| 2 | 用户 | 普通 |
| 3 | 页面作者 | 普通 |
| 4 | CSS 动画 | 见下节 |
| 5 | 页面作者 | `!important` |
| 6 | 用户 | `!important` |
| 7 | 用户代理 | `!important` |
| 8 | css 过渡 (css transitions) |  |
3. 假如层叠顺序相等，则使用哪个值取决于优先级。
重置样式
----

当你的 css 对样式完成更改之后，也许会在某种情况下希望把他们还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中。CSS 属性`all`能够让你快速地把（几乎）所有 CSS 属性设置到一个已知样式上。

all 属性让你能够立刻把所有的属性都还原到它们初始（默认）的状态，或是继承自前一个层叠顺序等级的状态，又或是指定一个特定的来源（用户代理、页面作者或者用户），甚至还可以选择完全清除所有的属性。

CSS 动画与层叠
---------

CSS 动画 (en-US)，指使用`@keyframes` @规则定义状态间的动画。关键帧不参与层叠，意味着在任何时候 CSS 都是取单一的 @keyframes 的值而不会是某几个 @keyframe 的混合。

当有多个满足条件的关键帧时，在最重要的文档里面最后定义的关键帧会被选中，而不会是将它们组合在一起。

同时仍应注意用 @keyframes @规则定义的值会覆盖全部普通值，但会被 !important 的值覆盖。

例子
--

**用户代理 CSS：**


```css
li {
  margin-left: 10px;
}
```


**网页作者 CSS1：**


```css
li {
  margin-left: 0;
} /\* This is a reset \*/
```


**网页作者 CSS2：**


```css
@media screen {
  li {
    margin-left: 3px;
  }
}

@media print {
  li {
    margin-left: 1px;
  }
}
```


**用户 CSS：**


```css
.specific {
  margin-left: 1em;
}
```


**HTML：**


```html
<ul>
  <li class="specific">1<sup>st</sup></li>
  <li>2<sup>nd</sup></li>
</ul>
```


对于这个情形，应当应用 li 和.specific 里面的声明。由于没有声明被标记为 !important，所以优先顺序为页面作者样式优于用户样式，用户代理样式最低。

故是这 3 条声明的竞争：


```css
margin-left: 0;
```



```css
margin-left: 3px;
```



```css
margin-left: 1px;
```


由于是在屏幕显示，所以最后一条舍弃，而前两条的选择器相同，因此优先级也相同，故最终选择的是后者：


```css
margin-left: 3px;
```


注意尽管定义在用户 CSS 里面的声明有更高的优先级，但它并不会被选中，因为层叠算法是先于优先级算法的。

规范
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4  |

参见
--

* CSS 教程中层叠知识的介绍 (en-US)。
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素
pow()
=====

CSS 函数 **`pow()`** 为指数型函数，返回底数的某数次方的值。

`exp()` 函数为 `pow()` 的特例，其底数为数学常数 e。

语法
--


```css
/\* <number> 值 \*/
width: calc(10px * pow(5, 2)); /\* 10px \* 25 = 250px \*/
width: calc(10px * pow(5, 3)); /\* 10px \* 125 = 1250px \*/
width: calc(10px * pow(2, 10)); /\* 10px \* 1024 = 10240px \*/
```

### 参数

`pow(base, number)` 函数接受两个以逗号分隔的值作为其参数。

`base`

解析为 `<number>` 的计算式，表示底数。

`number`

解析为 `<number>` 的计算式，表示指数。

### 返回值

返回表示 basenumber 的 `<number>`，即 `base` 的 `number` 次方。

形式语法
----
```

<pow()> =   
  pow( <calc-sum> , <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          
  
```

示例
--

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

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

#### HTML


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


#### CSS


```css
h1 {
  font-size: calc(1rem * pow(1.5, 4));
}
h2 {
  font-size: calc(1rem * pow(1.5, 3));
}
h3 {
  font-size: calc(1rem * pow(1.5, 2));
}
h4 {
  font-size: calc(1rem * pow(1.5, 1));
}
h5 {
  font-size: calc(1rem * pow(1.5, 0));
}
h6 {
  font-size: calc(1rem * pow(1.5, -1));
}
```


#### 结果

规范
--

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

参见
--

* `sqrt()`
* `hypot()`
* `exp()`
* `log()`
background-origin
=================

摘要
--

`background-origin` 规定了指定背景图片`background-image` 属性的原点位置的背景相对区域。

注意：当使用 `background-attachment` 为 fixed 时，该属性将被忽略不起作用。

**备注：** 假如`background`简写中没有设置该值，那么在 background 简写值后指定 background-origin，那么后面的值就会覆盖简写值，其实说白了，就是后出现的值会覆盖前面的值。

|  |  |
| --- | --- |
| 初始值 | `padding-box` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | a repeatable list |

语法
--
```

Formal syntax: 
```
background-origin =   
  <visual-box>#    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```


```
```

background-origin: border-box
background-origin: padding-box
background-origin: content-box

background-origin: inherit
```

### 属性值

`border-box`

背景图片的摆放以 border 区域为参考

`padding-box`

背景图片的摆放以 padding 区域为参考

`content-box`

背景图片的摆放以 content 区域为参考

### 形式化语法

How to read CSS syntax.
```

background-origin =   
  <visual-box>#    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```


例子
--


```css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  /\* 背景将在内容区 padding 内部填充 \*/
  background-origin: content-box;
}
```



```css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```



```css
div {
  background-image: url("logo.jpg"), url("mainback.png");
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-origin |

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

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

相关文献
----

* 【CSS3】background-origin 和 background-clip 的区别
inset
=====

CSS 属性 **`inset`** 为简写属性，对应于 `top`、`right`、`bottom` 和 `left` 属性。其与 `margin` 简写属性具有相同的多值语法。

尝试一下
----

此属性虽然为 *CSS 逻辑属性*规范的一部分，但是无论元素的书写模式、行内方向和文本朝向如何，其所定义的都不是*逻辑*偏移而是*实体*偏移。

语法
--


```css
/\* 长度值 \*/
inset: 10px; /\* 应用于所有边 \*/
inset: 4px 8px; /\* 上下 | 左右 \*/
inset: 5px 15px 10px; /\* 上 | 左右 | 下 \*/
inset: 2.4em 3em 3em 3em; /\* 上 | 右 | 下 | 左 \*/

/\* 包含块的宽度（左或右）或高度（上或下）的百分比 \*/
inset: 10% 5% 5% 5%;

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

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

### 取值

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `top`: `auto`
* `bottom`: `auto`
* `left`: `auto`
* `right`: `auto`
 |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
| 计算值 | as each of the properties of the shorthand:* `top`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `bottom`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `left`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `right`: 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(); |

形式语法
----
```

inset =   
  <'top'>{1,4}    
  
```

示例
--

### 为元素设置偏移

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: sideways-rl;
  position: absolute;
  inset: 20px 40px 30px 10px;
  background-color: #c8c800;
}
```


#### 结果

规范
--

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

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

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

参见
--

* 盒偏移的全称属性：`top`、`right`、`bottom` 和 `left`
* 对应的逻辑简写属性：`inset-block` 和 `inset-inline`
* `margin` 简写属性的多值语法
后代选择器
=====

**后代组合器**（通常用单个空格（" "）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为*后代选择器*。


```css
/\* List items that are descendants of the "my-things" list \*/
ul.my-things li {
  margin: 2em;
}
```


从技术上讲，后代组合器是两个选择器之间的一个或多个 CSS 空格字符——空格字符和/或四个控制字符之一：回车、换页、换行和制表符在没有其他组合器的情况下。此外，组成组合器的空白字符可以包含任意数量的 CSS 注释。

语法
--
```

selector1 selector2 {
  /* property declarations */
}
```

Examples
--------

### CSS


```css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
```

### HTML


```html
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>
```

### Result

规范
--

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

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

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

相关
--

* Child combinator
::-moz-progress-bar
===================

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

CSS伪元素 **`::-moz-progress-bar`** 是`<progress>` 元素中，Mozilla 独有的特性（Mozilla extension (en-US)），用于对进度条完成的部分进行选择。

如果你想选择未完成的部分，请直接选择 `<progress>` 。

语法
--

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

### HTML


```html
<progress value="30" max="100">30%</progress>
<progress max="100">Indeterminate</progress>
```

### CSS


```css
::-moz-progress-bar {
  background-color: red;
}

/\* Force indeterminate bars to have zero width \*/
:indeterminate::-moz-progress-bar {
  width: 0;
}
```

### 结果

参见
--

* `<progress>`
* `::-ms-fill`
* `::-webkit-progress-bar`
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element`
margin-inline
=============

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

尝试一下
----

属性构成
----

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

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


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

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

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


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

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

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

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

形式定义
----

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

形式语法
----
```

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

示例
--

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

#### CSS


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

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

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


#### HTML


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


#### 结果

规范
--

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

浏览器规范性
------

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

参见
--

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

**`margin-top`** CSS 属性用于设置元素的顶部外边距外边距区域。正值使它离相邻元素更远，而负值使它更靠近相邻元素。

尝试一下
----

此属性对于*不**可替换*的内联元素没有效果，比如 `<span>` 或 `<code>`。

语法
--


```css
/\* <length> 值 \*/
margin-top: 10px; /\* 绝对长度 \*/
margin-top: 1em; /\* 相对与文本的大小 \*/
margin-top: 5%; /\* 相对于最近的块容器的宽度 \*/

/\* 关键字值 \*/
margin-top: auto;

/\* 全局关键字值 \*/
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
margin-top: unset;
```


`margin-top` 属性可以用关键字 `auto`、`<length>` 或 `<percentage>` 来设置。其值可以是正值、负值或零。

### 值

`<length>`

设置固定边距大小。

`<percentage>`

相对于包含块的内联尺寸（对于竖排语言则是*宽度*，这由 `writing-mode` 定义）的百分比边距大小。

`auto`

浏览器选择一个合适的值来使用。参见 `margin`。

### 形式语法
```

margin-top =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 将上边距设置为正值和负值


```css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}
```

规范
--

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

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

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

参见
--

* `margin-right`、`margin-bottom`、`margin-left`，以及 `margin` 简写属性
* 映射的逻辑属性：`margin-block-start`、`margin-block-end`、`margin-inline-start`、`margin-inline-end`，以及 `margin-block` 和 `margin-inline` 简写属性