盒子模型是html+css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面布局。下面是自己積累和總結的關於css盒子模型的知識^_^，希望對初學者有用。
一、css盒子模型概念
css css盒子模型 又稱框模型 (box model) ，包含了元素內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)幾個要素。如圖：
圖中最內部的框是元素的實際內容，也就是元素框，緊挨著元素框外部的是內邊距padding，其次是邊框(border)，然後最外層是外邊距(margin)，整個構成了框模型。通常我們設定的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋周邊的其他元素。
那麼，元素框的總寬度 = 元素(element)的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；
元素框的總高度 = 元素(element)的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度。
二、css 外邊距合併(疊加)
兩個上下方向相鄰的元素框垂直相遇時，外邊距會合併，合併後的外邊距的高度等於兩個發生合併的外邊距中較高的那個邊距值，如圖：
比較容易理解，所以在頁面中有時候遇到實際情況是需要考慮這個因素的。當然外邊距合併其實也有存在的意義，如下圖：
需要注意的是：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。
css reset 中也會經常用到
*.parent : before.child{width:200px;height:200px;background-color:green;margin-top:50px;
簡述對css盒子模型的理解 CSS盒子模型
我們先來寫一段 我是div block元素 我是span inline元素 我是span inline元素 我是span inline元素 我是span inline元素 由於div是塊狀元素 block element span是行內元素 inline element 行內元素特徵 1 設定寬高無...
對css中盒子模型的理解
html文件中的每乙個元素在頁面布局中都會被呈現為乙個盒子模型，如下圖所示 width和height屬性用來設定內容區域的寬和高，height屬性在預設情況下和內容框的高度相同，也就是隨內容多少的變化而變化。padding為盒子模型的內邊距寬度，也就是內容到邊界 border 直接的距離。borde...
CSS 理解盒子模型
什麼是盒子模型？對於初學者來說，很難說出來，但是對於生活中的盒子大家熟悉吧，哈哈，這裡提到的盒子模型你就可以理解成現實生活中的盒子就可以了，不然怎麼能起個名字叫 盒子模型 呢 好！既然和現實生活中的盒子一樣，那我們想一下，生活中的盒子內部是不是空的好用來存放東西，而裡面存放東西的區域我們給他起個名字...