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

       

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

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM