recursal/MDN huggingface dataset:
max-width
=========

摘要
--

max-width 属性用来给元素设置最大宽度值。定义了 max-width 的元素会在达到 max-width 值之后避免进一步按照 width 属性设置变大。

`max-width` 会覆盖`width`设置，但 `min-width`设置会覆盖 `max-width`.

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements but non-replaced inline elements, table rows, and row groups |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length or `none` |
| Animation type | a length, percentage or calc(); |

语法
--


```css
/\* <长度> 值 \*/
max-width: 3.5em;

/\* <百分比> 值 \*/
max-width: 75%;

/\* 关键字 \*/
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/\* 全局设置 \*/
max-width: inherit;
max-width: initial;
max-width: unset;
```

### 可选值

`none`

元素未设置最大值

`<长度>`

请参阅`<length>`所提及的长度单位。

`<百分比>`

以父级块级容器宽度的百分比`<percentage>`作为最大宽度。

`max-content`
实验性

The intrinsic preferred width.

`min-content`
实验性

The intrinsic minimum width.

`fill-available`
实验性

The containing block width minus horizontal margin, border, and padding. Some browsers implement an ancient name for this keyword, `available`.

`fit-content`
实验性

与 `max-content` 等价。

### 形式语法
```

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

示例
--

### 设置最大像素宽度

在下面的例子里，id 为"child"的<div>元素设置了 width 值，使它的宽度与父元素"parent"相等 (100%),但是 max-width 值限制了它最大宽度只能到 150px.

#### HTML


```html
<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>
```


#### CSS


```css
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}
```

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

参见
--

* `width`, `min-width`, `max-height`
* The box model, `box-sizing`
tan()
=====

CSS 函数 **`tan()`** 为三角函数，返回某数的正切值，此值介于 `−infinity` 和 `infinity` 之间。此函数含有单个计算式，此式须将参数结果按弧度数解析为 `<number>` 或 `<angle>`。

语法
--


```css
/\* 单个 <angle> 值 \*/
width: calc(100px * tan(45deg));
width: calc(100px * tan(0.125turn));
width: calc(100px * tan(0.785398163rad));

/\* 单个 <number> 值 \*/
width: calc(100px * tan(0.5773502));
width: calc(100px * tan(1.732 – 1));

/\* 其他值 \*/
width: calc(100px * tan(pi / 3));
width: calc(100px * tan(e));
```

### 参数

`tan(angle)` 函数仅接受一值作为其参数。

`angle`

解析为 `<number>` 或 `<angle>` 的计算式。指定无单位数时，数理解为弧度数，表示 `<angle>`。

### 返回值

`angle` 的正切值总将返回介于 `−∞` 和 `+∞` 之间的数。

* 若 `angle` 为 `infinity`、`-infinity` 或 `NaN`，则结果为 `NaN`。
* 若 `angle` 为 `0⁻`，则结果为 `0⁻`。
* 若 `angle` 为渐近线值（如 `90deg`、`270deg` 等），则*明确不定义*结果。作者*须不*依赖于 `tan()` 为这些输入返回任何特定值。
### 形式语法
```

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

示例
--

### 绘制平行四边形

`tan()` 函数可用于绘制有指定包围盒的平行四边形。

#### HTML


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


#### CSS
```

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



```css
.parallelogram {
  --w: 400;
  --h: 200;
  --angle: 30deg;
  position: relative;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
}
.parallelogram::before {
  content: "";
  position: absolute;
  width: calc(100% - 100% * var(--h) / var(--w) * tan(var(--angle)));
  height: 100%;
  transform-origin: 0 100%;
  transform: skewX(calc(0deg - var(--angle)));
  background-color: red;
}
```


#### 结果

规范
--

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

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

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

参见
--

* `sin()`
* `cos()`
* `asin()`
* `acos()`
* `atan()`
* `atan2()`
border-block-start-style
========================

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

尝试一下
----

语法
--


```css
/\* 边框线型值 \*/
border-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;

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


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

