柠檬酸
7月前来过
00:00/
发布于2017-05-17 / 1113次浏览
下面是百度百科对inline-block的解释：
在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性；而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，对inline元素设置width,height属性无效。
我们有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
以前一直不理解上面这段话，一下block，一下inline，死活绕不出这个弯。就在今天，自己在撸css时，终于用上了inline-block，并且深刻理解了上面这段解释。
看下面的例子：
这里我写了一个宽200px的div元素,也可以看到这个div的大小是200 x 311
看到父级的长宽是700 x 351，因为子元素的大小没有超过父级的宽度，所以自然放在了这个父元素里面。所以也有了上图的大量空白。
开发中，如果有多个这样的子元素怎么办。刚开始的想法是用float：left。
但是子元素有了float属性后，元素脱离文档流，父级没有定义高度和宽度，就会缩为0 。
那么要实现块级显示，就只能自己定义长度和宽度。
但是！日常开发中有几个会这么干？特别是自适应或者响应式布局，很少有情况是把长宽写死，我也非常抵触这种做法。
偶然今天突然想起这个以前一直不理解的display:inline-block
~哇，世界真美好。既不影响父元素的长宽，又不用去踩float这深坑。和float说拜拜！！！！
然而 inline-block 自带鬼畜间距