css display属性_CSS Display属性

css display属性

The display property of an object determines how it is rendered by the browser.

对象的display属性确定浏览器如何呈现它。

It’s a very important property, and probably the one with the highest number of values you can use.

这是一个非常重要的属性，并且可能是您可以使用的值数量最多的属性。

Those values include:

这些值包括：

• block

  block

• inline

  inline

• none

  none

• contents

  contents

• flow

  flow

• flow-root

  flow-root

• table (and all the table-* ones)

  table (以及所有table table-*的表)

• flex

  flex

• grid

  grid

• list-item

  list-item

• inline-block

  inline-block

• inline-table

  inline-table

• inline-flex

  inline-flex

• inline-grid

  inline-grid

• inline-list-item

  inline-list-item

plus others you will not likely use, like ruby.

加上其他您不太可能使用的东西，例如ruby 。

Choosing any of those will considerably alter the behavior of the browser with the element and its children.

选择这些选项中的任何一个都将大大改变带有元素及其子元素的浏览器的行为。

In this post I’ll analyze the most important ones not covered elsewhere:

在这篇文章中，我将分析其他地方未涵盖的最重要的内容：

• block

  block

• inline

  inline

• inline-block

  inline-block

• none

  none

I cover others in separate posts:

我在其他帖子中介绍了其他人：

• table in the Tables guide

  table中的表导

• flex in the Flexbox guide

  Flexbox指南中的 flex

• grid in the CSS Grid guide

  grid中CSS格尺

inline (inline)

Inline is the default display value for every element in CSS.

内联是CSS中每个元素的默认显示值。

All the HTML tags are displayed inline out of the box except some elements like div, p and section, which are set as block by the user agent (the browser).

除某些元素(例如div ， p和section )被用户代理(浏览器)设置为block外，所有HTML标记均以开箱即用的方式内联显示。

Inline elements don’t have any margin or padding applied.

内联元素未应用任何边距或填充。

Same for height and width.

高度和宽度相同。

You can add them, but the appearance in the page won’t change - they are calculated and applied automatically by the browser.

您可以添加它们，但是页面中的外观不会改变-它们是由浏览器自动计算和应用的。

inline-block (inline-block)

Similar to inline, but with inline-block width and height are applied as you specified.

与inline相似，但使用inline-block时，将按您指定的width和height进行应用。

block (block)

As mentioned, normally elements are displayed inline, with the exception of some elements, including

如前所述，除了某些元素(包括

• div

  div

• p

  p

• section

  section

• ul

  ul

which are set as block by the browser.

由浏览器设置为block 。

With display: block, elements are stacked one after each other, vertically, and every element takes up 100% of the page.

使用display: block ，元素彼此垂直垂直堆叠，每个元素占据页面的100％。

The values assigned to the width and height properties are respected, if you set them, along with margin and padding.

如果进行设置，则会遵守分配给width和height属性的值以及margin和padding 。

none (none)

Using display: none makes an element disappear. It’s still there in the HTML, but just not visible in the browser.

使用display: none使元素消失。 它仍然存在于HTML中，但在浏览器中不可见。

翻译自: https://flaviocopes.com/css-display/

css display属性