Code前端首页关于Code前端联系我们

CSS 显示属性

terry 8个月前 (09-07) 阅读数 220 #CSS
文章标签 CSS3CSS百科display
CSS 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 标签均在框架外内嵌显示,除了由用户代理(浏览器)设置为块的某些元素(例如 div、p 和section)之外。

内联元素没有应用边距或填充。

高度和宽度也是如此。

您可以添加它们,但页面的外观不会改变 - 浏览器会自动计算并使用它们。

内联-block

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

block

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

  • div
  • p
  • ul

默认阻止浏览器。

显示:block时,元素一个接一个垂直堆叠,每个元素占据页面的 100%。

如果设置宽度和高度以及边距和填充属性,则会考虑分配给它们的值。

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

  • 版权声明

    本文仅代表作者观点,不代表Code前端网立场。
    本文系作者Code前端网发表,如需转载,请注明页面地址。

    发表评论:

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    热门