深入了解display:inline-block

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入了解display:inline-block相关的知识,希望对你有一定的参考价值。

      先聊display吧,display 属性规定元素应该生成的框的类型。也就是这个属性用于定义建立布局时元素生成的显示框类型。因为牵扯到布局,使用display属性时,要是用错了display的值,很可能之前的布局会大乱。针对前端构建布局工程师来说,布局乱了那还了得,所有很有必要深入了解display属性。

     display常用到的几个属性值block、inline-block、inline和none

属性值 block inline inline-block none
宽高 支持宽高 不支持宽高 支持宽高 隐藏元素,并脱离文档流
  不设置宽度时,宽度为父元素宽度 内容撑开宽度 不设置宽度时,内容撑开宽度
   独占一行  非独占一行  非独占一行
       
       
       

以上是关于深入了解display:inline-block的主要内容,如果未能解决你的问题,请参考以下文章

深入理解display属性

inline-block,真的懂吗

深入理解display属性

深入理解display属性

深入理解和应用display属性

深入理解和应用display属性