recursal/MDN huggingface dataset:
::first-line (:first-line)
==========================

**`::first-line`** CSS pseudo-element （CSS 伪元素）在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。

::first-line 伪元素只能在块容器中，所以，`::first-line`伪元素只能在一个 display 值为 block, `inline-block`, `table-cell` 或者 `table-caption`中有用.。在其他的类型中，`::first-line` 是不起作用的。

允许的属性值
------

在一个使用了 `::first-line` 伪元素的选择器中，只有很小的一部分 css 属性能被使用：

* 所有和字体有关的属性：`font`, `font-kerning`, `font-style`, `font-variant`, `font-variant-numeric`, `font-variant-position`, `font-variant-east-asian` (en-US), `font-variant-caps`, `font-variant-alternates`, `font-variant-ligatures`, `font-synthesis`, `font-feature-settings`, `font-language-override`, `font-weight`, `font-size`, `font-size-adjust`, `font-stretch`, and `font-family`
* `color`
* 所有和背景有关的属性： `background-color`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, and `background-blend-mode`
* `word-spacing`, `letter-spacing`, `text-decoration`, `text-transform`, and `line-height`
* `text-shadow`, `text-decoration`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, and `vertical-align`.

这个列表将来可能会被扩展，但是推荐的是，你不要使用任何上述没有提到的属性。

**备注：** 在 CSS 2 中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在 CSS 2.1 中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。

因为过去的浏览器都实现过 CSS 2 的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。

如果需要支持老旧的浏览器，那么 `:first-line` 是唯一的选择，反之，更推荐使用 `::first-line`。

语法
--

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

### text-transform

将每个段落中的第一行字母转换成大写

#### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>
```


#### CSS


```css
p::first-line {
  text-transform: uppercase;
}
```


#### 输出

### margin-left

`margin-left` 在 first-line 伪元素上无效

#### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>
```


#### CSS


```css
p::first-line {
  margin-left: 20px;
}
```


#### 输出

### text-indent

`text-indent` 在 first-line 伪元素上无效

#### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>
```


#### CSS


```css
p::first-line {
  text-indent: 20px;
}
```


#### 输出

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |

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

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

参见
--

* The `::first-letter` pseudo-element.
object-fit
==========

**`object-fit`** CSS 属性指定可替换元素（例如：`<img>` 或 `<video>`）的内容应该如何适应到其使用高度和宽度确定的框。

你可以通过使用 `object-position` 属性来切换被替换元素的内容对象在元素框内的对齐方式。

尝试一下
----

语法
--


```css
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
/\* Global values \*/
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;
```


object-fit 属性由下列的值中的单独一个关键字来指定。

### 取值

`contain`

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

`cover`

被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

`fill`

被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

`none`

被替换的内容将保持其原有的尺寸。

`scale-down`

内容的尺寸与 `none` 或 `contain` 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

形式定义
----

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

形式语法
----
```

object-fit =   
  fill        |  
  contain     |  
  cover       |  
  none        |  
  scale-down    
  
