一、什麼是CSS盒模型？
CSS盒模型又稱CSS框模型，它規定了元素框處理元素內容、內邊距、邊框、和外邊距的方式。
元素框的最內部分是實際內容，直接包圍在內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其後的任何元素。
內邊距、外邊距和邊框都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置爲零來覆蓋這些瀏覽器樣式。
二、盒模型–邊框（border）：邊框涉及到三個點，分別是邊框的粗細、樣式、顏色。
如border: 2px solid red，意思爲粗細爲2px，樣式爲實線，顏色爲紅色。
關於border的屬性：
三、盒模型–填充（padding）：設置元素與邊框之間的距離，叫做填充。
padding 定義元素邊框與元素內容之間的空白區域。可以設置長度值和百分比值，但是不允許使用負值。
padding也分四部分：上、下、左、右。這四個屬性可以連寫也可以分別設置。
td {
padding: 20px 10px 50px 50px;
}
上、下、左、右四個元素分開寫：
td {
padding-top: 50px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 50px;
}
四、盒模型–邊界：元素之間的距離就是邊界，也就是外邊框，用margin設置。
margin也分爲四部分，即上右下左（margin-top/margin-right/margin-bottom/margin-left）。
同樣margin的四部分也可以連寫。
p {
margin: 20px 50px 60px 30px;
}
上、下、左、右四個元素分開寫：**
p {
margin-top: 20px;
margin-left: 30px;
margin-bottom: 60px;
margin-right: 50px;
}
最後，給大家推薦一個前端學習進階內推交流羣685910553（前端資料分享），不管你在地球哪個方位，
不管你參加工作幾年都歡迎你的入駐！（羣內會定期免費提供一些羣主收藏的免費學習書籍資料以及整理好的面試題和答案文檔！）
如果您對這個文章有任何異議，那麼請在文章評論處寫上你的評論。
如果您覺得這個文章有意思，那麼請分享並轉發，或者也可以關注一下表示您對我們文章的認可與鼓勵。