05月16, 2012

inline-block的使用场景

大家都知道inline-block的意义,这里就简单介绍一下这个属性,其就是实现在行内呈现块级元素的表症,其实际意义是非常重要的,举例来说,在一段文字中,要给某个关键字前加上一个icon,如图:

这个icon我们要是用标签来做的话,如果页面有N多个icon,无疑将增加页面加载,如果将所有的icon拼成一个图,放在页面上又不实际,这时就用到了inline-block,在设定高和宽后,用overflow隐藏掉溢出部分,就OK拉,这可能是inline-block的最大用途吧,如果再有最佳的应用场景,请留言哦^_^

innline-block给我们带来的方便自不必说,但是也带来了被滥用的麻烦,如图:

如果这里我们不用div,只是用a标签来实现,我们自然会想到inline-block,让它们成为行内块元素,但是我们用轻量的代码换来了许多问题,当我们写HTML代码的时候,需要将全部的a标签写在一行,中间不能出现换行,如果我们这样写:

<a href=””>彩妆</a> 
<a href=””>时尚女</a> 
<a href=””>牛仔</a> 
<a href=””>商务男</a> 
<a href=””>数码</a>

那我们得到的效果是:

我们发现每个tab中间裂开了,如果我们把它们写在一行,会得到一大坨代码,日后维护起来是不是很麻烦,总之,在实际使用中,在不同浏览器间展示效果也不尽相同,这对我们的时间造成很大的浪费。

最后结论是,在这种场景中,我们还是要回归本位,用浮动来解决这种排列的问题会更好一些,这样我们不仅能避免许多样式问题,而且我们也能评估出不同浏览器间的风险,启不是一举多得,所以,两害相权取其轻,我们在使用方便的属性同时应该更多考虑到代码的维护与浏览器间差异的不同。

这里推荐几篇关于inline-block的文章:

谢谢大家的阅读,如果有更好的实践效果,请留言给我,方便大家交流经验。

本文链接:https://75team.com/post/inline-block的使用场景.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。