css之display:inline-block布局

css之display:inline-block布局
先写几个常用的display布局方法
1.display：none 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

2.display：block 块级元素
通常可以用来搭配display：none来实现元素的显示或隐藏，也可以作为块级元素来使用，使元素独占一行

3.display：inline 内联元素
这是display的默认属性，一个行内元素可以在段落中 hello 包裹一些文字而不会打乱段落的布局。即可以与其他行内元素共享一行，不会独占一行。不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin来撑开元素，但设置top以及bottom对他无效。

4.display：inline-block 行内块元素
好啦，轮到我们今天的主角登场了。inline-block可以说是结合了inline和block的部分属性，最大的特点便是可以使元素在一行上显示 ，又能够改变元素的height，width的值. 使用padding，margin的top，left，bottom，right都能够撑开元素。
那么，display：inline-block和float又有什么区别呢？
首先float浮动的元素会脱离文档流，下面的元素会占据他原来的位置，需要通过清除浮动的方法来让元素显示在正常位置，其次，浮动的元素因为不占据位置，后面计算高度的时候就可能出现偏差（可以通过在后面添加一个高度相同的盒子，撑开高度即可），配置相对繁琐和不灵活
而display：inline-block最大的优势便是不会脱离文档流，也可以让其元素在一行显示，在多个元素并排且有其子元素需要换行显示的时候优势极为明显，可以省去很多的配置时间