recursal/MDN huggingface dataset:
rotate
======

**`rotate`** 属性允许你单独设置 **`transform`** 的旋转属性。这种映射方式可以让我们更方便的设置我们想要的效果，并且避免了简写形式需要记忆属性顺序的不方便之处。

语法
--


```css
/\* Keyword values \*/
scale: none;

/\* Angle value \*/
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/\* x, y, or z axis name plus angle \*/
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/\* Vector plus angle value \*/
rotate: 1 1 1 90deg;
```

### 值

角度值

An `<angle>` specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a `rotate()` (2D rotation) function.

x, y 或者 z 轴名称加上角度值

The name of the axis you want to rotate the affected element around (`"x"`, "`y`", or "`z"`), plus an `<angle>` specifying the angle to rotate the element through. Equivalent to a `rotateX()`/`rotateY()`/`rotateZ()` (3D rotation) function.

向量加上角度值

Three `<number>`s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an `<angle>` specifying the angle to rotate the element through. Equivalent to a `rotate3d()` (3D rotation) function.

`none`

指定不应用旋转

### 形式语法
```

rotate =   
  none                                    |  
  <angle>                                 |  
  [ x | y | z | <number>{3} ] && <angle>    
  
```

示例
--

### HTML


```html
<div>
  <p class="rotate">Rotation</p>
</div>
```

### CSS


```css
\* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.rotate {
  transition: rotate 1s;
}

div:hover .rotate {
  rotate: 1 -0.5 1 180deg;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | a transform |
| Creates stacking context | yes |

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

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

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

**`::backdrop`** CSS 伪元素 是在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）。


```css
/\* Backdrop 只有通过 dialog.showModal() 打开对话框时会被显示 \*/
dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}
```


所有处于全屏模式下的元素都被放在顶级渲染层中的一个后进先出（LIFO）栈里。在视区内容被绘制在屏幕上之前，这一特殊的渲染层总是最后被渲染（因此是最上层）。当一个元素在这个栈的栈顶时，`::backdrop` 伪元素允许我们遮盖，装饰或完全隐藏该元素的下层文档。

`::backdrop` 不继承任何元素，同时也不被任何元素继承。没有规定什么属性不能应用于该伪元素。

语法
--
```

::backdrop
```

示例
--

在示例中，backdrop 样式用于将视频全屏显示时的背景颜色改为蓝灰色而不是大多数浏览器默认的黑色。


```css
video::backdrop {
  background-color: #448;
}
```


效果如下：

![](/zh-CN/docs/Web/CSS/::backdrop/bbb-backdrop.png)

注意当 backdrop 可见时，上下两部分的暗蓝灰色的信箱效果。这个区域一般是黑色的，但上面的 CSS 语句修改了它的外观。

You can see this example in action or view or remix the code on Glitch.

规范
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # backdrop |

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

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

参见
--

* `:fullscreen` pseudo-class
* `<dialog>` HTML element
* Fullscreen API
border-block-end
================

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

尝试一下
----

属性构成
----

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

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


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

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


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

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

### 取值

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

`<'border-width'>`

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

`<'border-style'>`

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

`<'color'>`

边框颜色。见 `color`。

形式定义
----

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

形式语法
----
```

border-block-end =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<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-rl;
  border-block-end: 5px dashed blue;
}
```


#### 结果

规范
--

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

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

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`
scroll-margin-top
=================

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

尝试一下
----

语法
--


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

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

### 取值

`<length>`

滚动容器的上外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-top =   
  <length>    
  
```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
overflow-inline
===============

CSS 属性 **`overflow-inline`** 设置了当内容溢出盒的行首和行末侧时所显示的内容。可以不显示，或者显示滚动条或溢出内容。

**备注：**`overflow-inline` 属性根据文档的书写模式对应于 `overflow-y` 或 `overflow-x`。

语法
--


```css
/\* 关键词值 \*/
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: scroll;
overflow-inline: auto;

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


`overflow-inline` 属性可指定为下列关键词之一。

### 取值

`visible`

不裁剪内容且可在内边距盒的行首和行末侧外渲染内容。

`hidden`

若内边距盒在行向尺度上无法容纳内容则裁剪内容。不提供滚动条。

`scroll`

若内边距盒在行向尺度上无法容纳内容则裁剪内容。无论内容是否被裁剪，浏览器均显示滚动条。（由此可阻止滚动条在内容变化时显示或消失。）打印机仍可能打印溢出内容。

`auto`

取决于用户代理。若内边距盒可以容纳内容，则与 `visible` 表现相同，但仍建立新的块格式化上下文。若内容溢出则桌面浏览器提供滚动条。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | Block-containers, flex containers, and grid containers |
| 是否是继承属性 | 否 |
| 计算值 | as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip |
| Animation type | discrete |

形式语法
----
```

overflow-inline =   
  visible  |  
  hidden   |  
  clip     |  
  scroll   |  
  auto       
  
```

示例
--

### 设置行向溢出行为

#### HTML


```html
<ul>
  <li>
    <code>overflow-inline:hidden</code>——在盒外隐藏文本
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-block:scroll</code>——总是添加滚动条
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-block:visible</code>——按需在盒外显示文本
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-block:auto</code>——在多数浏览器上等价于 <code>scroll</code>
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>
```


#### CSS


```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-inline: hidden;
}
#div2 {
  overflow-inline: scroll;
}
#div3 {
  overflow-inline: visible;
}
#div4 {
  overflow-inline: auto;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-control |

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

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

