个人头像

柠檬酸

24小时前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

终于理解了inline-block

发布于2017-05-17 / 257次浏览

下面是百度百科对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说拜拜!!!!

 

喜欢 0
TAGS:  暂无标签
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : 终于理解了inline-block

1 条评论

  1. 保罗 说道: 来自 Google Chrome 61.0.3163.100 in Windows 8.1
    2017-10-08 10:24

    然而 inline-block 自带鬼畜间距