2. 程式人生 > >CSS display:table屬性用法解析

CSS display:table屬性用法解析

阿新 • • 發佈：2019-01-17
    本節和大家重點討論一下CSS display:table的使用，當IE8釋出時，它將支援很多新的CSS display屬性值，包括與表格相關的屬性值，CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。


    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表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。例如，“CSS display:table;”的CSS宣告能夠讓一個HTML元素和它的子節點像table元素一樣。使用基於表格的CSS佈局，使我們能夠輕鬆定義一個單元格的邊界、背景等樣式，而不會產生因為使用了table那樣的製表標籤所導致的語義化問題。


    

在深入瞭解這種方法之前，讓我們先來寫份HTML文件例項：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. lang="en-US">
  4. <head>
  5. ?HTMLheadcontent…  
  6. </head>
  7. <body>
  8. <dividdivid="wrapper">
  9. <dividdivid="header"></div>
  10. <dividdivid="main">
  11. <dividdivid="nav">
  12. ?navigationcolumncontent…  
  13. </div>
  14. <dividdivid="extras">
  15. ?newsheadlinescolumncontent…  
  16. </div>
  17. <dividdivid="content">
  18. ?mainarticlecontent…  
  19. </div>
  20. </div>
  21. </div>
  22. </body>
  23. </html>

這份HTML原始碼滿足了內容呈現方面的要求。先是導航欄，然後是附加欄，最後是內容欄。我們同樣需要將以下CSS樣式應用上去：

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

這種基於表格的新CSS佈局方式能夠正確的在IE8、Firefox、Safari和Opera（北京電腦維修注：包括FF2/FF3/Google都通過了測試）中顯示出來。下面這張圖片是它在IE8中的樣子：

我們輕鬆實現了三欄等高佈局，而無需使用偽造背景圖片之類的技巧，更不用擔心定位和清除浮動的問題！

相關推薦

CSS display:table屬性用法解析

    本節和大家重點討論一下CSS display:table的使用，當IE8釋出時，它將支援很多新的CSS display屬性值，包括與表格相關的屬性值，CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。     CSS display:

html+css:display:flex屬性

Flex 佈局教程：語法篇 原部落格地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 網頁佈局（layout）是CSS的一個重點應用。 佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 +&

display table 標籤用法 對分頁和匯出excel有幫助

在web.xml下新增一個filter   <filter>     <filter-name>exportFilter</filter-name>     <filter-class>org.displaytag.filter.ResponseOverride

CSS display屬性用法

display：此屬性用於定義建立佈局時元素生成的顯示框型別。 display屬性的取值及意義： 值 描述 none 此元素不會被顯示。 block 此元素將顯示為

CSS 中 display 的 table 屬性

table    此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。 table-row-group    此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。

CSS屬性display:table的表格佈局的使用

專案改造中遇到DIV+CSS實現的table，新需求需要在表格使用單元格合併，網上調查返現CSS display:table實現的table表格，沒有單元格的屬性和樣式，經過一番思考，曲折現實了單元格的合併，即採用正行巢狀一個單獨的display:table的DIV，然後

CSS Display屬性與盒模型

鏈接 依據 使用 dem align ont 情況 rac rgb 由於HTML流式文檔的特性，頁面布局往往是新手最為頭疼的問題之中的一個。 每一個HTML元素都會渲染為一個Box，可分為inline Box和block Box。 依據display屬性的不同。Box

CSS學習筆記05 CSS display屬性

嵌套 img ges htm 現在 inline 內聯元素 itl 註意 HTML標記一般分為塊標記和行內標記兩種類型，它們也稱塊元素和行內元素。 塊元素 每個塊元素通常都會獨自占據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用於網頁布局和網頁結構的搭建。並且

<display:table>常用屬性解釋

添加 tex 20px rip style屬性 wid 引用 jsp頁面 sce 1、官方網址：http://www.displaytag.org/1.2/displaytag/tagreference.html 2、應用舉例：<display:table name=

css標簽屬性及用法

靜態 奇數 放大 顏色 出現 type nor 註意 visit css標簽及屬性 HTML引入CSS的方法 1.嵌入式 <style type = “text/css”>要寫的樣式</style> 2.外聯式 <link rel =

display,float,position的關系以及display=table,table-row,table-cell等屬性的使用

cin item style 不為 排列 con 渲染 cell position 1.先說display,float,position的關系display如果為none，float和position都失效；display不為空的時候，如果position為absolute

CSS display 屬性詳解

body pos strong color copy 基本上 attribute -h 覆蓋 display的所有屬性 {/* CSS 1 */ display: none; display: inline; display: block; display: list-it

CSS 屬性用法備忘錄

style span add 順時針 AR css 屬性 padding class ☆ margin: 0; padding: 0; :{ 順時針 margin-top: 0px; margin-right: 0px;

Css中display:inline-block用法詳解

display:block就是將元素顯示為塊級元素 block元素的特點是： 總是在新行上開始； 高度，行高以及頂和底邊距都可控制； 寬度預設是它的容器的100%，除非設定一個寬度 <div>, <p>, <h1>, <form>,

css display:box 佈局 css display:box 新屬性

css display:box 新屬性   一、display:box; 　　在元素上設定該屬性，可使其子代排列在同一水平上，類似display:inline-block;。 二、可在其子代設定如下屬性 　　前提：使用如下屬性，必須在父代設定display:

CSS Note 1.7 table屬性及列表屬性

一、html  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <

css3屬性box-sizing:border-box 用法解析及經常使用的場景

響應式Web設計經常需要我們通過百分比設定元件寬度。如果我們不考慮邊框，那麼很容易就可以實現，但如果你給每一列以及總寬度都採用百分比設定，那這個時候固定的邊框大小就會出來搗亂。下面我們將看到一組方法去解決這個問題，你會學到如何建立一個流式佈局，而不用擔心額外的邊框以及內邊距。

css display和vertical-align 屬性

display                                          

web前端練習5----css 的 display: flex 屬性

display:flex 是一種佈局方式。它即可以應用於容器中，也可以應用於行內元素。是W3C提出的一種新的方案，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援。 Flex是Flexible Box的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性

css關於position屬性的用法（絕對定位和相對定位的混淆）

挺久沒用，有點忘了關於position這個屬性的用法，導致在練手的時候又犯了跟最開始新手才會犯的錯誤，那就是absolute和relative的用法。 在此首先看一下官方對這兩個屬性值的解釋： position 屬性值的含義： static元素框正常生成。塊級元素