box

CSS的部分講了四篇，都還在基本概念和 HTML的元素選擇器上，今天終於要正式講到樣式本身的基礎- box 盒模形。 網頁設計和平面設計最大的差異之一就在元素的空間組成上，平面設計時頁面上的元素是用線條、區塊、形狀、顏色來區分不同的元素，同時元素間可能沒有明顯的邊界，但是在網頁設計的”頁面”中設計師其實是在針對 HTML裡的元素像是標題 <h1>、區隔 <div>、影像 <img>等等元素設計不同的造型，然而這些元素在頁面中佔有的空間 “全部都是矩形”。 沒錯! 全~~部~~ 都是矩形，不管是標題、錨點或是影像，在瀏覽器眼中就像一個個的用HTML <tag> </tag>包起來的箱子box 堆在頁面中，而且常常是一個包一包，盒子裡面還有盒子，這些盒子會依網頁設計者指定的寬高形成一個個不同長寬的矩形空間。 所幸是網頁設計也有圖層的概念，可以讓這些矩形元素有不同的位置變化，但是不管你眼睛看到什麼造型，實際上他們在瀏覽器眼中「全部都是矩形」，只不過這個矩形有不同的長寬、顏色、邊界、內外間距、背景甚致還給你圖層可用。見下圖： 這張圖展示的是任何元素都有的共通的空間性質，每一個元素都具有自己的長寬等上述屬性來確定本身在頁面中佔了多少空間。