display 属性详解

在CSS中，每个元素都有display属性，每个元素都有display默认属性值。比如说div元素默认值为block，为块级元素；span元素默认值为inline，为行内元素。同时我们可以修改display属性值来进行块级元素与行元素转换，当然display还有以下属性：none、inline-block、table-cell、flex、grid。

display:none

将指定元素隐藏，此时元素的位置不会被保留，会被其他元素覆盖。

提示

设置此属性时，会导致浏览器渲染进程的重排和重绘，如果频繁进行切换，会影响浏览器性能。关于重绘重排，记录在此篇文章：浏览器渲染过程 (opens new window)

解决方法：

1. 使用tranform代替top，此动画属性不运行在渲染进程的主线程中，而在生成器线程，原理见：JavaScript运行机制 (opens new window)
2. 可以设置opacity代替visibility，这就涉及到BFC的知识了，还未整理，待填坑中......

display:inline

指定元素为行内元素：

1. 行内元素不会独占一行，多个行内元素会排在同一行，宽度随元素的内容变化；
2. 设置宽高无效
3. inline元素的margin和padding元素，水平方向设置会产生边距效果，而垂直方向不会

display:inline-block

指定为行内块元素：

1. 将对象呈现为inline对象，但是对象的内容作为block对象呈现；
2. inline-block元素可以设置vertical-align属性；（此属性对行内元素、表格元素生效，不能适用于块级元素）
3. 行内块元素的空隙是因为元素间的空格符、换行符等占据宽度产生的，可以通过是指定margin值或者设置父元素word-spacing负值。

display:block

指定为块级元素：

1. 块级元素独占一行，多个块级元素会各自起一行；block元素宽度自动填满起父元素宽度；
2. 可以设置宽高属性；
3. 可以设置margin、padding。

display：tabel-cell

指定为表格单元格，一般搭配父元素设置table属性值使用。在搭配table使用时，table-cell会自动按照单元格宽度比进行扩展，设置的宽度可能会失效。

提示

可以通过给父元素设置table属性值，将它变为一个块级表格元素；子元素设置table-cell属性值，将它变成表格单元格，给子元素设置vertical:middle从而实现内容居中。

display:flex

指定为弹性布局。具体内容见flex布局语法 (opens new window)

父项上有六个属性：

• flex-direction：决定项目的排列方向
• flex-wrap：项目轴线上换行方式
• flex-flow：flex-direction和flex-flow简写方式，默认值为row nowrap
• justify-content：项目在主轴上的对齐方式
• align-items：项目在交叉轴上如何对齐
• align-content：定义了多跟轴线的对齐方式（一排项目为一根轴线）

子项上有以下六个属性：

• order：定义项目的排列顺序，数值越小排列越靠前；
• flex-grow：定义项目的放大比例，默认为0；即如果存在剩余空间也不放大
• flex-shrink：定义项目的缩小比例，默认为1；即如果空间不足，则项目将缩小
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。（浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目本来大小；也可以设置像素值）
• flex：flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto
  • flex：auto 代表 1 1 auto
  • flex: none 代表 0 0 auto
• align-self: 设置单个项目与其他项目不一样的对齐方式，可以覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性；如果没有父元素，等同于stretch。

display:grid

指定为网格布局，类似于flex布局，但flex布局是轴线布局，可以看作是一维布局。Grid布局则是将容器划分为“行”和“列”，产生单元格，然后在指定项目所在的单元格，可以看作是二维布局。具体内容见CSS Grid 网格布局教程 -- ruanyifeng (opens new window)