recursal/MDN huggingface dataset:
resize
======

CSS 属性 **`resize`** 用于设置元素是否可调整尺寸，以及可调整的方向。

尝试一下
----

`resize` 不适用于下列元素：

* 内联元素
* `overflow` 属性设置为 `visible` 的块元素
语法
--


```css
/\* 关键词值 \*/
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

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


`resize` 属性可指定为下列关键词值之一。

### 取值

`none`

元素不提供用户可控的调整其尺寸的方法。

`both`

元素显示可让用户调整其尺寸的机制，可沿水平和竖直方向调整尺寸。

`horizontal`

元素显示可让用户沿*水平*方向调整其尺寸的机制。

`vertical`

元素显示可让用户沿*竖直*方向调整其尺寸的机制。

`block` 
实验性

元素显示可让用户沿*块向*（水平或竖直方向之一，取决于 `writing-mode` 和 `direction` 的值）调整其尺寸的机制。

`inline` 
实验性

元素显示可让用户沿*行向*（水平或竖直方向之一，取决于 `writing-mode` 和 `direction` 的值）调整其尺寸的机制。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | elements with `overflow` other than `visible`, and optionally replaced elements representing images or videos, and iframes |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----
```

resize =   
  none        |  
  both        |  
  horizontal  |  
  vertical    |  
  block       |  
  inline        
  
```

示例
--

### 禁用文本区域的尺寸调整

在很多浏览器中，`<textarea>` 元素默认可调整尺寸。你可以用 `resize` 属性改写此行为。

#### HTML


```html
<textarea>在此处输入一些文本。</textarea>
```


#### CSS


```css
textarea {
  resize: none; /\* 禁用尺寸调整 \*/
}
```


#### 结果

### 对任意元素使用 resize

你可以用 `resize` 属性使任意元素可调整尺寸。在下列示例中，一个可调整尺寸的 `<div>` 包含了一个可调整尺寸的段落（`<p>` 元素）。

#### HTML


```html
<div class="resizable">
  <p class="resizable">
    此段落可在各个方向上调整尺寸，这是因为在此元素上 CSS `resize` 属性设置为
    `both`。
  </p>
</div>
```


#### CSS


```css
.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}
```


#### 结果

规范
--

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

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

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

参见
--

* `<textarea>`
<display-internal>
==================

一些布局模型，例如 `table` 和 `ruby`具有复杂的内部结构，具有他们的孩子和后代可以填充的几个不同的角色。此页面定义了那些“内部”显示值，这些值仅在该特定布局模式中具有意义。

语法
--

除非另有说明，否则使用这些显示值的元素的内部显示类型和外部显示类型都将设置为给定的关键字。

`table-row-group`

这些元素的行为类似于`<tbody>`HTML 元素。

`table-header-group`

这些元素的行为类似于`<thead>`HTML 元素。

`table-footer-group`

这些元素的行为类似于`<tfoot>`HTML 元素。

`table-row`

这些元素的行为类似于`<tr>`HTML 元素。

`table-cell`

这些元素的行为类似于`<td>` (en-US)HTML 元素。

`table-column-group`

这些元素的行为类似于`<colgroup>`HTML 元素。

`table-column`

这些元素的行为类似于`<col>`HTML 元素。

`table-caption`

这些元素的行为类似于`<caption>`HTML 元素。

`ruby-base` 
实验性

这些元素的行为类似于`<rb>`HTML 元素。

`ruby-text` 
实验性

这些元素的行为类似于`<rt>`HTML 元素。

`ruby-base-container` 
实验性

这些元素的行为类似于`<rbc>`匿名框生成的 HTML 元素。

`ruby-text-container` 
实验性

这些元素的行为类似于`<rtc>`HTML 元素。

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

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

参见
--

* `display`
    + `<display-outside>`
    + `<display-inside>` (en-US)
    + `<display-listitem>` (en-US)
    + `<display-box>`
    + `<display-legacy>`
bottom
======

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

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

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

当 `top`和`bottom`同时指定时，并且 `height`没有被指定或者指定为`auto`或`100%`的时候，`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> values */
bottom: 3px;
bottom: 2.4em;

/* <percentage>s of the height of the containing block */
bottom: 10%;

/* Keyword value */
bottom: auto;

