display属性

对于大多数display属性而言，实际coding中使用的场景很少。本文仅列举一些w3c列举的属性，还有一些属性过于小众，就不列举了。如果想要拓展的话可以参考display的32中写法

从大的分类来讲，display可以分为6个大类，和1个全局类。

外部值

block

对于我们最熟悉的<div>默认的就是block，此外还有h1-h6，p，form，header，footer，section，article

inline

行内元素默认都是这个值，如span，a，img，b，i

run-in

这个只有IE和Opera支持。此元素会根据上下文作为块级元素或内联元素显示。

详情参考：从display:run-in中学习新技能

内部值

table

基于CSS属性display:table的表格布局使用

flex

敲重点啦！！！

参考：阮一峰讲flex，可以将这个作为词典，当然能够记住其中的常用属性最好不过了，如flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

grid

继续敲重点！！！

grid布局，中文翻译为网格布局。学习grid布局有两个重点：一个重点是grid布局引入了一个全新的单位：fr，它是fraction（分数）的缩写，所以从此以后，你的兵器库里除了px, em, rem, 百分比这些常见兵器以及vw, vh这些新式武器之外，又多了一样旁门暗器fr，要想用好grid，必须充分掌握fr。另一个重点是斜杠操作符，这可不是分数哦。它表示的是起始位置和结束位置。比如说3 / 4，这可不是四分之三的意思，这是指一个元素从第3行开始，到第4行结束，但又不包括第4行。

同样，与grid相关联的也有一大堆旁门属性，是在学习display: grid;的同时必须掌握的。包括grid, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template, grid-template-columns, grid-template-rows, grid-template-areas, grid-gap, grid-column-gap, grid-row-gap, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid-column, grid-row。不能详述，关于这个写起来又是一大篇文章。

参考文章：

  1. 边玩边学grid
  2. 360奇舞团
  3. grid讲解

ruby

目前除了Firefox，其他浏览器的支持性并不大好，主要用于给文字加拼音等场景。

subgrid

建议阅读：为什么是display:contents而不是subgrid

列表值

list-item

display: list-item;和display: table;一样，也是一帮痛恨各种html标签，而希望只使用div来写遍一切html的家伙搞出来的东西，实际使用极少

属性值

属性值一般是附属于主值的，比如主值里设置了display: table;，就可以在子元素里使用display: table-row-group;等等属性，不过并不绝对。关于它们的作用，主要参考主值就够了。

  • table-row-group
  • table-header-group
  • table-footer-group
  • table-row
  • table-cell
  • table-column-group
  • table-column
  • table-caption
  • ruby-base
  • ruby-text
  • ruby-base-container
  • ruby-text-container

显示值

contents

display: content是display的一个新的属性值。为一个元素应用display: content属性会导致其自身的盒子不生成但所有的子元素都会照常生成。

none

建议阅读：display:none和visibility:hidden

混合值

inline-block

inline-table

inline-flex

inline-grid

全局值

inherit

initial

unset

对于如何写好CSS布局，建议参考：

  1. CSS布局