ch3128

HTML 中使用 CSS 來定義樣式、 版面配置, 近年又重新回到主流.

說到使用 CSS 來作為網頁版面配置, 就不得不介紹一下 DIV 這個 Tag(標籤). 除了 DIV Tag, 順便也介紹一下 SPAN 標籤.

在網路上搜尋到一個蠻清楚的定義， 可供參考如下，

The <div> tag defines a division/section in a document.

Browsers usually place a line break before and after the div element. 


Use the <div> tag to group block-elements to format them with styles.

The <span> tag is used to group inline-elements in a document.  


Use the <span> tag to group inline-elements to format them with styles 

來源:www.w3schools.com

在 W3C 的定義中， DIV 是屬於 block-level(區塊) elements， SPAN 是 inline(行內，Text level) elements.

舉個簡單的例子， 網頁中的文字內容就是屬於 inline(行內) elements。 而 block-level(區塊) elements 則可以把文字、表格、圖層、影像檔案..等內容 Group 起來。 例如一般文字或表格預設是向左靠齊， 若使用 DIV 標籤將一個段落與表格 Group 起來成為一個 block， 則改變 DIV 標籤的 Align(對齊)屬性為向右靠齊， 該文字段落與表格都會同時變成向右靠齊。 因為它們現在屬於同一個block (區塊)。