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 元素，只能包含內聯元素，而不能包含塊級元素。

       

以上純屬個人總結，如有錯誤或不完善的地方，請指點，必第一時間完善，十分感謝。