盒模型，是xhtml+css
布局頁面中的核心！是關係到設計中排版定位的關鍵，都遵循盒模型規範，例如、、……盒模型包含
(外邊距)margin，(內邊距)padding ，(內容)content，(邊框)border。
下圖是css盒模型的示意圖
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而新增的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、等元素，但是也可以是小盒子（div巢狀），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而css盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在乙個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最後從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。
由「盒子」堆出來的網頁版面
傳統的前台網頁設計是這樣進行的：根據要求，先考慮好主色調，要用什麼型別的，用什麼字型、顏色等等，然後再用photoshop這類軟體自由的畫出來，最後再切成小圖，再不自由的通過設計html生成頁面，改用css排版後，我們要轉變這個思想，此時我們主要考慮的是頁面內容的語義和結構，因為乙個強css控制的網頁，等做好網頁後，你還可以輕鬆的調你想要的網頁風格，況且css排版的另外乙個目的是讓**易讀，區塊分明，強化**重用，所以結構很重要。如果你想說我的網頁設計的很複雜，到後來能不能實現那樣的效果？我要告訴你的是，如果用css實現不了的效果，一般用**也是很難實現的，因為css的控制能力實在是太強大了，順便說一點的是用css排版有乙個很實用的好處是，如果你是接單做**的，如果你用了css排版網頁，做到後來客戶有什麼不滿意，特別是色調的話，那麼改起來就相當容易，甚至你還可以定製幾種風格的css檔案供客戶選擇，又或者寫乙個程式實現動態呼叫，讓**具有動態改變風格的功能。
CSS 理解盒子模型
什麼是盒子模型？對於初學者來說，很難說出來，但是對於生活中的盒子大家熟悉吧，哈哈，這裡提到的盒子模型你就可以理解成現實生活中的盒子就可以了，不然怎麼能起個名字叫 盒子模型 呢 好！既然和現實生活中的盒子一樣，那我們想一下，生活中的盒子內部是不是空的好用來存放東西，而裡面存放東西的區域我們給他起個名字...
css 盒子模型理解
盒子模型是html css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面布局。下面是自己積累和總結的關於css盒子模型的知識 希望對初學者有用。一 css盒子模型概念 css css盒子模型 又稱框模型 box model 包含了元素內容 content 內邊距 padding 邊...
css 理解 盒子模型
什麼是css的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子 箱子 上來理解，日常生活中所見的盒子也具有這些屬性，所以叫...