溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS的display:table屬性怎么使用”，在日常操作中，相信很多人在CSS的display:table屬性怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS的display:table屬性怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
CSS display:table屬性
當IE8發布時，它將支持很多新的CSS display屬性值，包括與表格相關的屬性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，它也是***一款支持這些屬性值的主流瀏覽器。它標志著復雜CSS布局技術的結束，同時也給了HTML表格布局致命一擊。最終，使用CSS布局來制作出類似于table布局的柵格將會變得十分迅速和簡單。
網頁元素應用上那些與表格相關的display屬性值后，能夠模仿出與表格相同的特性。
使用CSS表格
CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。例如，“CSS display:table;”的CSS聲明能夠讓一個HTML元素和它的子節點像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產生因為使用了table那樣的制表標簽所導致的語義化問題。
在深入了解這種方法之前，讓我們先來寫份HTML文檔實例：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns=http://www.w3.org/1999/xhtmllang="en-US"> <head> ?HTMLheadcontent… </head> <body> <dividdivid="wrapper"> <dividdivid="header"> </div> <dividdivid="main"> <dividdivid="nav"> ?navigationcolumncontent… </div> <dividdivid="extras"> ?newsheadlinescolumncontent… </div> <dividdivid="content"> ?mainarticlecontent… </div> </div> </div> </body> </html>
這份HTML源代碼滿足了內容呈現方面的要求。先是導航欄，然后是附加欄，***是內容欄。我們同樣需要將以下CSS樣式應用上去：
#main{
display:table;
border-collapse:collapse;
}
#nav{
display:table-cell;
width:180px;
background-color:#e7dbcd;
}
#extras{
display:table-cell;
width:180px;
padding-left:10px;
border-right:1pxdotted#d7ad7b;
}
#content{
display:table-cell;
width:380px;
padding-left:10px;
}1.行內樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。
2.內嵌樣式，就是將CSS代碼寫在之間，并且用進行聲明。
3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上就可以了。其次就是導入樣式，導入樣式和鏈接樣式比較相似，采用@import樣式導入CSS樣式表，不建議使用。
到此，關于“CSS的display:table屬性怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