```

示例
--

### 为图像设置 object-fit

#### HTML


```html
<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="fill narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="contain narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="cover narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="none narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="scale-down narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />
</section>
```


#### CSS


```css
h2 {
  font-family:
    Courier New,
    monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-fit |

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

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

参见
--

* 其他与图像相关的 CSS 属性：`object-position`、`image-orientation`、`image-rendering`、`image-resolution` (en-US)。
* `background-size`
border-bottom
=============

border-bottom 简写属性把下边框的所有属性：`border-bottom-color`，`border-bottom-style` 与 `border-bottom-width` 设置到了一个声明中。这些属性描述了元素的下边框样式。

尝试一下
----

与所有的简记属性相同， `border-bottom` 定义了它所有可以定义的属性，即使他们并没有被显式地定义。它把所有未被显式定义的参数都设置为了默认值，这意味着这些值将被定义为：


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


它和以下的代码是等价的：


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


顺便一提，在 `border-bottom` 之前定义的 `border-bottom-style` 的值因此被忽略了。由于 `border-bottom-style` 并没有默认值，未被定义的 `border-style` 参数的值将被设置为 `none`，也就是无底边框。

语法
--


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

### 值

`<br-width>`

见 `border-bottom-width`。

`<br-style>`

见 `border-bottom-style`。

`<color>`

见 `border-bottom-color`。

### 形式语法
```

border-bottom =   
  <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
<div>This box has a border on the bottom side.</div>
```



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

规范
--

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

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

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

**`in-range`** CSS 伪类代表一个 `<input>` 元素，其当前值处于属性 `min` 和 `max` 限定的范围之内。

尝试一下
----

这个伪类很有用，可以给用户提供一个视觉提示，让他们知道字段的当前值是否在允许的范围内。

**备注：** 该伪类仅适用于具有（且可以接受）范围限制的元素。如果没有这样的限制，元素值就无所谓“in-range”和“out-of-range”。

语法
--


```css
:in-range {
  /\* ... \*/
}
```

示例
--

### HTML


```html
<form action="" id="form1">
  <ul>
    Values between 1 and 10 are valid.
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12"
 required />
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>
```

### CSS


```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "okay.";
}

input:out-of-range + label::after {
  content: "out of range!";
}
```

### 结果

**备注：** 内容为空的 `<input>` 不算作超出范围，因此不会被 `:out-of-range` 伪类选择器应用。虽然目前 `:blank` 伪类可用于选择空白输入，但该伪类仍处于实验性阶段且得到的支持有限。建议你使用 `required` 属性和 `:invalid` 伪类来提供更为通用的逻辑和样式以使输入变为必填项（`:invalid` 伪类将为空白*和*超出范围的输入提供样式）。

规范
--

| Specification |
| --- |
| HTML Standard # selector-in-range |
| Selectors Level 4 # in-range-pseudo |

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

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

参见
--

* `:out-of-range`
* 表单数据校验
CSS Shapes
==========

**CSS Shapes** 是一个 CSS 模块，用于定义在 CSS 值中使用的几何形状。

**备注：** ### CSS3 Shapes & CSS3 Regionshttps://www.w3.org/TR/css-shapes-1/ > https://www.w3.org/TR/css-regions-1/

Reference
---------

### Properties

* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
### Data types

* `<basic-shape>`
Guides
------

*None.*

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

| Specification |
| --- |
| CSS Shapes Module Level 1  |
order
=====

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 **`order`** 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 `order` 属性的值的增序进行布局。拥有相同 `order` 属性值的元素按照它们在源代码中出现的顺序进行布局。

**备注：** `order` 仅仅对元素的视觉顺序 (**visual order**) 产生作用，并不会影响元素的逻辑或 tab 顺序。 **`order`** 不可以用于非视觉媒体，例如 speech。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | Flex items, grid items, and absolutely-positioned flex and grid container children |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | an integer |

参考 使用 CSS 弹性盒子 (en-US) 获取更多信息。

语法
--


```css
/\* Numerical value including negative numbers \*/
order: 5;
order: -5;

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

### 取值

`<integer>`

表示此可伸缩项目所在的次序组。

### Formal syntax
```

order =   
  [ <'layout-order'> <'reading-order'>? ]  |  
  [ [ reading || layout ] && <integer> ]     
  
```

例子
--

这里是一个基本的 HTML 代码片段：


```html
<!doctype html>
<header>…</header>
<div id="main">
  <article>…</article>
  <nav>…</nav>
  <aside>…</aside>
</div>
<footer>…</footer>
```


下面的 CSS 代码会创建一个经典的双 sidebar 围绕一个中央内容块的布局。Flexible Box 布局模块会自动地创建三个具有相同高度的内容块，也会使用所有可用的水平空间。


```css
#main {
  display: flex;
}
#main > article {
  flex: 1;
  order: 2;
}
#main > nav {
  width: 200px;
  order: 1;
}
#main > aside {
  width: 200px;
  order: 3;
}
```

规范
--

| Specification |
| --- |
| CSS Display Module Level 3 # order-property |

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

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

参考
--

* 使用 CSS 弹性盒子 (en-US)
flex-grow
=========

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-grow`** CSS 设置 flex 项 主尺寸 的 flex 增长系数。

尝试一下
----

语法
--

满足CSS 属性值定义语法 
```

flex-grow =   
  <number [0,∞]>    
  
```

。

```css
/\* <number> 值 \*/
flex-grow: 3;
flex-grow: 0.6;

/\* 全局值 \*/
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: unset;
```


`flex-grow` 的属性规定为一个 `<number>`。

### 值

`<number>`

参见 `<number>`。负值无效，默认为 0。

描述
--

 这个属性规定了 `flex-grow` 项在 flex 容器中分配剩余空间的相对比例。
 主尺寸是项的宽度或高度，这取决于`flex-direction`值。

剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。

`flex-grow` 与其他的 flex 属性`flex-shrink`和`flex-basis`一起使用，通常使用`flex` 速记来定义，以确保所有的值都被设置。

正式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | flex items, including in-flow pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | a number |