参见
--

* 相关 CSS 属性：`text-overflow`、`white-space`、`overflow`、`overflow-block`、`overflow-x`、`overflow-y`、`clip`、`display`
* CSS 逻辑属性
* 书写模式
flex-flow
=========

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

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

* Learn more
* See full compatibility
* Report feedback
概述
--

CSS **`flex-flow`** 属性是 flex-direction 和 flex-wrap 的简写。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `flex-direction`: `row`
* `flex-wrap`: `nowrap`
 |
| 适用元素 | flex containers |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `flex-direction`: as specified
* `flex-wrap`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `flex-direction`: discrete
* `flex-wrap`: discrete
 |

更多信息参见 使用 CSS 弹性盒 (en-US)

语法
--

Formal syntax: 
```

flex-flow =   
  <'flex-direction'>  ||  
  <'flex-wrap'>         
  
```

### 取值

`更多取值信息请查看` `flex-direction` (en-US) 和 `flex-wrap` (en-US)

示例
--


```css
element {
  /\* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines \*/
  flex-flow: column-reverse wrap;
}
```

规范
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |

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

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

另参见
---

* 使用 CSS 弹性盒子 (en-US)
empty-cells
===========

CSS 中 **`empty-cells`** 属性定义了用户端 user agent 应该怎么来渲染表格 `<table>` 中没有可见内容的单元格的边框和背景。


```css
/\* Keyword values \*/
empty-cells: show;
empty-cells: hide;

/\* Global values \*/
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;
```


只有当 `border-collapse` 属性值是 `separate` 时，才会生效。

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

语法
--

`empty-cells` 的属性值必须是以下取值中的一个。

### 取值

`show`

边框和背景正常渲染。与普通元素一样。

`hide`

边框和背景被隐藏。

### 语法形式
```

empty-cells =   
  show  |  
  hide    
  
```

示例
--

### HTML


```html
<table class="table\_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table\_2">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
```

### CSS


```css
.table\_1 {
  empty-cells: show;
}

.table\_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}
```

### 结果

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # empty-cells |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
font-feature-settings
=====================

**`font-feature-settings`** 属性用于控制 OpenType 字体中的高级印刷功能。

尝试一下
----

语法
--


```css
/\* 默认设置 \*/
font-feature-settings: normal;

/\* 设置 OpenType 功能标签的值 \*/
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

/\* 全局值 \*/
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: unset;
```


**备注：** Web 开发者应该尽可能的使用类似 `font-variant` 这样的短标记属性或者相关的速记标识属性等，类似 `font-variant-ligatures`, `font-variant-caps`, `font-variant-east-asian` (en-US), `font-variant-alternates`, `font-variant-numeric` or `font-variant-position`.

该属性是一个比较偏底层的功能接口，用于解决由于没有其他方法去访问和设置 OpenType 字体某些特性而无法解决一些特殊功能需求。

特别需要注意的是，该 CSS 属性不应该用来开启大写字母转换。

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

### 值

