CSS3 Box Model
簡介
所謂的方塊模型 (box model) 是流覽器排版的基本模型，在流覽器中每一個元件都使用這個模型來表示其佔據的版面空間。方塊模型分為四大區域，由內至外為：內容(content), 留白 (padding), 邊框 (border) 及 邊界 (margin) 四個區域，除了中央的內容區 (content) 為完整的區塊外，其它三個區域都以外框的形式存在，又各依上 (top)、右 (right)、下 (bottom)、左 (left) 四個方位，分成四個小區域。模型的各區域名稱及用途如下圖所示，特別注意背景色 (background color) 及背景圖片 (background image) 所佔的區域包含了留白的區域，因此將圖片設定為內容或背景時，兩者所會佔據的空間並不相同。
CSS 的屬性 box-sizing 用來設定方塊模型所要使用的模式。有二種模式可以設定：content-box 及 border-box；content-box 為流覽器的預設模型。
當 box-sizing 設定為 content-box 時，屬性 width 及 height 的值設定內容 (content) 區域的寬及高。整個元件所佔的空間為 width 及 height 的值，疊加四方的留白、邊框及邊界的寬度。
當 box-sizing 設定為 border-box 時，屬性 width 及 height 的值設定邊框 (border) 區域外圍的寬及高（包含邊框四方的寬度）。整個元件所佔的空間為 width 及 height 的值，加上四方邊界的寬度。
一般在排版時，會先考慮整體版面的寬度，因為寬度會受到螢幕大小的限制，所以會先決定元件的寬度、左右留白、及左右邊界。高度則因為可以延長，超過螢幕高度時，可以產生捲動軸 (scroll bar) 捲動螢幕查看超出螢幕的內容部份，上下留白及上下邊界的主要作用在區分垂直排列的元件，因此可以設定為 auto。除非是像一般的桌上型應用程式，所謂的單頁式 (one page design) 設計；版面的寛和高都以螢幕的寬和高為基準，只改變各區域的內容，此時比較有機會同時設定固定的寬度和高度。另一個要考慮的是元件是否具有邊框或背景顏色，不具邊框及背景顏色的元件其邊界和留白會連接在一起，在這種情況下同時設定邊界和留白，在視覺上很可能會造成左右相隣元件或上下相隣元件之間的間距過寬。
範例
範例中設定了一個背景為淡綠色的容器，內含兩個區塊，區塊的 width 和 height 都設定為 150px；四個方向的留白、邊框和邊界都為 10px；但 box-sizing 屬性的設定上，一個為 content-box，另一個為 border-box。當顯示在流覽器中時，可以明顯的看出兩個區塊在尺寸上的差異。box-sizing 設定為 content-box 的區塊（位於容器上方的區塊），所佔據的空間寬度和高度為 210px * 210px；而 box-sizing 設定為 border-box 的區塊（位於容器下方的區塊），所佔據的空間寬度和高度則只有 170px * 170px。
CSS
<style>
html {
width: 100%;
height: 100%;
}
body {
margin: 0 auto;
width: 1000px;
padding: 20px;
}
.container {
width: 400px;
height: 400px;
border: 10px solid black;
background-color: lightgreen;
}
.element {
width: 150px;
height: 150px;
margin: 10px;
border: 10px solid gray;
padding: 10px;
background-color: coral;
}
.content {
box-sizing: content-box;
}
.border {
box-sizing: border-box;
}
</style>
在 CSS 中，使用 CSS 類別的方式來設定元件的屬性。.element{} 設定了兩個元件在 width, height, margin, border, padding 等屬性都具有相同的值，而 .content{} 及 .border{} 則為 box-sizing 設定了不同的值，藉以比較不同的設定在所佔空間上的差異。
HTML
<body>
content-box
border-box
</body>
HTML 中簡單的建立了三個區塊，其中一個為容器，包含在容器中的為兩個元件區塊。
沒有留言:
張貼留言