html 块状元素、内联元素、内联块状元素

1. 块状元素   display:block的特性是水平拉伸，垂直包裹，可以设置宽度和高度。块状元素还有个特性就是它的margin如果碰不到祖先元素的border或者padding，会与祖先元素垂直方向的margin-top、margin- bottom交叠。上下相邻的同级元素的margin也会交叠，就产生了margin合并。
2. 内联元素   display:inline的特性的自动包裹，水平和垂直方向会自动包裹至内容的宽度。 因为元素的内联的，是嵌入到行里面 的，所以对内联元素垂直方向设置的margin-top、margin-bottom不会影响span元素的layout，但是水平方向设置的 margin-left、margin-right会影响内联元素的缩进。因为其具有自动包裹的特性，所以overflow属性无效。
3. 内联块状元素display：inline-block，  除了具有内联元素自动包裹的特性外，还具有块状元素可以设置高度和宽度的特 性。内联块状元素还有一个重要的特性就是可以通过设置它的margin来改变其layout，但是内联块状元素的margin不与其他元素的margin 交叠。
   

---

1. 常用的块状元素：  <div><h1>-<h6><ul><ol><li><dl><dt><dd><hr><ul><p><tabel><thead><tbody><tfoot>
2. 常用的内联元素：  <a><b><i><span><em><label><strong><img><input><tr><th><td>
3. display:block    支持padding,margin,width,height,float,overflow 等属性   @ 默认 width:100%; height:auto; overflow:hidden;
   
4. display:inline    支持padding,margin-left,margin-right 等属性                 @ 可以通过 display:block/ float:left  转换为块状元素。不同的是float会导致器改变对齐。
5. display:inline-block   支持padding,margin,width,height,float,overflow 等属性  
   

1. IE6/IE7不识别display:inline-block属性
   1. div {display:inline; zoom:1;...}
   2. 即  {display:inline-block;} =={display:inline; zoom:1;}    后者兼容浏览器
2. 内联元素不能包含块级元素。
   1. 比如 P 元素，只能包含内联元素，而不能包含块级元素。

       

以上纯属个人总结，如有错误或不完善的地方，请指点，必第一时间完善，十分感谢。