1. 犀牛前端部落首页
  2. CSS教程

CSS display属性

CSS display属性

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

这是一个非常重要的属性,而且可能是您可以使用的值最多的属性。

这些值包括:

  • block
  • inline
  • none
  • contents
  • flow
  • flow-root
  • table (and all the table-* ones)
  • flex
  • grid
  • list-item
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid
  • inline-list-item

另外还有一些您不太可能使用的属性,比如ruby。

选择其中任何一个元素都将极大地改变浏览器对元素及其子元素的行为。

在这篇文章中,我将分析其他地方没有提到的最重要的几点:

  • block
  • inline
  • inline-block
  • none

inline

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

除了一些元素(如div、p和section)之外,所有的HTML标记都以内联的方式在框外显示,这些元素由用户代理(浏览器)设置为块。

行内元素没有应用任何边距或填充。

高度和宽度也一样。

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

inline-block

类似于内联,但内联块的宽度和高度将按您指定的方式应用。

block

如前所述,元素通常以内联方式显示,但一些元素除外,包括

  • div
  • p
  • section
  • ul

被浏览器默认设置为块。

使用display: block,元素被一个接一个地垂直堆叠,每个元素都占据了页面的100%。

如果您对宽度和高度属性以及边距和填充进行设置,则会尊重分配给它们的值。

none

使用display: none使元素消失。它仍然在HTML中,只是在浏览器中不可见。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4620.html

发表评论

登录后才能评论