Display 的几个常用的属性，如下图：
第一个是block，是使元素□□□变成块级□□□□元素，元素会独□□占一行，块级元素□□宽度默认100%，可以设置▼宽度width、高度height、填充padding、间距margin的值。
第二个是inline，是使元素□□变成行内□□□□元素，可以与其□□□□他行内元□□素共占同♦一行，不会独占□□□□一行，
 不能设置宽度width、高度height，可以设置填充padding、间距margin左右的值。
第三个是inline-block，是使元素□□变成行内□□块级元素，可以与其□□□□他行内元□□□□素共占同□□□一行，元素不会□□□独占一行□□□的，可以设置□□□宽度width、高度height、填充padding、间距margin的值。
第四个是none，元素会隐藏，元素所占的空间也不会保留。
Display: inline-block 可以搭配vertical-align一起使用，vertical-align的属性有sub 、super、text-top、text-bottom、middle，对应的属性的解释如下图：

在工作中▼遇到的项□□□□目，有的例如□□□□企业网站□□□□的新闻或□□□者产品模◥块，如下图的□□□□效果，当上新闻□□□□图片或者□□□产品图片◈的尺寸不·同的时候，用浮动布□□□□局去做的▼话，可能排版□□□会产生错□□乱，那么可以□□□用Display:inline-block;
效果如下图：


css下图:



父级元素.order ul需要设置font-size: 0; 是因为需□□要消除存□□□在空白间□□□□隙的原因，空白间隙◆的间距是4px, 设置font-size: 0，就是字体□□□□大小为0，那么空白●间隙也会◥变成0了，这样就不□□□会影响下□□面的排版□□了。如上所说□□的产品列□□□表或者新□□□闻列表那□□□里的布局，即使上传□□□的图片宽□□度不同，图片的设◈置是width: 100%; 高度可能□□□不一样导□□□□致布局混丨乱，就可以用display: inblock; vertical-align: top; 排版就不□□□会乱，而且是相□□□对顶端对□□□□齐的。相比用浮□□动布局，float会使元素★脱离文档□□□□流，而且父级□□□元素的高□□□度会坍塌，用display: inline-block则不会。虽然会有▼上面说的□□□空白间隙，可以设置□□□□父级元素□□□字体大小□□为0就能解决□□这个问题，而且能兼□□□□容各个浏□□览器了。所以当遇□□□□到类似这□□□□种产品列□□□表或者新□□□闻列表是□□水平排列□□□□的，用display: inline-block;去做效果□□挺好，也不需要□□□清除浮动□□□□或担心排□□□版会错乱。