让人又爱又恨得inline-block

从页面的发展历程俩看我们是经过了 表格布局->表格+css->div+css的浮动布局->div+css的内联块布局
div+css的浮动布局

div+css的浮动布局之所以流行多年也是有原因的：

• 更快的网页布局
• 搜索引擎更加友好
• 更好的重构性
  不过也存在一些问题：
• 浮动元素导致其上级父盒子的“高度塌陷”，也就不能如正常文档结构所体现的那样自然包裹其下级元素；
• 不及时清理浮动可能导致一些布局错位;
• 在ie6，ie7下有许多著名的bug；

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

1. 盒子跟外界（其兄弟元素）表现为内联（inline）模式，即可以跟其兄弟元素自然并排放置（类似img标签），但盒子作为整体，又表现为块模式，即该盒子本身不能“自动换行显示”，可以设定宽高。

2. 实际上，从整体表现上来说，inline-block盒子的表现非常类似“img”元素，即多个img可以在一行中出现，但一个img本身是不会“中间折行”的（对比：span和a标签碰到了行尾都会自动折行）。只不过img作为图片显示元素，其“内部”不能放其他内容了，而inline-block盒子却是我们最常规的可任意放置其他内容的一个“容器”。

   要用inline-block布局会存在一个4px左右的的间隙
   下面总结了几条去除inline元素和inline-block元素去除间距的方法：

1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。
2、设置margin-right为负值，但要考虑上下文的字体和文字大小。
3、先设定子元素字体，再设置父元素font-size:0px;chrome中：-webkit-text-size-adjust:none;
4、设置父元素letter-spacing或word-spacing为负值，要考虑字体，子元素有文字也要注意设置letter-spacing或word-spacing的值。
5.float:left;

---

题外话：Span或Div设置“display:inline-block形式的中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法是给span设置vertical-align:middle;