溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關(guān)CSS中display:table屬性如何使用，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
CSS display:table屬性
當IE8發(fā)布時，它將支持很多新的CSS display屬性值，包括與表格相關(guān)的屬性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，它也是***一款支持這些屬性值的主流瀏覽器。它標志著復雜CSS布局技術(shù)的結(jié)束，同時也給了HTML表格布局致命一擊。最終，使用CSS布局來制作出類似于table布局的柵格將會變得十分迅速和簡單。
網(wǎng)頁元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。
使用CSS表格
CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。例如，“CSS display:table;”的CSS聲明能夠讓一個HTML元素和它的子節(jié)點像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產(chǎn)生因為使用了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源代碼滿足了內(nèi)容呈現(xiàn)方面的要求。先是導航欄，然后是附加欄，***是內(nèi)容欄。我們同樣需要將以下CSS樣式應(yīng)用上去：
#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; }以上就是CSS中display:table屬性如何使用，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