### 取值

`<'border-style'>`

边框线型。见 `border-style`。

形式定义
----

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

形式语法
----
```

border-block-start-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

示例
--

### 竖排文本的虚线边框

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-start-style: dashed;
}
```


#### 结果

规范
--

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

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

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

参见
--

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

CSS 属性 **`border-block`** 为简写属性，用于在样式表中的某处同时设置逻辑块向边框的各属性值。

尝试一下
----

`border-block` 可用于设置 `border-block-width`、`border-block-style` 和 `border-block-color` 中至少一个属性的值，且一次性设置块首和块末。此属性所对应的实体边框取决于元素的书写模式、行内方向和文本朝向。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top` 和 `border-bottom`，或者 `border-right` 和 `border-left` 属性。

另一方向的边框可用 `border-inline` 设置，此属性会设置 `border-inline-start` 和 `border-inline-end`。

属性构成
----

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

* `border-block-color`
* `border-block-style`
* `border-block-width`
语法
--


```css
border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;

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

### 取值

`border-block` 属性可用下列值中的至少一个指定，次序任意：

`<'border-width'>`

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

`<'border-style'>`

边框线型。见 `border-style`。

`<'color'>`

边框颜色。见 `color`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-block-width`: `medium`
* `border-block-style`: `none`
* `border-block-color`: `currentcolor`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-block-width`: absolute length; `0` if the border style is `none` or `hidden`
* `border-block-style`: as specified
* `border-block-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-block-width`: by computed value type
* `border-block-style`: discrete
* `border-block-color`: by computed value type
 |

形式语法
----
```

border-block =   
  <'border-block-start'>    
  
```

示例
--

### 竖排文本的边框

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-rl;
  border-block: 5px dashed blue;
}
```


#### 结果

规范
--

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

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

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

参见
--

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

**`:left`** CSS 伪类, 需要和@规则 `@page` 配套使用，对打印文档的左侧页设置 CSS 样式。


```css
/\* 设置打印时的左侧文档样式 \*/
@page :left {
  margin: 2in 3in;
}
```


打印文档的“左”或“右”是由书写方向相关的。举个例子，从左到右的书写方向中第一页应当使用 `:right` 配置；从右至左的书写方向中第一页应当使用 `:left` 配置。

**备注：** 并不是所有样式属性都能应用在此选择器内。仅仅 `margin`、`padding`、`border` 和 `background` 等打印时需要的属性可以使用。其他属性将直接忽略，并且可以使用的属性也只会在打印时生效，显示时不会生效。

参数
--

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


```css
@page :left {
  margin: 2in 3in;
}
```

规范
--

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

参见
--

* `@page`
* Other page-related pseudo-classes: `:first`, `:right`
outline-style
=============

概要
--

**`outline-style`** CSS 属性被用于设置一个元素轮廓的样式。

元素轮廓是绘制于元素周围的一条线，位于`border`的外围，使元素突出

大多时候使用`outline`而不是 `outline-style`, `outline-width` 和 `outline-color` 会更方便。

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

语法
--


```css
/\* 关键字 值 \*/
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/\* 全局 值\*/
outline-style: inherit;
outline-style: initial;
outline-style: unset;
```

取值
--

`<br-style>` 可为以下这些值：

none

无轮廓 (`outline-width` 为 `0`).

dotted

轮廓为一系列点。

dashed

轮廓为一系列短线。

solid

轮廓为实线。

double

轮廓为两根有空隙的线。`outline-width` 为线与空间的总和。

groove

轮廓呈凹下状。

ridge

与 `groove` 相反：轮廓呈凸起状。

inset

轮廓呈嵌入状。

outset

与 `inset` 相反：轮廓呈突出状。

### 正式语法
```

outline-style =   
  auto                  |  
  <outline-line-style>    
  
```

示例
--

### `dotted` 和 `dashed`

#### HTML


```html
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>
```


#### CSS


```css
.dotted {
  outline-style: dotted; /\* 于 "outline: dotted"等价 \*/
}
.dashed {
  outline-style: dashed;
}

