css的盒模型由content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)組成。但盒子的大小由content+padding+border這幾部分決定，把margin算進去的那是盒子佔據的位置，而不是盒子的大小！
通過**來對其進行理解，更直觀。
示例一：
示例一css盒模型示意圖
示例一效果
盒子大小就是content的大小200px*200px。
示例二：
示例二css盒模型示意圖
示例二效果
盒子的長寬變成了240x240，顯然，padding是能夠改變盒子的大小的，這時盒子大小就等於content+padding。
示例三：
示例三css盒模型示意圖
示例三效果圖
盒子的長寬變成了260x260，所以這時盒子大小就等於content+padding+border。
示例四：
示例四css盒模型示意圖
示例四效果圖
盒子的長寬仍為260x260，即盒子的大小並未發生變化。
實際示例四效果圖
可以看到，盒子的底部產生了10px的空白。
所以說，盒子的大小為content+padding+border即內容的(width)+內邊距的再加上邊框，而不加上margin。很多時候，我們會錯誤地把margin算入，若那樣的話，上面這種情形盒子的大小應該是260x270，但實際情況並不是這樣的。
我們可以試著給上面的粉色方塊設定box-sizing屬性為border-box發現，會發現：無論我們怎麼改border和padding盒子大小始終是定義的width和height。如下
.刪格盒模型設計
1.容器兩邊具有15px的padding 2.行 兩邊具有 15px的margin 3.列 兩邊具有15的padding 目的 為了維護槽寬的規則，列兩邊必須得要15px的padding。如圖下所示 一行中有兩列，沒列的兩邊都有15px的槽寬。目的 為了使列巢狀行，行兩邊必須要有 15px的marg...
CSS 《CSS揭秘》第四章 視覺效果
單側投影 box shadow 0px 10px 10px 5px black 鄰邊投影 box shadow 10px 10px 10px 2px black 雙側投影box shadow 10px 0px 10px 10px black,10px 0px 10px 10px black box ...
用模型取代字典 實現九宮格介面
一般情況下，設定資料和取出資料都使用 字串型別的key 編寫這些key時，編譯器不會有任何友善提示，需要手敲 dict name jack nsstring name dict name 手敲字串key，key容易寫錯 key如果寫錯了，編譯器不會有任何警告和報錯，造成設錯資料或者取錯資料 使用模型...