中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

它是怎樣實現(xiàn)的？

你可以給HTML元素指定與表格相關(guān)的display屬性值，使得它們像表格元素那樣渲染。以下是這些可用的display屬性值：

• table
  使該元素按table樣式渲染
• table-row
  使該元素按tr樣式渲染
• table-cell
  使該元素按td樣式渲染
• table-row-group
  使該元素按tbody樣式渲染
• table-header-group
  使該元素按thead樣式渲染
• table-footer-group
  使該元素按tfoot樣式渲染
• table-caption
  使該元素按caption樣式渲染
• table-column
  使該元素按col樣式渲染
• table-column-group
  使該元素按colgroup樣式渲染

等等……難道用table布局不是錯的嗎？

可能你會對我們上面給出的布局實例有點不爽——畢竟，正如我自己也是一名WEB標準化的擁護者，我們不都一直堅持不應該使用table來進行布局嗎？
table元素在HTML當中是一個包含語義的標簽：它描述什么是數(shù)據(jù)。因此，你只能用它來標記那些需要制表的數(shù)據(jù)，例如一張財務信息表。如果數(shù)據(jù)能夠以電子表格的形式保存在你的電腦中，那它在HTML文檔中很可能需要用到table標簽進行標記。
從另一方面來看，display的table屬性值只是聲明了某些元素在瀏覽器中的樣式——它不包含語義。如果使用table元素來進行布局，它將會告訴客戶端：這些數(shù)據(jù)是制表的。使用一些display屬性被設置為table和table-cell之類的div標簽，除了告訴客戶端以某種特定的樣式來渲染它們以外，不會告訴客戶端任何語義，只要客戶端能夠支持這些屬性值。
當然，我們同樣還要注意，當我們真的需要制表數(shù)據(jù)的時候不要使用一大堆被聲明為display:table;的div元素。
我們上面的那個例子是一個簡單的單行三列布局，無需費盡心思，我們就能夠使用這種技術(shù)輕松實現(xiàn)復雜的柵格布局。

匿名表格元素

CSS表格除了包含table布局的普通規(guī)則之外，同時還有著CSS table布局的超強特性：缺少的表格元素會被瀏覽器以匿名方式創(chuàng)建。CSS2.1規(guī)范中寫道：

CSS2.1表格模型中的元素，可能不會全部包含在除HTML之外的文檔語言中。這時，那些“丟失”的元素會被模擬出來，從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table對象，使其符合table/inline-table、table-row、table-cell的三層嵌套關(guān)系。

這段話的意思是，如果我們?yōu)樵�素使用“display:table-cell;”屬性，而不將其父容器設置為“display:table-row;”屬性，瀏覽器會默認創(chuàng)建出一個表格行，就好像文檔中真的存在一個被聲明的表格行一樣。
讓我們用個簡單的例子來研究下它的這一特性：以下是三欄柵格布局。我們將會用三份不同的HTML樣例，而它們將表現(xiàn)出相同的視覺效果。

首先，以下是能夠生成三列布局樣例的其中一份：

<div class="container">
  <div class="row">
    <div class="cell">CELL A</div>
    <div class="cell">CELL B</div>
    <div class="cell">CELL C</div>
  </div>
</div>

這份嵌套的div元素看起來不是那么讓人興奮，稍等一會，我們現(xiàn)在來做點什么。它的CSS樣式也非常簡單：

.container {
  display: table;
}
 
.row {
  display: table-row;
}
 
.cell {
  display: table-cell;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  padding: 1em;
}

以上CSS給類名為container的元素定義了“display:table;”屬性，類名為row的元素定義了“display:table-row;”，類名為cell的元素定義了“display:table-cell;”，同樣還給它定義了邊框、高度和寬度值。
以上HTML文檔明確地為三個單元格定義了包含它的表格和表格行，使用到了所有我們創(chuàng)建的CSS類名。然而，我們可以減少這些標簽，移除一行div元素試試：

<div class="row">
  <div class="cell">CELL A</div>
  <div class="cell">CELL B</div>
  <div class="cell">CELL C</div>
</div>

即使上面的代碼遺漏了聲明表格的那一行，瀏覽器仍將創(chuàng)建一個匿名的表格行。我們還可以移除更多的代碼：

<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>

以上代碼遺漏了聲明表格和表格行的代碼，瀏覽器同樣會創(chuàng)建出這些匿名的盒對象。即使缺少這些標簽元素，最終的效果仍然是一樣的。

出處：Alipay UED
責任編輯：moby

上一頁 基于display:table的CSS布局 [1] 下一頁 基于display:table的CSS布局 [3]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。