11.1

display:inline-block 和display：flex 和display：block的比较

display：block

block（块级元素）: 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 能够改变元素的height，width的值. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

inline-block（融合行内于块级）: 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点. 用通俗的话讲，就是不独占一行的块级元素（存在间隙问题，间隙为4像素）

去除空隙的方法是 ：对父元素添加  font-size:0;

display: flex;
/*水平垂直居中*/ /*flex-end 是右边 flex-star 是左边*/
justify-content: space-around;
/*竖直垂直居中*/
align-items: center;

 

文本过长不换行显示省略号的全部代码：

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;