盒模型包括margin、border、padding、content四個部分，主要的設定屬性是margin、border、padding。
盒子模型又分為兩種w3c和ie盒子。
w3c的元素寬度=content的寬度
ie的元素寬度=content+padding+border
margin是為了讓兩個盒子（同級的盒子）之間，產生一定距離。或者是讓盒子的周圍產生間距。
margin有以下幾個特點：
是長在盒子外圍的。
控制當前元素 與 其他同級元素的位置關係。
不會改變盒子內部的大小。
是可以設定負值的。
margin可以設定1~4個值：
乙個值：四個方向的大小；
兩個值：第乙個是上下邊距，第二個是左右邊距；
三個值：第乙個是上邊距，第二個上左右邊距，第三個是下邊距；
四個值：從第乙個值開始按上右下左的順時針順序，設定四個邊距。
margin能分別設定四個方向的值：margin-top、margin-right、margin-bottom、margin-left。並且可以為負值。
padding是為了讓盒子和文字之間產生間距，或者是新增空白空間。
padding的特點：
padding是長在 內容 和 盒子之間的距離。
主要控制子元素在盒子內部的位置關係。
是新增在父元素上面。
padding可以把盒子撐大！
padding不會對背景圖的位置造成影響。
padding的值和margin的設定方法差不多，不同的是padding不能設定負值。
邊框就好理解了就是盒子的殼。
邊框不用來做布局，在頁面渲染時用來做樣式。
盒模型就是用來做容器，為了把內容打包和整理，為了不讓頁面顯得雜亂無章。乙個好的包裝能夠給使用者不一樣地體驗。並且如果沒有好的包裝，再好的內容也不會也看下去的慾望。這就像乙個乾淨整潔的桌面和堆滿雜物的桌面給人的觀感效果。
所以，合理靈活的應用好盒模型是前端的必要基礎！！！
簡述對css盒子模型的理解 CSS盒子模型
我們先來寫一段 我是div block元素 我是span inline元素 我是span inline元素 我是span inline元素 我是span inline元素 由於div是塊狀元素 block element span是行內元素 inline element 行內元素特徵 1 設定寬高無...
簡述對css盒子模型的理解 css 盒子模型理解
盒子模型是html css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面布局。下面是自己積累和總結的關於css盒子模型的知識 希望對初學者有用。一 css盒子模型概念 css css盒子模型 又稱框模型 box model 包含了元素內容 content 內邊距 padding 邊...
盒子模型理解
今天分享一下關於盒子模型的一些理解。在我看來盒子模型是一種為了方便程式設計師布局而定下的一種標準，在空間上規定乙個元素。content 內容區域，width和height就是給他的。padding 內邊距，因為在border內就叫他內邊距 這是我胡說的！與content無關，但background屬...