/* Global values */
bottom: inherit;
bottom: initial;
bottom: unset;
```

### 值

* 对于**绝对定位的元素**，元素下外边距边界与其包含块下边界之间的偏移。
* 对于**相对定位定位的元素**，元素的下边界离开其正常位置的偏移。
* `<length>`
    + : 一个负值、空值或正值，代表了：
* `<percentage>`
    + : 包含块高度的百分比`<percentage>`。
* `auto`
    + : 规定：
        - 对于绝对定位元素，元素将忽略此属性而以`top`属性为准，如果此时设置`height: auto`，将基于内容需要的高度设置宽度；如果`top`也为`auto`的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。
        - 对于相对定位元素，元素相对正常位置的偏移量将基于`top`属性；如果`top`也为`auto`的话，元素将不会有偏移。
* `inherit`
    + : 指代有明确计算结果的父级元素的值，（需要注意的是，父级元素并不一定是包裹该子元素的块级元素）。该值会根据父级元素的具体情况被处理为`<length>`, `<percentage>`或者`auto`。
### Formal syntax
```

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

示例
--

下面的例子分别展示了`bottom`属性在`position`为`absolute`和`fixed`的不同行为。

### HTML


```html
<p>
  This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>
```

### CSS


```css
p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgba(55, 55, 55, 0.2);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
```

### 结果

规范
--

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

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

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

CSS **`unicode-bidi`** 属性，和 `direction` 属性，决定如何处理文档中的双书写方向文本（bidirectional text）。比如，如果一块内容同时包含有从左到右书写和从右到左书写的文本，那么用户代理（the user-agent）会使用复杂的 Unicode 算法来决定如何显示文本。`unicode-bidi` 属性会覆盖此算法，允许开发人员控制文本嵌入（text embedding）。

`unicode-bidi` 与 `direction` 是仅有的两个不受 `all` 简写影响的属性。

**警告：** 此属性是文档类型定义（Document Type Definition, DTD）的设计者专用的。Web 设计者与其他类似的人员不应覆盖此属性。


```css
/\* 关键字值 \*/
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;
/\* 全局值 \*/
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: unset;
```


|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements, though some values have no effect on non-inline elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Not animatable |

语法
--

### 值

`normal`

对双向算法，此元素不提供额外的嵌入级别。对于内联元素，隐式的重新排序在元素的边界上起作用。

`embed`

对于内联元素，该值会为双向算法打开一个额外的嵌入级别。嵌入级别的方向是由 `direction` 属性给出的。

`bidi-override`

对于内联元素，该值会创建一个覆盖；对于块容器元素，该值将为不在另一个块容器元素内的内联级别的后代创建一个覆盖。这意味着在元素内部，根据 `direction` 属性，重新排序是严格按照顺序排列的；双向算法的隐式部分被忽略。

`isolate`

这个关键字表示计算元素容器的方向时，不考虑这个元素的内容。因此，这个元素就从它的兄弟姐妹中分离出来了。当应用它的双向分辨算法的时候，它的容器元素将其视为一个或多个 `U+FFFC Object Replacement Character`，即像 image 一样。

`isolate-override`

这个关键字将 `isolate` 关键字的隔离行为应用于周围的内容，并将 `bidi-override` 关键字的覆盖行为应用于内部内容。

`plaintext`

 这个关键字在计算元素方向的时候，不考虑父元素的双向状态，也不考虑 `direction` 属性的值。它是使用 Unicode 双向算法的 P2 和 P3 规则计算的。
 这个值允许按照 Unicode 双向算法显示已经格式化的数据。


### 形式语法
```

unicode-bidi =   
  normal            |  
  embed             |  
  isolate           |  
  bidi-override     |  
  isolate-override  |  
  plaintext           
  
```

示例
--

### CSS


```css
.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}
```

### HTML


```html
<div class="bible-quote">A line of text</div>
<div>Another line of text</div>
```

### 结果

规范
--

| Specification |
| --- |
| CSS Writing Modes Level 4 # unicode-bidi |

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

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

参见
--

* `direction`
list-style-position
===================

**`list-style-position`** 属性指定标记框在主体块框中的位置。

使用助记符`list-style`更方便。

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

语法
--


```css
/\* Keyword values \*/
list-style-position: inside;
list-style-position: outside;

/\* Global values \*/
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;
```

### 数值

`outside`

标记盒在主块盒的外面。

`inside`

标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后。

### Formal syntax
```

list-style-position =   
  inside   |  
  outside    
  
```

例子
--

### HTML


```html
<ul class="one">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="two">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="three">
  List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>
```

### CSS


```css
.one {
  list-style: square inside;
}

.two {
  list-style-position: outside;
  list-style-type: circle;
}

.three {
  list-style-image: url("starsolid.gif");
  list-style-position: inherit;
}
```

### Result

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-position-property |

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

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

See also
--------

* `list-style`, `list-style-type`, `list-style-image`
background-color
================

概览
--

CSS属性中的 **background-color** 会设置元素的背景色，属性的值为颜色值或关键字"transparent"二者选其一。

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

语法
--


```css
/\* Keyword values \*/
background-color: red;

/\* Hexadecimal value \*/
background-color: #bbff00;

/\* RGB value \*/
background-color: rgb(255, 255, 128);

/\* HSLA value \*/
background-color: hsla(50, 33%, 25%, 0.75);

/\* Special keyword values \*/
background-color: currentColor;
background-color: transparent;

/\* Global values \*/
background-color: inherit;
background-color: initial;
background-color: unset;
```


`background-color` 属性只能使用 `<color>` 值。

### 取值

`<color>`

一个描述背景统一颜色的 CSS `<color>` 值。即使一个或几个的 `background-image` 被定义，如果图像是不透明的，通过透明度该颜色也能影响到渲染。在 CSS 中，`transparent` 是一种颜色。

### 正式语法
```

background-color =   
  <color>    
  
```

示例
--

### HTML


```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS


```css
.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}
```

### 结果

规范
--

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

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

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

参见
--

* Multiple backgrounds
CSS Transforms
==============

**CSS Transforms** 是一个 CSS 模块，它定义了如何在二维或三维空间中转换元素的 CSS 样式。

引用参考
----

### CSS 属性

* `backface-visibility`
* `perspective`
* `perspective-origin`
* `transform`
* `transform-box`
* `transform-origin`
* `transform-style`
使用指南
----

CSS transforms 使用

循序渐进的教程，教你如何使用 CSS 对进行元素变形处理。

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1  |
| CSS Transforms Module Level 2  |
类选择器
====

CSS **类选择器**根据 `class` 属性的内容匹配元素。


```css
/\* 所有含有 class="spacious" 类的元素 \*/
.spacious {
  margin: 2em;
}

/\* 所有含有 class="spacious" 类的 <li> 元素 \*/
li.spacious {
  margin: 2em;
}

/\* 所有同时含有“spacious”和“elegant”类的 <li> 元素 \*/
/\* 例如 class="elegant retro spacious" \*/
li.spacious.elegant {
  margin: 2em;
}
```

语法
--


```css
.类名 { 样式声明 }
```


注意它与下面的`属性选择器`语句等价：


```css
[class~=类名] { 样式声明 }
```

示例
--

### CSS


```css
.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}
```

### HTML


```html
<p class="red">这段文字是红色的。</p>
<p class="red yellow-bg">这段文字是红色的，背景是黄色的。</p>
<p class="red fancy">这段文字是红色的，有“fancy”样式。</p>
<p>这只是普通的段落。</p>
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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

参见
--

* CSS 选择器
* 学习 CSS 选择器
font-language-override
======================

**font-language-override** CSS 属性控制在指定的语言中使用特定的字形。


```css
/\* 关键字作为值 \*/
font-language-override: normal;

/\* 字符串作为值 \*/
font-language-override: "ENG"; /\* Use English glyphs \*/
font-language-override: "TRK"; /\* Use Turkish glyphs \*/

/\* 使用全局值 \*/
font-language-override: initial;
font-language-override: inherit;
font-language-override: unset;
```


默认情况下，HTML 的 `lang` 属性告诉浏览器使用语言的特定字形。例如，很多字体都有针对合成符 `fi` 的字形（i 上的点会被合并进 f 里）。而当使用土耳其语时，字体就不会使用合成字形。因为土耳其语有两个版本的 i: 一个带点 (`i`) 一个不带点 (`ı`)。这种情况下如果使用连写会把带点的 `i` 不正确地渲染成不带点的 `ı`。

`font-language-override`属性可以使你重载针对特定语言的字体行为。当你使用的字体缺少对某种语言的正确支持时，这很有用。例如，如果一种字体没有针对阿塞拜疆语的适当规则，你可以强制字体使用遵循类似规则的土耳其语字形。

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

语法
--

`font-language-override` 属性被指定为关键词 `normal` 或者一个字符串 `<string>`。

### 值

`normal`

指示浏览器使用适合 `lang` 属性指定的语言的字体字形。这是默认值。

`<string>`

指示浏览器使用适合该字符串指定的语言的字体字形。该字符串必须与 OpenType 语言系统中的语言标签相匹配。例如，"ENG "是英语，"KOR "是韩语。

### 正式语法
```

font-language-override =   
  normal    |  
  <string>    
  
```

示例
--

### 使用丹麦文字形

#### HTML


```html
<p class="para1">Default language setting.</p>
<p class="para2">
  This is a string with the <code>font-language-override</code> set to Danish.
</p>
```


#### CSS


```css
p.para1 {
  font-language-override: normal;
}

p.para2 {
  font-language-override: "DAN";
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-language-override-prop |

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

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

参见
--

* `font-variant`, `font-variant-position`, `font-variant-east-asian` (en-US), `font-variant-caps`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-alternates`, `font-synthesis`, `font-kerning`.
border-inline-width
===================

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

尝试一下
----

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

语法
--


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

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

### 取值

`<'border-width'>`

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

形式定义
----

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

形式语法
----
```

border-inline-width =   
  <'border-top-width'>{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;
  border: 1px solid blue;
  border-inline-width: 5px 10px;
}
```

规范
--

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

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

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

参见
--

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

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

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

* Learn more
* See full compatibility
* Report feedback
`grid-column` CSS 属性是 `grid-column-start` (en-US) 和 `grid-column-end` (en-US) 的简写属性，用于指定网格项目的大小和位置{ 通过为它的网格位置贡献线条，跨度或不添加任何内容（自动），从而指定其 grid area。

尝试一下
----

语法
--

如果给出两个`<grid-line>`值，它们之间用“ /”分隔。将`grid-column-start`的正手设置为斜线之前的值，并将`grid-column-end`的正手设置为斜线之后的值。

每个`<grid-line>`值可以指定为：

* 要么是`auto`关键字
* 或`<custom-ident>`值
* 或`<integer>`值
* 或者`<custom-ident>`和`<integer>`，两者之间用空格分隔
* 或关键字 span 与`<custom-ident>`或`<integer>`或两者一起使用。
### 值

`auto`

是一个关键字，指示该属性对网格项目的放置没有任何作用，表示自动放置，自动跨度或默认跨度为 1。

`<custom-ident>`

如果有一个名为"<custom-ident>-start"/"<custom-ident>-start"的命名行，则它将第一行添加到网格项目的位置。

**警告：** 命名网格区域会自动生成这种形式的隐式命名行，因此请指定`grid-column: foo;`将选择该命名网格区域的开始/结束边缘（除非在其之前明确指定了另一条名为`foo-start / foo-end`的行）。

否则，将其视为与`<custom-ident>`一起指定了整数 1。

`<integer> && <custom-ident>?`

将第 n 条网格线贡献到网格项目的位置。如果给定一个负整数，则从显式网格的末端开始，反向计数。

如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则假定所有隐式网格线都具有该名称，以查找该位置。

`<integer>`的值为`0`无效。

`span && [ <integer> || <custom-ident> ]`
 将网格范围扩展到该网格项目的位置，以使该网格项目的网格区域的相应边缘距离相对边缘 n 行。
 如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则为计算此跨度，假定与搜索方向相对应的显式网格侧的所有隐式网格线均具有该名称。

如果省略<integer>，则默认为`1`。负整数或 0 无效。

### 形式语法
```

grid-column =   
  <grid-line> [ / <grid-line> ]?    
  
<grid-line> =   
  auto                                                |  
  <custom-ident>                                      |  
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |  
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]     
  
```

示例
--

### HTML


```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

### CSS


```css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-column: span 2 / 7;
}
```

IE 问题
-----

IE11 不支持自动放置网格项目。除非用-ms-`grid-column`和-ms-`grid-row`显式注释，否则所有项目都以网格的第一行/列结尾。可以使用一些 JavaScript 来启用自动注释：源存储库。

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # placement-shorthands |

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `grid-column-start` (en-US): `auto`
* `grid-column-end` (en-US): `auto`
 |
| 适用元素 | grid items and absolutely-positioned boxes whose containing block is a grid container |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `grid-column-start` (en-US): as specified
* `grid-column-end` (en-US): as specified
 |
| Animation type | discrete |

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

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

参见
--

* Related CSS properties: `grid-row`, `grid-row-start` (en-US), `grid-row-end` (en-US), `grid-column-start` (en-US), `grid-column-end` (en-US)
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Video tutorial: *Line-based placement*
:target
=======

**`:target`** CSS 伪类表示一个唯一的元素（*目标元素*），其 `id` 与当前 URL 片段匹配。


```css
/\* 选择一个 ID 与当前 URL 片段匹配的元素\*/
:target {
  border: 2px solid black;
}
```


例如，以下 URL 具有一个片段（由 # 符号表示），指向名为 `section2` 的元素：
```

