本篇文章要給大家講的算是比較重點的內容了，css盒模型。理解了它對你以後頁面的排版和佈局有著非常關鍵的作用。
什麼是css盒模型？
css盒子模型 又稱框模型 （Box Model） ，它包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。下圖就為我們標準的盒模型示意圖。
css盒模型進階練習
1）我們來看下邊的一個例子。
建立一個div，div的寬度為200px，高度為200px，內填充為50px，邊框為1px紅色。
上圖中最內部的框是元素的實際內容，也就是元素框，緊挨著元素框外部的是內邊距padding，其次是邊框（border），然後最外層是外邊距（margin），整個構成了框模型。通常我們設定的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是不算到盒子的總寬度的，它是用來將兩個元素（盒子）隔開一定的距離。
那麼，div盒子的實際佔據寬度 = 元素（div）的width + padding的左邊距和右邊距的值 + border的左右寬度；（302px）
div盒子的實際佔據高度 = 元素（div）的height + padding的上下邊距的值 ＋ border的上下寬度。（302px）
2）我們再寫一個例子。
建立一個div，div的寬度為200px，高度為150px，背景顏色為#ccc，上填充為10px、右填充30px、下填充40px、左填充20px，上邊框5px紅色、右邊框5px綠色、下邊框5px黃色、左邊框5px藍色。那麼我們的程式碼以及顯示效果就如下圖所示：
由上圖我們可以看出來，div盒子的實際佔據寬度 = 元素（div）的width（200px） + padding的左邊距和右邊距的值（20px+30px） + border的左右寬度（5px+5px）；（260px）
div盒子的實際佔據高度 = 元素（div）的height（150px） + padding的上下邊距的值（10px+40px） ＋ border的上下寬度（5px+5px）。（210px）
對於css的盒模型今天就先介紹到這裡，大家在平時可以自己多加練習練習，自己能算清楚某個元素實際佔據多少的寬度。
每日金句：
所有的努力，不是為了讓別人覺得你了不起，而是為了能讓自己打心裡看得起自己。
喜歡我的文章的小夥伴記得關注一下哦，每天將為你更新最新知識。
