- 塊狀元素 display:block的特性是水平拉伸,垂直包裹,可以設置寬度和高度。塊狀元素還有個特性就是它的margin如果碰不到祖先元素的border或者padding,會與祖先元素垂直方向的margin-top、margin- bottom交疊。上下相鄰的同級元素的margin也會交疊,就產生了margin合並。
- 內聯元素 display:inline的特性的自動包裹,水平和垂直方向會自動包裹至內容的寬度。 因為元素的內聯的,是嵌入到行里面 的,所以對內聯元素垂直方向設置的margin-top、margin-bottom不會影響span元素的layout,但是水平方向設置的 margin-left、margin-right會影響內聯元素的縮進。因為其具有自動包裹的特性,所以overflow屬性無效。
- 內聯塊狀元素display:inline-block, 除了具有內聯元素自動包裹的特性外,還具有塊狀元素可以設置高度和寬度的特 性。內聯塊狀元素還有一個重要的特性就是可以通過設置它的margin來改變其layout,但是內聯塊狀元素的margin不與其他元素的margin 交疊。
- 常用的塊狀元素: <div><h1>-<h6><ul><ol><li><dl><dt><dd><hr><ul><p><tabel><thead><tbody><tfoot>
- 常用的內聯元素: <a><b><i><span><em><label><strong><img><input><tr><th><td>
- display:block 支持padding,margin,width,height,float,overflow 等屬性 @ 默認 width:100%; height:auto; overflow:hidden;
- display:inline 支持padding,margin-left,margin-right 等屬性 @ 可以通過 display:block/ float:left 轉換為塊狀元素。不同的是float會導致器改變對齊。
- display:inline-block 支持padding,margin,width,height,float,overflow 等屬性
- IE6/IE7不識別display:inline-block屬性
- div {display:inline; zoom:1;...}
- 即 {display:inline-block;} =={display:inline; zoom:1;} 后者兼容瀏覽器
- 內聯元素不能包含塊級元素。
- 比如 P 元素,只能包含內聯元素,而不能包含塊級元素。
- 比如 P 元素,只能包含內聯元素,而不能包含塊級元素。
以上純屬個人總結,如有錯誤或不完善的地方,請指點,必第一時間完善,十分感謝。