http://www.example.com/index.html#section2
```


若当前 URL 等于上面的 URL 时，以下元素将被 `:target` 选择器被选中：


```html
<section id="section2">Example</section>
```

语法
--


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

示例
--

### 一个目录

`:target` 伪类可用于高亮显示页面中可从目录中链接到的部分。

#### HTML


```html
<h3>目录</h3>
<ol>
  <li><a href="#p1">跳转到第一个段落！</a></li>
  <li><a href="#p2">跳转到第二个段落！</a></li>
  <li><a href="#nowhere">此链接不会跳转，因为目标不存在。</a></li>
</ol>

<h3>我的趣味文章</h3>
<p id="p1">你可以使用 URL 片段定位此<i>段落</i>。点击上面的链接试试吧！</p>
<p id="p2">这是<i>另一个段落</i>，也可以从上面的链接访问。这不是很愉快吗？</p>
```


#### CSS


```css
p:target {
  background-color: gold;
}

/\* 在目标元素中增加一个伪元素\*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\*在目标元素中使用 italic 样式\*/
p:target i {
  color: red;
}
```


#### 结果

### 纯 CSS 高亮

你可以不使用任何 Javascript 代码，只使用 `:target` 伪类创建一个高亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS 就会更改其 `display` 以便显示它们。

**备注：** 一个基于 `:target` 伪类的更为完善的纯 CSS 高亮框可以在 GitHub（demo）上找到。

#### HTML


```html
<ul>
  <li><a href="#example1">打开示例 #1</a></li>
  <li><a href="#example2">打开示例 #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim,
      placerat id eleifend eu, semper vel sem.
    </figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam
      quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna.
    </figcaption>
  </figure>
</div>
```


#### CSS


```css
/\* Unopened lightbox \*/
.lightbox {
  display: none;
}

/\* Opened lightbox \*/
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/\* Lightbox content \*/
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/\* Close button \*/
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/\* Lightbox overlay \*/
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  cursor: default;
}
```


#### 结果

规范
--

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

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

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

参见
--

* 在选择器中使用 :target 伪类
<frequency>
===========

`<frequency>` CSS数据类型表示频率维度，例如语音的音高。目前它未在任何 CSS 属性中被使用。

语法
--

The `<frequency>` data type consists of a `<number>` followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.

### 单位

可以使用以下单位：

`Hz`

表示以赫兹（hertz）为单位的频率。例如：`0Hz`、`1500Hz`、`10000Hz`。

`kHz`

表示以千赫兹（kilohertz）为单位的频率。例如：`0kHz`、`1.5kHz`、`10kHz`。


**备注：** 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 `0Hz` or `0kHz`. Though the units are case-insensitive, it is good practice to use a capital "H" for `Hz` and `kHz`, as specified in the SI.

示例
--
```

12Hz     Positive integer
4.3Hz    Non-integer
14KhZ    The unit is case-insensitive, though non-SI capitalization is not recommended.
+0Hz     Zero, with a leading + and a unit
-0kHz    Zero, with a leading - and a unit
```

### Invalid frequency values
```

12.0     This is a <number>, not an <frequency>, because it is missing a unit.
7 Hz     No space is allowed between the number and the unit.
0        Although unitless zero is an allowable <length>, it's an invalid <frequency>.
```

规范
--

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

**备注：** This data type was initially introduced in CSS Level 2 for the now-obsolete aural (en-US) media type, where it was used to define the pitch of the voice. However, the `<frequency>` data type has been reintroduced in CSS3, though no CSS property is using it at the moment.

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

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