重新认识display:inline-block
2020-01-14 本文已影响0人
agamgn
一、前言
某些情况下，行内元素和块级元素并不能满足我们的设计需求，因此有了Inline-block这个属性，从属性的名字，我们就可以分析出其综合了两者的一些特征。我们可以这样理解，这个属性是个行内属性，可以设置width和height或者我们可以理解成一个块级元素，不用换行。
二、简介
我们从一段代码说起：
.content{
width: 200px;
height: 200px;
background-color:lightpink;
display: inline-block;
}
<span class="content content1">1</span>
<span class="content content2">2</span>
<span class="content content3">3</span>
demo.png
从上面的效果图，我们可以看出，使用此属性后，我们让行内元素具备了宽高属性。
同时我们也发现一个问题，为什么元素之间会有空隙呢？原因和解决方法见我的这篇文章display:inline-block元素之间存在间隙，原因及解决方案。
我们改一改HTML代码接着看：
<span class="content content1">1</span>
<span class="content content2"></span>
<span class="content content3">3</span>
当我删除content2中的内容的时候，呈现出这样的内容：
demo2.png
为什么inline-block元素的位置会受到其内容的影响呢？我们可以查到这样一句话：inline-block元素可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。这就是问题所在：对象仍然呈递为内联元素，而同一行内的内联元素默认是基于 baseline 对齐的。图中的黑线就是baseline:
demo3.png
关于基线请参考这篇CSS基线之道
但还有一个问题：为什么有内容的元素向下，而无内容的元素会向上呢？就此我们需要了解CSS渲染机制：对于一个inline-block元素，如果内部没有inline内联元素，或者overflow不是visible，则该元素的基线就是它margin的底边缘，否则就是元素内部最后一行内联元素的基线。
简单地就以上这种情况来说，没有内容的content2会基于它的margin底边缘也就是它的下边缘对齐，而包含内容的content1和content3会基于其内部内联元素的基线对齐，所以会造成这种一上一下的情况。
解决方法
- float，当然这是备选方案，毕竟脱离文档流后页面元素会不好控制。
- 简单粗暴地给所有元素都加上内容，例如空格符。
- 设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置。
三、布局
看inline-block的页面展示效果和float的效果差不多，那我们应不应该使用他代替float呢？
3.1、inline-block和float的区别
- 文档流:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。
- 水平位置：很明显你不能通过给父元素设置text-align:center让浮动元素居中。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。
- 垂直对齐：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。
- 空白：inline-block包含html空白节点。而浮动元素会忽略空白节点，互相紧贴
- IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下：
对于行内元素直接使用{dislplay:inline-block;}
对于块级元素：需添加{display:inline;zoom:1;}
