3- 版面配置 ~ 關於 盒子模型

Box Model（區塊模型）

關於 CSS 盒子模型

CSS盒子模型本質上是一個包裝每個HTML元素的框。 它包括：邊距，邊框，內距和實際內容。

內容 - 顯示文本和圖像的框、內容
內距 - 清除內容周圍的區域。 內距是透明的
邊框 - 圍繞內距和內容的邊框
邊距 - 圍繞邊框周圍的區域。 邊距是透明的

當你設定了元素的長度和寬度後，實際顯示的元素卻比你設定的還大：Why ? 因為元素的框線（border）和內距（padding）是外加上去的，會撐開元素。
看下面的例子，我們設定了兩個都擁有相同寬度和高度的樣式，但最後元素顯示的實際大小卻不太一樣。

.Box1 {
width: 500px;
height: 150px;
margin: 20px auto;
background:#ffe;
}

.Box2 {
width: 500px;
height: 150px;
margin: 20px auto;
padding: 30px;
border:solid #33ccff 20px;
}

Box1

寬度 500px，高度 150px

Box2 + 框線（20px）+ 內距 (30px)

寬度 = 600px，高度 = 250px

每次排版佈置要設定每一個盒子區塊元素的寬高時，都要做計算加加減減，是不是很麻煩? 謝天謝地，現在 CSS 出現一個新的屬性.box-sizing，你不需要再這麼做了， 當元素設定成 box-sizing: border-box;之後， 框線和內距將變成內含，自此你只要設定好物件的邊界寬高，不用再考慮框線和內距。

限制最大和最小值

max-width屬性 ，min-width屬性

max-height屬性 ，min-height屬性

限制最大值、可以防止元素、圖片(img) 溢出版面，在我的格子裡的留言輸入方塊裡， 就使用了最大值和最小值約制寬度，最小值約制高度，你可以拉拉左下角，看它的伸縮 狀況如何，再去看看你的或別人的有何差異 ?

Reset CSS – 重置歸零

使用 CSS 最令人頭痛的部份就是各家瀏覽器的預設值差異性太多了，在排版的時候就得依每個瀏覽器的不同，而多花好多時間來調整改寫 CSS 語法。只要在我們寫的 CSS 前掛上這一段「Reset CSS」的語法，就可以輕鬆解決大部份瀏覽器的差異了。

*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}

table {
border-collapse: collapse;
border-spacing: 0;
}