`normal`

文本使用默认设置进行布局。

`<feature-tag-value>`

 在呈现文本时，OpenType 要素标记值的列表被传递到文本布局引擎以启用或禁用字体特征。标签始终是 4 个 ASCII 字符的 `<string>` 。如果是 U + 20 - U + 7E 代码点范围以外的字符或字符个数不对，则整个属性无效。
 值是一个正整数。两个关键字 on 和 off 分别是 1 和 0 的同义词。如果未设置任何值，则默认值为 1。对于非布尔型 OpenType 功能（例如，文体替代 stylistic alternates），该值意味着要选择特定的字形；对于布尔值，它是一个开关。


### 形式语法
```

font-feature-settings =   
  normal                |  
  <feature-tag-value>#    
  
<feature-tag-value> =   
  <opentype-tag> [ <integer [0,∞]> | on | off ]?    
  
<opentype-tag> =   
  <string>    
  
```

实例
--


```css
/\* use small-cap alternate glyphs \*/
.smallcaps {
  font-feature-settings: "smcp" on;
}

/\* convert both upper and lowercase to small caps (affects punctuation also) \*/
.allsmallcaps {
  font-feature-settings: "c2sc", "smcp";
}

/\* enable historical forms \*/
.hist {
  font-feature-settings: "hist";
}

/\* disable common ligatures, usually on by default \*/
.noligs {
  font-feature-settings: "liga" 0;
}

/\* enable tabular (monospaced) figures \*/
td.tabular {
  font-feature-settings: "tnum";
}

/\* enable automatic fractions \*/
.fractions {
  font-feature-settings: "frac";
}

/\* use the second available swash character \*/
.swash {
  font-feature-settings: "swsh" 2;
}

/\* enable stylistic set 7 \*/
.fancystyle {
  font-family: Gabriola; /\* available on Windows 7, and on Mac OS \*/
  font-feature-settings: "ss07";
}
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-settings-prop |

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

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

其他参考
----

* FontFont OpenType User Guide (pdf)
* OpenType Feature Tags 列表
* Using the whole font ( -moz 语法是旧的。在 Gecko 上，使用-ms 语法，但使用-moz ).
padding-inline-start
====================

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

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
padding-inline-start: 10px; /\* 绝对长度 \*/
padding-inline-start: 1em; /\* 相对于文本尺寸的长度 \*/

/\* <percentage> 值 \*/
padding-inline-start: 5%; /\* 相对于包含区块宽度的内边距 \*/

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

### 取值

`<length>`

以固定值指定的内边距尺寸。必须非负。

`<percentage>`

以百分比指定的内边距尺寸，参照包含区块的行向尺寸（即横向语言中的*宽度*，由 `writing-mode` 所定义）。必须非负。

描述
--

虽然规范定义 `padding-inline-start` 属性的取值与 `padding-top` 属性相同，但是此属性所对应的实体属性取决于 `writing-mode`、`direction` 和 `text-orientation` 所设置的值。因此这一属性可能对应于 `padding-bottom`、`padding-right` 或 `padding-left`。

与此相关的属性有 `padding-block-start`、`padding-block-end` 和 `padding-inline-end`，这些属性定义了元素的其他内边距。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | as `length` |
| Animation type | a length |

形式语法
----
```

padding-inline-start =   
  <'padding-top'>    
  
```

示例
--

### 为竖排文本设置行首内边距

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  padding-inline-start: 20px;
  background-color: #c8c800;
}
```


#### 结果

规范
--

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

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

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

参见
--

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

**`margin-inline-start`** CSS 属性定义元素的逻辑行首外边距，根据元素的书写模式、行内方向和文本朝向映射为实体的外边距。它根据 `writing-mode`、`direction` 和 `text-orientation` 属性的值对应于 `margin-top`、`margin-right`、`margin-bottom` 或 `margin-left` 属性。

尝试一下
----

语法
--


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

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

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


这个属性与 `margin-block-start`、`margin-block-end` 和 `margin-inline-end` 属性相关，它们均定义元素的其他边距。

### 值

`margin-inline-start` 属性接受与 `margin-left` 属性相同的值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | same as `margin` |
| 是否是继承属性 | 否 |
| Percentages | depends on layout model |
| 计算值 | 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-start =   
  <'margin-top'>    
  
```

示例
--

### 设置逻辑行首外边距

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-start: 20px;
  background-color: #c8c800;
}
```


#### 结果

规范
--

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

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

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

参见
--

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

CSS 属性 **`translate`** 允许你单独声明平移变换，并独立于 `transform` 属性。这在一些典型的用户界面上更好用，而且这样就无需在 `transform` 中声明该函数并记住转换函数的确切顺序了。

语法
--


```css
/\* Keyword values \*/
translate: none;

/\* Single values \*/
translate: 100px;
translate: 50%;

/\* Two values \*/
translate: 100px 200px;
translate: 50% 105px;

/\* Three values \*/
translate: 50% 105px 5rem;
```

### 值

单个长度/百分比值

一个长度值或百分比，表示二维平移，与声明了 X 轴和 Y 轴的平移一样（此时省略的第二个值默认为 0）。等同于在 `translate()` 函数（2D 平移）中指定单个值。

两个长度/百分比值

两个长度值或百分比表示在二维上分别按照指定 X 轴和 Y 轴的值进行的平移。等同于在 `translate()` 函数（2D 平移）中函数指定两个值。

三个长度/百分比值

三个长度值或百分比，表示分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于`translate3d()` 函数（3D 平移）。

`none`

表示不应用平移效果。

### 形式语法
```

translate =   
  none                                                |  
  <length-percentage> [ <length-percentage> <length>? ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### HTML


```html
<div>
  <p class="translate">Translation</p>
</div>
```

### CSS


```css
\* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.translate {
  transition: translate 1s;
}

div:hover .translate {
  translate: 200px 50px;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the size of bounding box |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates stacking context | yes |

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

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

参见
--

* `scale`
* `rotate`
* `transform`

注意：skew 不是一个独立的变换属性。
box-sizing
==========

CSS 中的 **`box-sizing`** 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

尝试一下
----

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 `width` 与 `height` 只会应用到这个元素的内容区。如果这个元素有任何的 `border` 或 `padding` ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现：

* `content-box` 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
* `border-box` 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

**译者注：** `border-box`不包含`margin`

**备注：** 对于新的 web 站点，你可能希望首先将 box-sizing 设置为 border-box，如下所示：


```css
\* {
  box-sizing: border-box;
}
```


这使得处理元素大小的工作变得容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱。然而，在某些情况下，你应谨慎使用这个属性。例如：你正在编写一个将由其他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会发现很难使用你的组件库。

语法
--

`box-sizing` 属性被指定为下面列表中的关键字。

### 属性值

`content-box`

默认值，标准盒子模型。`width` 与 `height` 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意：内边距、边框和外边距都在这个盒子的外部。比如说，`.box {width: 350px; border: 10px solid black;}` 在浏览器中的渲染的实际宽度将是 370px。

尺寸计算公式：

* `width` = 内容的宽度
* `height` = 内容的高度

宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

`border-box`

`width` 和 `height` 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。注意，填充和边框将在盒子内 , 例如， `.box {width: 350px; border: 10px solid black;}` 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负，并且被分配到 0，使得不可能使用 border-box 使元素消失。

尺寸计算公式：

* `width` = border + padding + 内容的宽度
* `height` = border + padding + 内容的高度

### 形式语法
```

box-sizing =   
  content-box  |  
  border-box     
  
```

示例
--

本例显示了不同的 `box-sizing` 值如何改变两个原本相同的元素的渲染尺寸。

### HTML


```html
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>
```

### CSS


```css
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /\* Total width: 160px + (2 \* 20px) + (2 \* 8px) = 216px
 Total height: 80px + (2 \* 20px) + (2 \* 8px) = 136px
 Content box width: 160px
 Content box height: 80px \*/
}

.border-box {
  box-sizing: border-box;
  /\* Total width: 160px
 Total height: 80px
 Content box width: 160px - (2 \* 20px) - (2 \* 8px) = 104px
 Content box height: 80px - (2 \* 20px) - (2 \* 8px) = 24px \*/
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # box-sizing |

|  |  |
| --- | --- |
| 初始值 | `content-box` |
| 适用元素 | all elements that accept width or height |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

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

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

参见
--

* CSS 框盒模型