/\* 让效果更清楚 \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

### `solid` 和 `double`

#### HTML


```html
<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>
```


#### CSS


```css
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/\* 让效果更清楚 \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

### `groove` 和 `ridge`

#### HTML


```html
<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>
```


#### CSS


```css
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/\* 让效果更清楚 \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

### `inset` 和 `outset`

#### HTML


```html
<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>
```


#### CSS


```css
.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/\* 让效果更清楚 \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-style |

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

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

CSS 属性 **`border-inline`** 为简写属性，用于在样式表中的某处同时设置逻辑行向边框的各属性值。

尝试一下
----

`border-inline` 所对应的实体边框取决于元素的书写模式、行内方向和文本朝向。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top` 和 `border-bottom`，或者 `border-right` 和 `border-left` 属性。

另一方向的边框可用 `border-block` 设置，此属性会设置 `border-block-start` 和 `border-block-end`。

属性构成
----

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

* `border-inline-color`
* `border-inline-style`
* `border-inline-width`
语法
--


```css
border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;

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

### 取值

`border-inline` 属性可用下列值中的至少一个指定，次序任意：

`<'border-width'>`

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

`<'border-style'>`

边框线型。见 `border-style`。

`<'color'>`

边框颜色。见 `color`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-inline-width`: `medium`
* `border-inline-style`: `none`
* `border-inline-color`: `currentcolor`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-inline-width`: absolute length; `0` if the border style is `none` or `hidden`
* `border-inline-style`: as specified
* `border-inline-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-inline-color`: by computed value type
* `border-inline-style`: discrete
* `border-inline-width`: by computed value type
 |

形式语法
----
```

border-inline =   
  <'border-block-start'>    
  
```

示例
--

### 竖排文本的边框

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-rl;
  border-inline: 5px dashed blue;
}
```


#### 结果

规范
--

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

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

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

参见
--

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

CSS 的 `outline` 属性是在一条声明中设置多个轮廓属性的简写属性 ，例如 `outline-style`, `outline-width` 和 `outline-color`。

尝试一下
----

与其他简写属性一样，忽略的子属性会被设为 初始值。

### border 和 outline

border 和 outline 很类似，但有如下区别：

* outline 不占据空间，绘制于元素内容周围。
* 根据规范，outline 通常是矩形，但也可以是非矩形的。
语法
--
```

/* 样式 */
outline: solid;

/* 颜色 | 样式 */
outline: #f66 dashed;

/* 样式 | 宽度 */
outline: inset thick;

/* 颜色 | 样式 | 宽度 */
outline: green solid 3px;

/* 全局值 */
outline: inherit;
outline: initial;
outline: unset;
```


`outline` 属性可使用以下一个、两个或三个值来声明，且顺序不重要。

**备注：** 对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 `none`。但 `input` 元素是例外，其样式默认值由浏览器决定。

### 取值

**`<'outline-color'>`**

设置轮廓的颜色。没有设置时默认值为 `currentcolor`。参见 `outline-color`。

`<'outline-style'>`

设置轮廓的样式。没有设置时默认值为 `none`。参见 `outline-style`。

`<'outline-width'>`

设置轮廓的宽度。没有设置时默认值为 `medium`。参见 `outline-width`。

### 形式语法
```

outline =   
  <'outline-color'>  ||  
  <'outline-style'>  ||  
  <'outline-width'>    
  
```

示例
--

### HTML
```

<a href="#">This link has a special focus style.</a>
```

### CSS
```

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}
```

### 结果

无障碍考虑
-----

将 `outline` 设置为 `0` 或 `none` 会移除浏览器的默认聚焦样式。如果一个元素可交互，这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式。

* How to Design Useful and Usable Focus Indicators
* WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible
规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline |

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `outline-color`: `auto`
* `outline-style`: `none`
* `outline-width`: `medium`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `outline-color`: For the keyword `auto`, the computed value is `currentcolor`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
* `outline-width`: an absolute length; if the keyword `none` is specified, the computed value is `0`
* `outline-style`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `outline-color`: a color
* `outline-width`: a length
* `outline-style`: by computed value type
 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
