Skip to content

Commit

Permalink
docs(cn): utilities/display.md (#71)
Browse files Browse the repository at this point in the history
docs(cn): utilities/display.md
  • Loading branch information
HerbertHe committed Jul 23, 2021
2 parents a3fc297 + ee31747 commit 423f74c
Showing 1 changed file with 20 additions and 20 deletions.
40 changes: 20 additions & 20 deletions utilities/display.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Display
# Display {#display}

## Block
## 块级元素 {#block}

The `block` utility generates a block element box, generating line breaks both before and after the element when in the normal flow.
`block` 工具类生成一个块级元素盒子,在常规流中的该元素前后生成换行符。

<PlaygroundWithVariants
variant='block'
Expand All @@ -16,9 +16,9 @@ The `block` utility generates a block element box, generating line breaks both b
&lt;div class="{class} rounded-md bg-blue-400 w-8 h-8"&gt;&lt;/div&gt;'
/>

## Inline Block
## 行内块级元素 {#inline-block}

The `inline-block` utility generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
`inline-block` 工具类生成一个块级元素盒子,该元素将和周围的内容一起浮动,就像是一个单独的行内盒子一样(它表现的更像一个被替代的元素)。

<PlaygroundWithVariants
variant='inline-block'
Expand All @@ -33,9 +33,9 @@ The `inline-block` utility generates a block element box that will be flowed wit
&lt;span class="text-gray-500"&gt;...&lt;/span&gt;'
/>

## Inline
## 行内元素 {#inline}

The `inline` utility generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
`inline` 工具类生成一个或多个行内元素盒子并且不会在它们前后生成换行符,在常规流中,如果同行内有空间,下一个元素将在同一行上。

<PlaygroundWithVariants
variant='inline'
Expand All @@ -50,13 +50,13 @@ The `inline` utility generates one or more inline element boxes that do not gene
&lt;span class="text-gray-500"&gt;...&lt;/span&gt;'
/>

## Flow Root
## Flow Root {#flow-root}

The `flow-root` utility generates a block element box that establishes a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies.
`flow-root` 工具类生成一个块级元素盒子,它用于建立一个新的 [块级格式上下文](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context),定义格式化根元素的所在位置。

| Class | Properties |
| :---- | :--------- |
| flow-root | display: flow-root; |
| flow-root | display: flow-root; |

<PlaygroundWithVariants
variant='flow-root'
Expand All @@ -76,9 +76,9 @@ The `flow-root` utility generates a block element box that establishes a new [bl
&lt;/div&gt;'
/>

## Contents
## 内容 {#contents}

The `contents` utilities don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
`contents` 工具类不会使它们自己生成特定的盒子,它们会被自己的伪盒子和次级盒子代替。

<PlaygroundWithVariants
variant='contents'
Expand All @@ -96,9 +96,9 @@ The `contents` utilities don't produce a specific box by themselves. They are re
&lt;/div&gt;'
/>

## Hidden
## 隐藏 {#hidden}

Turns off the `display` of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the [visibility](#visibility) property instead.
失效一个元素的 `display` ,布局中不产生影响(文档渲染为该元素不存在)。 所有后代元素均不会显示。 如果仍在布局中保留元素的占用空间,请使用 [visibility](#visibility) 属性代替。

<PlaygroundWithVariants
variant='hidden'
Expand All @@ -113,9 +113,9 @@ Turns off the `display` of an element so that it has no effect on layout (the do
&lt;/div&gt;'
/>

## Visibility
## Visibility {#visibility}

Utilities for controlling the visibility of an element. The `visibility` CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a `<table>`.
用于控制一个元素的可见性的工具类。 `visibility` CSS 属性会在不改变文档布局的情况下显示或隐藏元素。 该属性也可以隐藏位于 `<table>` 中的行和列。

<PlaygroundWithVariants
variant='visible'
Expand All @@ -130,9 +130,9 @@ Utilities for controlling the visibility of an element. The `visibility` CSS pro
&lt;/div&gt;'
/>

## Backface Visibility
## Backface Visibility {#backface-visibility}

The `backface` utility sets whether the back face of an element is visible when turned towards the user.
`backface` 工具类可设置元素背面朝向用户时,它是否可见。

<PlaygroundWithVariants
variant='hidden'
Expand All @@ -147,9 +147,9 @@ The `backface` utility sets whether the back face of an element is visible when
&lt;/div&gt;'
/>

## List Item
## List Item {#list-item}

The `list-item` utility generates a `::marker` pseudo-element with the content specified by its [list-style](/utilities/typography.html#list-style-type) properties (for example a bullet point) together with a principal box of the specified type for its own contents.
`list-item` 工具类生成一个 `::marker` 伪元素,其内容由它的 [list-style](/utilities/typography.html#list-style-type) 属性(例如着重号(bullet point))指定,并为它的内容生成一个指定类型的盒子。

<PlaygroundWithVariants
variant='list-item'
Expand Down

0 comments on commit 423f74c

Please sign in to comment.