CSS盒子模式組成及用法解析
這里和大家分享一下CSS盒子模式定義及盒子概念理解，CSS盒子模式中內容(content)、填充(padding)、邊框(border)、邊界(margin)等這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它CSS盒子模式。
CSS盒子模式定義及盒子概念理解
什么是CSS盒子模式呢？為什么叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
CSS盒子模式
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它CSS盒子模式。那么內容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。
在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實生活中盒子不同的是，現(xiàn)實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子模式具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。
填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現(xiàn)實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最后從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。
【編輯推薦】
- Chroma屬性實現(xiàn)CSS濾鏡透明效果
- CSS Sprites圖片切割術與圖片優(yōu)化
- CSS中DIV彈出層問題解決方案
- CSS規(guī)范化命名通用命名規(guī)則
- CSS分欄布局的兩種方法：絕對定位和浮動
