CSS DIV 區塊標籤的使用教學

傳統在 HTML 上排板都是採用表格（table）的方式，但是用表格排板會衍伸出許多的缺點，例如表格的架構必須等整個 table 完整下載後，才能順利呈現，如果表格內的東西相當多（例如圖檔或影片檔）的時候，就可以感覺到網頁開啟速度較慢，另外是 Table 的標籤過多，一方面整理起來比較花時間，另一方面是搜尋引擎比較不容易看懂你的程式碼。現在新一代的設計採用 CSS + DIV 的排板方式，取代傳統的 table 排板，並解決舊有的問題，提升網頁開起速度，這篇就是要告訴你如何使用 DIV 標籤。

DIV 可以解釋為區塊，用 DIV 標籤包起來的東西，瀏覽器會視為一個物件，大致長成這樣 <div>內容</div>，你可以用 div 將網頁內容的各區塊包起來，再去做 CSS 排板，目前所有的主流瀏覽器都支援 DIV 標籤。

透過 CSS +DIV 排板的網頁架構範例

<body>
　<h1>這裡是網頁標題</h1>
　<div>這裡是網頁第一個區塊的內容</div>
　<div>這裡是網頁第二個區塊的內容</div>
　...
</doby>

每個 DIV 包起來的區塊裡面還可以使用其它的規劃，例如 h2、h3、小區塊（一樣使用 div 標籤）或 span 標籤等。

每個區塊都可以使用 id 在外部寫 CSS 的語法，像這樣 <div id="content">這裡是網頁區塊內容</div> 或者直接寫 style 進去，像這樣 <div style="font-size:13px;">這裡是網頁區塊內容</div>。

DIV 標籤在瀏覽器中是一個獨立的區塊，會獨自佔用一行，如果你使用了兩個 div 區塊，類似上方範例這樣，則兩個 div 區塊會呈現為由上往下排列，與 span 標籤可以由左而右排列不同，這個原因是瀏覽器自動為每個 div 結尾後面加上換行的動作。

要讓 DIV 由左至右排列，可以使用 float（浮動）語法來達成。

延伸閱讀