比float更好的网页布局之inline-block

一：网页布局发展历程

• 表格布局
• 表格+css
• div+css的浮动布局
• div+css的内联块布局

二：流行多年的浮动布局的优劣

优势：

div+css浮动布局的优势，主要是相对于table布局来说的，主要表现为以下几个方面：
1，更快的网页呈现速度；
2，更佳的后台编程支持度；
3，更好的搜索引擎友好性；
4，更优的网页修改重构性。

劣势：

1，一行盒子的高度有出入可能导致将下一行的盒子“卡住 ”，像俄罗斯方块放错地方的时候被“卡住”后下面空出一块空间；
2，浮动元素导致其上级父盒子的“高度塌陷”，也就不能如正常文档结构所体现的那样自然包裹其下级元素；
3，浮动元素还导致其后的兄弟元素也跟着浮动元素到同一行了；
4，其他若干在IE6/7下让微软蒙羞的著名bug也多与浮动有关。

三：inline-block布局：一种更优的布局技术

1）inline-block布局：一种全新的web页面布局解决方案，其既可以充分发挥div+css浮动布局的优点，又可克服浮动盒子所带来的缺点

• 什么是inline模式的盒子：一个盒子在一行内连续排列出来，后一个紧跟着前一个在一行中，直到碰到行尾后再自然换到下一行继续如此显示。行内盒子不能设置宽度和高度，也没有上下margin和padding（但左右margin和padding存在）。常见行内元素：span，a，img，b，i，u
• 什么是block模式的盒子：一个盒子自身就占据其所在父盒子中的一整行，而不管其本身的宽度多少，也不会“折行”。常见块元素：div，hr，p，ul/li，ol/li，dl/dt/dd，h1-h6，pre，form

2）那么inline-block的表现又是什么呢？

• 盒子跟外界（其兄弟元素）表现为内联（inline）模式，即可以跟其兄弟元素自然并排放置（类似img标签） ，但盒子作为整体，又表现为块模式，即该盒子本身不能“自动换行显示”，可以设定宽高。
• 实际上，从整体表现上来说，inline-block盒子的表现非常类似“img”元素，即多个img可以在一行中出现，但一个img本身是不会“中间折行”的（对比：span和a标签碰到了行尾都会自动折行）。只不过img作为图片显示元素，其“内部”不能放其他内容了，而inline-block盒子却是我们最常规的可任意放置其他内容的一个“容器”。

3）各种布局本质上解决什么问题？

所谓布局，无非其实就是解决元素放置到页面上的排布方式。从“平面区块”的角度来说，不管用哪种布局方式，无非就是解决2个问题：

• 元素怎么从上到下排列出来：

块元素（如div）自然上下，br元素明确换到下一行，tr元素表示表格的行。可见上下排列关系中，无需额外css技术。

• 元素怎么从左到右排列出来：

1. 行内元素自然从左到右
2. table中的td
3. 盒子的浮动
4. inline-block！

• 布局原理：层层 划分“当前区域”

• 划分方法有两个：

1. 上下划分
2. 左右划分

inline-block布局的特点和做法非常简单：

• 根据我们前面的inline-block的表现的介绍，和布局的本质思想，我们实现inline-block模式的布局非常简单：

1. 实现横向排列，这是inline-block盒子的自然表现（就如图片自然横向排列一样，这也是“行内块”盒子所体现的“inline”的地方。我们所要做的无非就是设定合适的宽度。
2. 实现纵向排列：跟inline-block无关，也跟float无关，而是直接利用我们前面说的div和br，轻松搞定！

四：inline-block布局要解决的问题(实现兼容性的做法)

• 我们很快发现，如果页面不考虑象素级的精确设计，使用inline-block技术进行布局非常容易理解和容易实现，几乎跟我们在地面上贴瓷砖一样。但我们也发现，被inline-block化之后的盒子，盒子跟盒子之间有几个像素的间隙，就像图片自然并排放置一起时的样子，这显然对现代像素级的设计需求来说是不够的！那怎么解决：

1. 首先，间隙是什么？——空格！
2. 其次，怎么去除间隙？——父盒子设置font-size:0px；
3. 最后，没有最后了，这就几乎好了——对现代浏览器来说

• 这里将block元素转为inline-block元素有两个容易解决的兼容性问题：

1. 将块盒子转换为行内块盒子：xxx{display:inline-block;}

xxx { *display:inline;}/*再写回“inline”模式，这是对IE6/IE7兼容，只有这样IE6/7才表现为行内块盒子*/

1. font-size:0不能消除苹果浏览器safari的盒子间隙，需再设置letter-spacing为负值，比如：letter-spacing:-4px；

此负值在font-size为0的情况下，对其他浏览器无影响；

此负值大小受字体名称和字体大小影响，需根据场合略调整。比如常见的12px的Arial字体是-4px，12px的宋体是-8px

• 将inline元素转为inline-block元素也行，但兼容性更差些，不推荐

五：inline-block布局应用（案例演示）

最后的总结代码如下：

/*应用到inline-block布局的外面盒子*/
.out{
font-size:0px;/*inline-block布局的核心代码1*/
letter-spacing:-8px;/*兼容代码1：兼容苹果浏览器，负值对其他浏览器无效*/
text-align:center;/*inline-block布局的辅助代码1，可以left，center，right*/
}
/*应用到inline-block布局的里面盒子*/
.in{
display:inline-block;/*inline-block布局的核心代码2*/
vertical-align:top;/*inline-block布局的辅助代码2，可以top, middle, bottom*/
}
.in{
*display:inline;/*兼容代码2：兼容 IE6/7*/
}

参考资料：

传智播客罗弟华老师研究 inline-block布局技术 视频下载

链接:http://pan.baidu.com/s/1sjrqYfj 提取密码:gh3r

CSS float浮动的深入研究、详解及拓展(一)
http://www.zhangxinxu.com/wordpress/?p=583
CSS float浮动的深入研究、详解及拓展(二)
http://www.zhangxinxu.com/wordpress/?p=594
拜拜了,浮动布局-基于display:inline-block的列表布局
http://www.zhangxinxu.com/wordpress/?p=1194
inline-block 前世今生
http://ued.taobao.org/blog/2012/08/inline-block/
CSS浮动布局与inline-block
http://www.keakon.net/2010/11/13/CSS%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80%E4%B8%8Einline-block

比float更好的网页布局之inline-block,古老的榕树,5-wow.com