正式语法
----
```

flex-grow =   
  <number [0,∞]>    
  
```

样例
--

### 设置 flex 项目增长因子

#### HTML


```html
<h4>这展示了 flex 增长</h4>
<h5>A,B,C 和 F 具有 flex-grow:1。D 和 E 具有 flex-grow:2 .</h5>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>
```


#### CSS


```css
#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}
```


#### 结果

规范
--

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

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

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

参见
--

* 使用 CSS 弹性盒子 (en-US)
* CSS Flexbox 指南：弹性盒子的基本概念
* CSS Flexbox 指南：控制 Flex 子元素在主轴上的比例
* `flex-grow` is weird. Or is it? Manuel Matuzovic 在 CSS-Tricks 上的文章，说明了 flex-grow 的工作原理
CSS 选择器
=======

**CSS 选择器**规定了 CSS 规则会被应用到哪些元素上。

**备注：** 暂时没有能够选择 父元素、父元素的同级元素，或 父元素的同级元素的子元素 的选择器或者组合器。

基本选择器
-----

通用选择器

选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。

**语法：**`*` `ns|*` `*|*`

**例子：**`*` 将匹配文档的所有元素。

元素选择器

按照给定的节点名称，选择所有匹配的元素。

**语法：**`elementname`

**例子：**`input` 匹配任何 `<input>` 元素。

类选择器

按照给定的 `class` 属性的值，选择所有匹配的元素。

**语法：**`.classname`

**例子：**`.index` 匹配任何 `class` 属性中含有 "index" 类的元素。

ID 选择器

按照 `id` 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。

**语法：**`#idname`

**例子：**`#toc` 匹配 ID 为 "toc" 的元素。

属性选择器

按照给定的属性，选择所有匹配的元素。

**语法：**`[attr]` `[attr=value]` `[attr~=value]` `[attr|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]`

**例子：**`[autoplay]` 选择所有具有 `autoplay` 属性的元素（不论这个属性的值是什么）。

分组选择器（Grouping selector）
------------------------

选择器列表

`,` 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。

**语法：**`A, B`

**示例：**`div, span` 会同时匹配 `<span>` 元素和 `<div>` 元素。

组合器（Combinator）
---------------

后代组合器

“ ”（空格）组合器选择前一个元素的后代节点。

**语法：**`A B`

**例子：**`div span` 匹配所有位于任意 `<div>` 元素之内的 `<span>` 元素。

直接子代组合器

`>` 组合器选择前一个元素的直接子代的节点。

**语法：**`A > B`

**例子：**`ul > li` 匹配直接嵌套在 `<ul>` 元素内的所有 `<li>` 元素。

一般兄弟组合器

`~` 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

**语法：**`A ~ B`

**例子：**`p ~ span` 匹配同一父元素下，`<p>` 元素后的所有 `<span>` 元素。

紧邻兄弟组合器

`+` 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。

**语法：**`A + B`

**例子：**`h2 + p` 会匹配*紧*邻在 h2 元素后的第一个 `<p>` 元素。

列组合器 
实验性

`||` 组合器选择属于某个表格行的节点。

**语法：**`A || B`

**例子：**`col || td` 会匹配所有 `<col>` 作用域内的 `<td>` (en-US) 元素。

伪选择器（Pseudo）
------------

伪类

`:` 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。

**例子：**`a:visited` 匹配所有曾被访问过的 `<a>` 元素。

伪元素

`::` 伪选择器用于表示无法用 HTML 语义表达的实体。

**例子：**`p::first-line` 匹配所有 `<p>` 元素的第一行。

规范
--

| Specification |
| --- |
| Selectors Level 4  |

伪类和伪元素的规范位于各自的页面中。

参见
--

* CSS 优先级
::-webkit-progress-value
========================

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

**`::-webkit-progress-value`** CSS 伪元素 代表的是`<progress>` 元素中进度条未完成的部分。它是`::-webkit-progress-bar` 伪元素的子元素。

**备注：** 为了使 `::-webkit-progress-value` 生效， `<progress>` 元素的`-webkit-appearance` (en-US) 需要设置为 `none`。

示例
--

### HTML


```html
<progress value="10" max="50"></progress>
```

### CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-value {
  background-color: orange;
}
```

### 结果

应用了上述样式的进度条如下：

![](/zh-CN/docs/Web/CSS/::-webkit-progress-value/progress-value.png)

规范
--

不属于任何规范。这是 WebKit/Blink 专有的一个伪元素。

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

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

参见
--

* WebKit/Blink 使用的用来修改`<progress>`元素其他部分样式的伪元素：
    + `::-webkit-progress-bar`
    + `::-webkit-progress-inner-element`
* `::-moz-progress-bar`
* `::-ms-fill`
margin
======

**`margin`** 属性为给定元素设置所有四个（上右下左）方向的外边距属性。也就是 `margin-top`、`margin-right`、`margin-bottom` 和 `margin-left` 四个外边距属性设置的简写。

尝试一下
----

上、下外边框的设置对\*不可替换\*内联元素，如 `<span>` 和 `<code>`，无效。

**备注：** 外边距控制的是元素外部空出的空间。相反，`padding` 操作元素*内部*空出的空间。

语法
--


```css
/\* 应用于所有边 \*/
margin: 1em;
margin: -3px;

/\* 上边下边 | 左边右边 \*/
margin: 5% auto;

/\* 上边 | 左边右边 | 下边 \*/
margin: 1em auto 2em;

/\* 上边 | 右边 | 下边 | 左边 \*/
margin: 2px 1em 0 auto;

/\* 全局值 \*/
margin: inherit;
margin: initial;
margin: unset;
```


`margin` 属性接受 1~4 个值。每个值可以是 `<length>`，`<percentage>`，或 `auto`。取值为负时元素会比原来更接近临近元素。

* 当只指定**一个**值时，该值会统一应用到**全部四个边**的外边距上。
* 指定**两个**值时，第一个值会应用于**上边和下边**的外边距，第二个值应用于**左边和右边**。
* 指定**三个**值时，第一个值应用于**上边**，第二个值应用于**右边和左边**，第三个则应用于**下边**的外边距。
* 指定**四个**值时，依次（顺时针方向）作为**上边**，**右边**，**下边**，和**左边**的外边距。
### 可取值

**`<length>`**

以固定值为外边距。

`<percentage>`

相对于包含块的*宽度*，以百分比值为外边距。

`auto`

让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

### 语法格式
```

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

示例
--

### 简单的例子

#### HTML


```html
<div class="center">此元素会被居中。</div>

<div class="outside">此元素会显示在包含块之外。</div>
```


#### CSS


```css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}
```

### 更多的例子


```css
margin: 5%; /\* 所有边：5% 的外边距 \*/

margin: 10px; /\* 所有边：10px 的外边距 \*/

margin: 1.6em 20px; /\* 上边和下边：1.6em 的外边距 \*/
/\* 左边和右边：20px 的外边距 \*/

margin: 10px 3% -1em; /\* 上边：10px 的外边距 \*/
/\* 左边和右边：3% 的外边距 \*/
/\* 下边： -1em 的外边距 \*/

margin: 10px 3px 30px 5px; /\* 上边：10px 的外边距 \*/
/\* 右边：3px 的外边距 \*/
/\* 下边：30px 的外边距 \*/
/\* 左边：5px 的外边距 \*/

margin: 2em auto; /\* 上边和下边：2em 的外边距 \*/
/\* 水平方向居中 \*/

margin: auto; /\* 上边和下边：无外边距 \*/
/\* 水平方向居中 \*/
```

贴士
--

### 水平居中

在现代浏览器中实现水平居中，可以使用 `display``: flex;` `justify-content``: center;`。

不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 `margin: 0 auto;`。

### 外边距重叠

上下元素的下上外边距有时会重叠，实际空出的空间长度变为两外边距中的较长值。查看外边距重叠可找到更多信息。

规范
--

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

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `margin-bottom`: `0`
* `margin-left`: `0`
* `margin-right`: `0`
* `margin-top`: `0`
 |
| 适用元素 | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | as each of the properties of the shorthand:* `margin-bottom`: the percentage as specified or the absolute length
* `margin-left`: the percentage as specified or the absolute length
* `margin-right`: the percentage as specified or the absolute length
* `margin-top`: the percentage as specified or the absolute length
 |
| Animation type | a length |

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

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

参阅
--

* CSS 基础框盒模型介绍
* 外边距重叠
* `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* 逻辑相关的属性：`margin-block-start`, `margin-block-end`, `margin-inline-start`，和 `margin-inline-end` 与其简称 `margin-block` 和 `margin-inline`
background-position-x
=====================

概要
--

**`background-position-x`** CSS 属性设置水平方向的位置，与每个背景图片等位置层设置属性 `background-origin`相关。更多信息请查看`background-position`属性，这个用的比较普遍。

**备注：** 这个属性的值会被后面声明的属性覆盖掉，如`background`和`background-position`等简写的属性。

|  |  |
| --- | --- |
| 初始值 | `0%` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to width of background positioning area minus width of background image |
| 计算值 | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| Animation type | a repeatable list |

语法
--


```css
/\* Keyword values \*/
background-position-x: left;
background-position-x: center;
background-position-x: right;

