css學習4

css盒子模型

CSS css盒子模型 又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：

圖中最內部的框是元素的實際內容，也就是元素框，緊挨着元素框外部的是內邊距padding，其次是邊框（border），而後最外層是外邊距（margin），整個構成了框模型。一般咱們設置的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋周邊的其餘元素，是左右兩邊的留白。

那麼，元素框的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；

元素框的總高度 = 元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度。

理解盒子模型，有助於咱們的頁面的佈局

對於給盒子加background-color  或background-image時將填充border之內 的區域