css display属性详解

CSS display属性用于指定在页面上使用哪种盒模型来渲染指定的元素。通俗来讲就是某个元素在页面中的显示方式

• none：元素完全从页面中移除。它的所有后代元素同样被移除。文档渲染的过程中就好像在文档树中这个元素不存在一样。
• inline：显示为内联元素。
• inline-block：显示为块级内联元素。它可以设置元素的宽度和高度，其它的行为和内联元素相同。
• block：显示为块级元素。
• list-item：该元素生成一个块级容器和单独的内联列表元素。
• run-in：指定为run-in的元素的行为如下：
  • 如果指定为run-in的元素包含一个块级元素，那么这个元素显示为块级元素。
  • 如果指定为run-in的元素后面跟随一个非浮动或绝对定位的块级元素，那么run-in元素会成为这个块级元素的第一个内联元素。一个run-in元素不能运行在一个以run-in元素开始的块级元素前，或这个块级元素本身就是run-in元素。
  • 其它情况下，run-in元素作为块级元素来显示。
• inline-table, table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption：这些值会将元素显示为表格。inline-table不是一个在HTML中直接映射的元素，它的行为和HTML <table>元素相同，但是它是一个内联元素，而不是一个块级元素。
• flex：元素显示为块级元素，它的内容根据Flexbox模式来进行布局。
• inline-flex：元素显示为内联元素，它的内容根据Flexbox模式来进行布局。
• grid：元素显示为块级元素，它的内容根据Grid模式来进行布局。
• inline-grid：元素显示为内联元素，它的内容根据Grid模式来进行布局。