/\* <percentage> values \*/
background-position-x: 25%;

/\* <length> values \*/
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;

/\* side-relative values \*/
background-position-x: right 3px;
background-position-x: left 25%;

/\* Multiple values \*/
background-position-x: 0px, center;

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

### 值

`left`

在位置层上相对于左边的位置。

`center`

在位置层上相对于中间点的位置。

`right`

在位置层上相对于右边的位置。

`<length>`

`<length>`值是定义相对于位置层边缘的距离，边缘默认为左边。

`<percentage>`

`<percentage>`值是定义相对于位置层边缘的距离百分比，边缘默认为左边。

### 正规语法
```

background-position-x =   
  [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 4 # background-position-longhands |

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

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

更多
--

* `background-position`
* `background-position-y`
* `background-position-inline`
* `background-position-block`
* Multiple backgrounds (en-US)
:only-of-type
=============

**`:only-of-type`** CSS 伪类代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

尝试一下
----

**备注：** 根据原来的定义，被选择的元素必须具有父元素。直到 Selectors Level 4 开始，这个要求就不是必须的了。

语法
--


```css
:only-of-type {
  /\* ... \*/
}
```

示例
--

### 为没有同类型兄弟元素的元素设置样式

#### HTML


```html
<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>
    I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>
```


#### CSS


```css
main :only-of-type {
  color: red;
}
```


#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # only-of-type-pseudo |

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

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

参见
--

* `:only-child`
* `:first-of-type`
* `:last-of-type`
* `:nth-of-type`
-webkit-line-clamp
==================

**`-webkit-line-clamp`** CSS 属性可以把块容器中的内容限制为指定的行数。

它只有在 `display` 属性设置成 `-webkit-box` 或者 `-webkit-inline-box` 并且 `box-orient` 属性设置成 `vertical`时才有效果。

在大部分情况下，也需要设置 `overflow` 属性为 `hidden`，否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号。

当应用于锚（anchor）元素时，截断可以发生在文本中间，而不必在末尾。

**备注：** 该属性最初在 WebKit 中实现的，但存在一些问题。由于需要支持旧版本的浏览器，该属性已在 CSS Overflow Module Level 4 中被标准化。CSS Overflow Module Level 4 规范还定义了一个 `line-clamp` 属性，用来代替此属性并避免一些问题。

语法
--


```css
/\* 关键词值 \*/
-webkit-line-clamp: none;

/\* 整数值 \*/
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/\* 全局值 \*/
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;
```


`none`

这个值表明内容显示不会被限制。

`<integer>`

这个值表明内容显示了多少行之后会被限制。必须大于 0。

形式定义
----

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

形式语法
----
```

-webkit-line-clamp =   
  none             |  
  <integer [1,∞]>    
  
```

示例
--

### 截断段落

#### HTML


```html
<p>
  在此示例中，<code>-webkit-line-clamp</code> 属性设置为
  <code>2</code>，即文本在超过两行后将被截断。文本截断处将显示省略号。
</p>
```


#### CSS


```css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Overflow Module Level 4 # propdef--webkit-line-clamp |

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

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

参见
--

* Line Clampin' (Truncating Multiple Line Text)
* `line-clamp`
fit-content
===========

`fit-content` 行为类似于 `fit-content(stretch)`，实际上这意味着盒子会使用可用的空间，但永远不会超过 `max-content`。

`fit-content` 属性可以用于设置元素的 `width`、`height`、`min-width`、`min-height`、`max-width` 和 `max-height`，此时最大和最小尺寸将基于元素的内容尺寸计算。

**备注：** CSS 尺寸规范另外还定义了 `fit-content()` (en-US) 函数。本页详细介绍了该关键字的用法。

语法
--


```css
width: fit-content;
block-size: fit-content;
```

示例
--

### 使用 fit-content 调整盒子大小

#### HTML


```html
<div class="container">
  <div class="item">Item</div>
  <div class="item">Item with more text in it.</div>
  <div class="item">
    Item with more text in it, hopefully we have added enough text so the text
    will start to wrap.
  </div>
</div>
```


#### CSS


```css
.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 20em;
}

.item {
  width: -moz-fit-content;
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |

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

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

参见
--

* 其他尺寸关键字：`min-content`、`max-content`