类型选择器
=====

CSS **类型选择器**通过节点名称匹配元素。换句话说，它选择一个文件中所有给定类型的元素。


```css
/\* 所有 <a> 元素。\*/
a {
  color: red;
}
```


类型选择器可以使用 `@namespace` 赋予命名空间。这在处理包含多个命名空间的文件时很有用，比如带有内联 SVG 或 MathML 的 HTML 文档，或者混合了多个词汇的 XML 文档。

* `ns|h1`——匹配命名空间为 *ns* 的 `<h1>` 元素
* `*|h1`——匹配所有 `<h1>` 元素
* `|h1`——匹配没有声明命名空间的 `<h1>` 元素
语法
--


```css
元素 { 样式声明 }
```

示例
--

### CSS


```css
span {
  background-color: skyblue;
}
```

### HTML


```html
<span>这里是由 span 元素包裹的一些文字。</span>
<p>这里是由 p 元素包裹的一些文字。</p>
<span>这里是由 span 元素包裹的一些文字。</span>
```

### 结果

### 命名空间

在这个示例中，选择器将仅匹配 example 命名空间的 `<h1>` 元素。


```css
@namespace example url(http://www.example.com);
example|h1 {
  color: blue;
}
```

规范
--

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

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

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

参见
--

* CSS 选择器
* 学习 CSS 选择器
CSS 弹性盒子布局
==========

**CSS 弹性盒子布局**是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

基本例子
----

在以下示例中，已将容器设置为 `display: flex` ，这意味着三个子项成为弹性项。`justify-content` 的值已设置为 `space-between` ，以便在主轴上均匀地分隔项目。在每个项目之间放置等量的空间，左侧和右侧项目与 Flex 容器的边缘齐平。你还能看到项目在十字轴上拉伸，因为 `align-items` 的默认值为 `stretch`。这些项目伸展到 Flex 容器的高度，使它们看起来都像最高的项目一样高。

参考
--

### CSS 属性

* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `order`
### 对齐属性

属性 `align-content`、`align-self`、`align-items` 和 `justify-content` 最初出现在 Flexbox 规范中，但现在在 Box Alignment 中定义，Flexbox 规范引用了 Box Alignment 规范以获取最新定义。Box Alignment 中还定义了其他对齐属性。

* `align-content`
* `align-items`
* `align-self`
* `justify-content`
* `place-content`
* `row-gap`
* `column-gap`
* `gap`
### 术语表

* 弹性盒子（Flexbox）
* 伸缩容器（Flex Container）
* 弹性项目（Flex Item）
* 主轴（Main Axis）
* 交叉轴（Cross Axis）
* 伸缩性（Flex）
指南
--

弹性盒子基本概念

概述 flexbox 的功能

使用 CSS 弹性盒子 (en-US)

循序渐进的讲解如何用此特性来建立布局。

Flexbox 与其他布局方法的关系

Flexbox 如何与其他布局方法和其他 CSS 规范相关

对齐 Flex 容器中的项目

Box Alignment 属性如何与 flexbox 一起使用。

弹性项顺序

解释改变项目顺序和方向的不同方法，并解决这样做的潜在问题。

控制柔性项沿主轴的比率

本文介绍了 flex-grow，flex-shrink 和 flex-basis 属性。

精通包装弹性项

如何使用多行创建 Flex 容器并控制这些行中项目的显示。

Flexbox 的典型用例

常见的设计模式是典型的 flexbox 用例。

用弹性盒子进行 Web 应用布局 (en-US)

讲解在 Web 应用的特定环境下如何应用弹性盒子。

规范
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |
@font-feature-values
====================

概要
--

**`@font-feature-values`** CSS at-rule 允许作者在`font-variant-alternates` 中使用通用名称，用于在 OpenType 中以不同方式激活功能。它允许在使用几种字体时简化 CSS。


```css
@font-feature-values Font One {
  /\* How to activate nice-style in Font One \*/
  @styleset {
    nice-style: 12;
  }
}

@font-feature-values Font Two {
  /\* How to activate nice-style in Font Two \*/
  @styleset {
    nice-style: 4;
  }
}

/\* … \*/

.nice-look {
  font-variant-alternates: styleset(nice-style);
} /\* Independent of the font \*/
```


The `@font-feature-values` at-rule may be used at the top level of a CSS, but also inside any CSS conditional-group at-rule.

Syntax
------

### Feature value blocks

`@swash`

Specifies a feature name that will work with the `swash()` functional notation of `font-variant-alternates`. A swash feature value definition allows only one value: `ident1: 2` is valid when `ident2: 2 4` isn't.

`@annotation`

Specifies a feature name that will work with the `annotation()` functional notation of `font-variant-alternates`. An annotation feature value definition allows only one value: `ident1: 2` is valid when `ident2: 2 4` isn't.

`@ornaments`

Specifies a feature name that will work with the `ornaments()` functional notation of `font-variant-alternates`. An ornaments feature value definition allows only one value: `ident1: 2` is valid when `ident2: 2 4` isn't.

`@stylistic`

Specifies a feature name that will work with the `stylistic()` functional notation of `font-variant-alternates`. A stylistice feature value definition allows only one value: `ident1: 2` is valid when `ident2: 2 4` isn't.

`@styleset`

Specifies a feature name that will work with the `styleset()` functional notation of `font-variant-alternates`. A stylset feature value definition allows and illimited amount of values: `ident1: 2 4 12 1`maps to the OpenType values `ss02`, `ss04`, `ss12`, `ss01`. Note that values higher than `99` are valid, but doesn't map to any OpenType values and are ignored.

`@character-variant`

Specifies a feature name that will work with the `character-variant()` functional notation of `font-variant-alternates`. A character-variant feature value definition allows one or two values: `ident1: 2` maps to `cv02=1` and `ident2: 2 4` maps to `cv02)4` and `ident2: 2 4 5` isn't valid.

### Formal syntax
```

@font-feature-values =   
  @font-feature-values <family-name># { <declaration-rule-list> }    
  
<family-name> =   
  <string>         |  
  <custom-ident>+    
  
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-values |

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

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

See also
--------

* The `font-variant-alternates` property that uses values that this at-rule defines.
<resolution>
============

分辨率：用于描述媒体查询中的分辨率的 <resolution> CSS 数据类型表示输出设备的像素密度。

在屏幕上，单位与 CSS 英寸，厘米或像素有关，而与物理值无关。

语法
--

<resolution> 数据类型由严格为正 `<number>` 组成，后跟下面列出的单位之一。与所有 CSS 维度一样，单位字面值与数字之间没有空格。

### 单位

`dpi`

表示每英寸的点数。屏幕通常每英寸包含 72 或 96 个点，但打印文档的 dpi 通常要大得多。1 英寸是 2.54 厘米，1dpi≈0.39dpcm。

`dpcm`

每厘米上的点数。1 英寸是 2.54 厘米，`1dpcm ≈ 2.54dpi`.

`dppx`

表示每个`px`的点数。由于 CSS px 的固定比率为 1:96，因此 1dppx 相当于 96dpi。which corresponds to the default resolution of images displayed in CSS as defined by `image-resolution` (en-US).

`x`

`dppx` 的别名


**备注：** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0dpi`, `0dpcm`, or `0dppx`.

Examples
--------

### Use in a media query


```css
@media print and (min-resolution: 300dpi) { ... }
```

### Valid resolutions
```

96dpi
50.82dpcm
3dppx
```

### Invalid resolutions
```

72 dpi     Spaces are not allowed between the number and the unit.
ten dpi    The number must use digits only.
0          The unit is required.
```

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

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

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

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

See also
--------

* resolution (en-US) media feature