拜拜了,浮动布局-基于display:inline-block的列表布局 张鑫旭博客笔记

by zhangxinxu from http://www.zhangxinxu.com

本文地址：http://www.zhangxinxu.com/wordpress/?p=1194

一、列表浮动布局的局限

所以，如果我们要使用浮动布局列表，就必须限高，于是，不得已，需要裁掉超多的用户名信息。

浮动本身就是个魔鬼，所以，使用浮动布局还需要修复其带来的副作用——高度塌陷的问题，也就是常提到的“清除浮动”了。

另外，IE6下，重复的列表元素会出现莫名的bug，例如出现不知哪来的文字。

由于浮动布局学习与理解的门槛低，又受主流之风驱动，且满足了绝大多数的布局需求。所以，在追寻更好的布局方式上，大家的愿望似乎不是很强烈，当然，可能是自己井底之蛙了，不过从国内领先网站的列表布局情况来看，貌似浮动布局还是扎根很深的（这回在列表布局上，人人网让我刮目了一把）。

二、另外一种display属性，display:inline-block

(

inline-block 和 block区别 

block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。

一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

• display:block

1. 1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
   2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
   3. block元素可以设置margin和padding属性。

• display:inline

1. 1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
   2. inline元素设置width,height属性无效。
   3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

• display:inline-block  直观理解：行内的block

1. 1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
   2. 在内部他的表现类似block元素，比如他拥有block元素的width height,padding,border与margin，而外部的排列方式有类似行内元素，即水平排列(比如一个inline-block后面的inline元素会水平排列在它的后面)，而不是像块级元素一样从上到下排列
      

)

display:inline-block感觉与display:table-cell有些相似，例如对内部元素的包裹性。但是，由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。可谓黑白通吃，左右逢源。

inline-block属性的元素适用于inline box模型，所以，当其中的列表元素高度不一时，是不会有错位的。关于line box模型，我在之前的“css行高line-height的一些深入理解及应用”第二部分提到了，以及前面“CSS float浮动的深入研究、详解及拓展(一)”一文的“浮动的破坏性”部分中做过比较详细的介绍。一言以蔽之，就是每一行所有的inline元素和inline-block元素会共同形成一个line boxes，这个line box的高度由里面最高的元素决定。所以，即使inline-block属性的列表元素高度异常，撑开的是整个line boxes的高度，因而，不会与下一行的列表元素发生错位。如下面的我自己画得拙劣的示意图所示的：

根据一些前辈的说法，IE6/7不支持display:inline-block属性，只是可以让标签有类似于inline-block的属性，起初我也是接受这种说法的，不过后来又表示了怀疑，最近使用text-align:justify;做测试的时候的一些样式表现证实了：确实IE6/7是不支持display:inline-block属性，只是让其表现的跟inline-block一样，尤其对于inline水平的元素，其表现度可以用perfect一词来形容了。

对于IE8+以及现代浏览器，直接使用：

{display:inline-block;}

就可以了，支持任意水平的元素。

对于不支持的IE6/7浏览器该怎么办呢？如果是inline水平的元素（如a标签，span标签之类）跟上面一样，直接：

{display:inline-block;}

就可以了，对于这两个浏览器，其功效与*zoom:1;是一样的。

如果是block水平的元素，例如li标签。则需要多点代码，目前我知道的方法有两个，如下所示：

li {display:inline-block;...}li {display:inline;}

或者是：

li{display:inline; zoom:1;...}

block水平的inline-block化的元素与inline水平的在表现层又是有差异的，这个后面会谈到。

但是，这种做法好傻啊，而且HTML代码的可读性很不好。尤其考虑到现实情况：后台人员可能不清楚标签换行对样式的影响，直接后台repeat的时候，换行了。所以，此方法顶多临时应付些小打小闹的地方，要想广泛使用，显然业余了。

其实，我们只要细细想想，空格符本质上就是个字符，与a,b,c,d这些字符是个同一个属性的东西，只是他是空格，透明的看不见而已（但可以选中）。所以，只要我们使用让文字宽度为0的那些方法，不就可以解决inline-block元素间换行符间隙的问题啦！

于是，很自然而然的，想到了以下样式：

{font-size:0;}

我还记得我大学时候解决IE6下标签高度无法小于11像素bug时的方法，就是使用的font-size:0;这属性可以让莫名的空格啊神马东东的都变成浮云。我们来试下，可否用来消除inline-block元素间的换行间隙的问题。
如下测试代码：

ok，现在我们把上面唠唠叨叨的些东西提炼整理一下，有如下一些结论：
» block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；
» inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；
» font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；
» letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。

为什么袁隆平的水稻牛逼啊，就是因为是杂交的。这也是不宜近亲结婚之道，杂交可以产生彪悍的下一代。这个原理同样适用于CSS，虽然font-size:0有缺陷，letter-spacing负值也有不足，但是一旦将它们强制交配，哦呵呵，互补与整合，换行符间隙问题迎刃而解。如下测试代码（环境字体大小84%，字体Arial）：