css display的block，inline和inline-block
display显示模式常会用到，是基础中的基础。很多做前端开发的朋友可能对此会嗤之以鼻，但是如果对这个问题不能深入理解的话，工作中也会出现很多意想不到的问题。比如我今天，用到inline-block的时候我不了解他的兼容性情况，因为有的时候貌似IE6也识别了这个属性，有的时候又不识别。在网上查了以后发现，原来是自然属性是inline的元素，IE6/7是识别inline-block的。所以为了巩固一下display这方面的内容，我整理了一下这方面的知识
一下block和inline的部分来自这篇文章：
http://www.impressivewebs.com/difference-block-inline-css/
display:block
块状元素:块状元素有如下特点：
- 如果宽度未被设定，会自然填充满父级容器
- 可以拥有margin padding 属性
- 如果高度未被设定，会自然的扩展来适应子元素的高度（假设子元素没有浮动或者特殊定位）
- 默认会被置于上个元素下面（填满一行）（假设周围没有浮动和特殊定位元素）
- 忽略vertical-align属性
- 块状元素没有必要再设定width:100%, 如果设定甚至会引发一些问题。
- 块状元素没必要设定clear，会自动“换行”。
- 默认block的元素包括
<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>
display:inline
行间元素特点如下：
- 流动布局
- 不会换行
- 适用于white-space属性 ？（疑问原文：Is subject to white-space settings in CSS）
- 忽略上下的margin，左右margin有效，padding均有效
- 忽略width 和height属性
- 如果被设置浮动，自动变成block级别元素，继承了他们的所有特性
- 是vertical-align的主题？（疑问原文：Is subject to the vertical-align property）
- 默认的inline元素包括
<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.
理解inline可以把inline元素当作文本，按照文本的方式排布。
display:inline-block
inline-block元素简单的来说是可以具有宽高的inline元素，他不像block元素会强制跑到第二行去。
关于inline-block 淘宝UED做过一篇专门的研究，
inline-block的兼容性图表：
http://caniuse.com/inline-block
总结就是ie6，7要想兼容inline-block需要触发Haslayout属性。ie6/7其实是部分支持这个属性，所以inline-block的兼容性说起来还不错，可以多用，在一些布局的时候很有效，比如下面这个例子
来源：http://learnlayout.com/inline-block.html
这里面用inline-block取代float方法做了一个grid （网格状布局），可以少试用最后的清除浮动块，而且看起来更酷，不是吗？但是这里用的是div元素，所以ie6，7还需要激活一下他们的haslayout属性，具体的方法是这样的：
http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block
这叫做IE6，7 inline-block hack方法：
|
1
2
3
|
display: inline-block;*display: inline;zoom: 1; |
感谢所有原文的作者，并声明此篇内容无任何版权，如果侵犯到别人请及时告知我并第一时间删除，我站在各种巨人的肩膀，谢谢各种巨人们～
浙公网安备 33010602011771号