日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
CSSdisplay:table屬性用法解析

本節(jié)和大家重點(diǎn)討論一下CSS display:table的使用，當(dāng)IE8發(fā)布時(shí)，它將支持很多新的CSS display屬性值，包括與表格相關(guān)的屬性值，CSS表格能夠解決所有那些我們?cè)谑褂媒^對(duì)定位和浮動(dòng)定位進(jìn)行多列布局時(shí)所遇到的問(wèn)題。

CSS display:table屬性

當(dāng)IE8發(fā)布時(shí)，它將支持很多新的CSS display屬性值，包括與表格相關(guān)的屬性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，它也是***一款支持這些屬性值的主流瀏覽器。它標(biāo)志著復(fù)雜CSS布局技術(shù)的結(jié)束，同時(shí)也給了HTML表格布局致命一擊。最終，使用CSS布局來(lái)制作出類(lèi)似于table布局的柵格將會(huì)變得十分迅速和簡(jiǎn)單。

網(wǎng)頁(yè)元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會(huì)在該文中給大家演示這種方法給CSS布局帶來(lái)的巨大影響。

使用CSS表格

CSS表格能夠解決所有那些我們?cè)谑褂媒^對(duì)定位和浮動(dòng)定位進(jìn)行多列布局時(shí)所遇到的問(wèn)題。例如，“CSS display:table;”的CSS聲明能夠讓一個(gè)HTML元素和它的子節(jié)點(diǎn)像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個(gè)單元格的邊界、背景等樣式，而不會(huì)產(chǎn)生因?yàn)槭褂昧藅able那樣的制表標(biāo)簽所導(dǎo)致的語(yǔ)義化問(wèn)題。

在深入了解這種方法之前，讓我們先來(lái)寫(xiě)份HTML文檔實(shí)例：

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    3. 
  
  
  
  3. 
  
  
  
  4. lang="en-US"> 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. ?HTMLheadcontent…  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  
    10.
 
  •  
  •  
  • ?navigationcolumncontent…  
  •  
  •  
  • ?newsheadlinescolumncontent…  
  •  
  •  
  • ?mainarticlecontent…  
  •  
  •  
  •  
  •  
  •  

    • 這份HTML源代碼滿足了內(nèi)容呈現(xiàn)方面的要求。先是導(dǎo)航欄，然后是附加欄，***是內(nèi)容欄。我們同樣需要將以下CSS樣式應(yīng)用上去：

     
 
 
      
  
  
  
    1. #main{  
      2. 
  
  
  
    2. display:table;  
      3. 
  
  
  
    3. border-collapse:collapse;  
      4. 
  
  
  
    4. }  
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6. #nav{  
      7. 
  
  
  
    7. display:table-cell;  
      8. 
  
  
  
    8. width:180px;  
      9. 
  
  
  
    9. background-color:#e7dbcd;  
      10. 
  
  
  
    10. }  
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12. #extras{  
      13. 
  
  
  
    13. display:table-cell;  
      14. 
  
  
  
    14. width:180px;  
      15. 
  
  
  
    15. padding-left:10px;  
      16. 
  
  
  
    16. border-right:1pxdotted#d7ad7b;  
      17. 
  
  
  
    17. }  
      18. 
  
  
  
    18.  
      19. 
  
  
  
    19. #content{  
      20. 
  
  
  
    20. display:table-cell;  
      21. 
  
  
  
    21. width:380px;  
      22. 
  
  
  
    22. padding-left:10px;  
      23. 
  
  
  
    23. }  
      24. 
  
  
  
    24.  
      25.

     這種基于表格的新CSS布局方式能夠正確的在IE8、Firefox、Safari和Opera（譯者注：包括FF2/FF3/Google都通過(guò)了測(cè)試）中顯示出來(lái)。下面這張圖片是它在IE8中的樣子：

    我們輕松實(shí)現(xiàn)了三欄等高布局，而無(wú)需使用偽造背景圖片之類(lèi)的技巧，更不用擔(dān)心定位和清除浮動(dòng)的問(wèn)題！

    【編輯推薦】

    1. 使用CSS display:none時(shí)注意事項(xiàng)
    2. CSS display:inline和float:left兩者區(qū)別
    3. 深入探究DIV CSS布局中position屬性用法
    4. CSS屬性display:inline-block使用揭秘
    5. CSS display:block顯示布局錯(cuò)亂解決方案

    新聞名稱(chēng)：CSSdisplay:table屬性用法解析
    網(wǎng)站地址：http://www.dlmjj.cn/article/dpehdoj.html