CSS Display属性

如何使用displayCSS中的属性

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

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

这些值包括:

  • block
  • inline
  • none
  • contents
  • flow
  • flow-root
  • table(以及所有table-*那些)
  • flex
  • grid
  • list-item
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid
  • inline-list-item

加上您不太可能使用的其他内容,例如ruby

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

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

  • block
  • inline
  • inline-block
  • none

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

inline

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

除某些元素外,所有HTML标记均以开箱即用的方式内联显示divpsection,它们被设置为block由用户代理(浏览器)提供。

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

高度和宽度相同。

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

inline-block

如同inline,但inline-block widthheight将按照您指定的方式应用。

block

如前所述,通常某些元素以行内显示,但某些元素除外,包括

  • div
  • p
  • section
  • ul

设置为block通过浏览器。

display: block,元素彼此垂直堆叠,每个元素占据100%的页面。

分配给widthheight如果您设置了属性,则它们也会受到尊重marginpadding

none

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

免费下载我的CSS手册


更多CSS教程: