CSS之display属性

display属性值很多，但在开发中比较常用的属性值一般是none、block、inline、inline-block。

display:none

隐藏对象不显示，而不是从页面中清除

display:block

block元素会独占一行，此元素前后会带有换行符，block元素可以设置，宽度(width)、高度(height)、内边距(padding)和外边距(margin)元素。

常见的块级元素有：p、h1/h2/h3/h4/h5、div、ul、li、table。

display:inline（默认值）

inline， 指定对象为行内元素，元素不会独占一行，元素前后没有换行符，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素不能设置宽高，不能自动换行。

常见的行内元素有：span、input、img、textarea、label、select。

display:inline-block

将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。就是集合了block和inline的全部优点。width、height、margin、padding设置都会生效。

注意：使用该属性在一行排列的时候盒子与盒子之间会出现空白空隙。可以通过设置父元素 display: table; border-spacing: 0;来解决该问题

display:table

指定对象作为块元素级的表格。表格前后带有换行符，此属性能够解决那些在使⽤绝对定位和浮动定位进⾏多列布局时所遇到的问题。

display:flex

flex 是⼀种弹性布局属性，而且设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。而且它具有一些常见的属性可以帮助我们实现自定义页面布局。

flex-direction: 属性决定主轴的⽅向（即项⽬的排列⽅向）。
flex-wrap: 该属性定义，如果⼀条轴线排不下，如何换⾏。
flex-flow: 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
justify-content: 属性定义了项⽬在主轴上的对齐⽅式。
align-items: 属性定义项⽬在交叉轴上如何对齐。
align-content: 属性定义了多根轴线的对齐⽅式。