『inline-block是什么?
Inline-block是元素display属性的一个值。display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。
.块级元素(block elements),来源于CSS盒子模型。 块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列。 行内元素,排列方式是水平排列。
.行内元素(inline elements)排列方式是水平排列。
.行内块元素(inline-block elements)在内部他的表现类似block元素,比如他拥有block元素的width height,padding,border与margin,而外部的排列方式有类似行内元素,即水平排列,而不是像块级元素一样从上到下排列.』
inline-block元素跟元素设置浮动后的表现差别并不是很大。对盒子设置浮动后,同样会水平排列。虽然他们实现的原理不同,但内部表现为块级元素,水平排列这种需求,浮动跟inline-block都适合实现。
『inline-block和float的区别
【虽然设置浮动跟设置inline-block有些特征类似,但两者的区别还是非常明显的:】
文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然,周围元素不会环绕这个元素,你也不可能通过清除inline-block就让一个元素跑到下面去。
水平位置(Horizontal position):很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display:inline-block,则对父元素设置一些定位属性会影响到子元素。(这还是因为浮动元素脱离文档流的关系)。
垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线(!important),但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inline-block时,这些元素之间就会出现空白。而浮动元素会忽略空白节点,互相紧贴
IE6和IE7:Ie67对此属性部分支持。如果你要兼容这些浏览器,必须解决这个问题。这不是个大问题,但值得留意一下。』
『解决空白问题
你现在估计已经跃跃欲试了,不过估计不想让那些空白出现。这里有一些方法来去掉空白:
删除html中的空白:不要让元素之间换行,这可能比较蛋疼,但也是一种方法,特别是你元素不多的时候。
使用负边距:你可以用负边距来补齐空白。但你需要调整font-size,因为空白的宽度与这个属性有关系。maybe 0.25em?
给父元素设置font-size:0:不管空白多大,由于空白跟font-size的关系,设置这个属性即可把空白的宽度设置为0. 在实际使用的时候,你还需要给子元素重新设置font-size。』
『什么时候使用inline-block,什么时候使用float
什么时候使用,取决于你的设计稿跟解决方法。如果你需要文字环绕容器,那浮动是不二选择。如果你需要居中对齐元素,inline-block是个好选择。
使用inline-block:当你需要控制元素的垂直对齐跟水平排列时,使用inline-block。
使用浮动:当你需要让元素环绕某一个元素时,或者需要支持旧版本ie,或者不想处理inline-block带来的空白问题时,使用浮动。』
『使用场景一:浮动、inline-block和图像排列(inline-block主要是为了处理垂直对齐问题。)
使用场景二:inline-block导航(横向导航栏)
当你需要将元素排列成一行或者多行时,更倾向于考虑使用inline-block代替float。当然,直接使用table也是一种方法,他毕竟是专门用来处理横向与纵向排列的元素的。
如果你需要创建一个很复杂的包含行列的布局,table是你的最佳选择,不过你同样也可以考虑inline-block。』
总结:如果你很纠结垂直对齐问题或者横向排列元素,不妨使用inline-block。如果你需要对一个元素跟围绕他的一些元素进行更多控制,你需要浮动。