css盒子模型原理：
CSS中， Box Model叫盒子模型（或框模型），Box Model規定了元素內容（element content）、內邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。在HTML文檔中，每個元素都有盒子模型，所以說在Web世界里（特別是頁面布局），Box Model無處不在。下面是Box Model的圖示：
理解css盒子模型：
可以把它當成日常中的一個盒子去理解。content就是盒子里裝的東西，它有高度（height）和寬度（width）,可以是圖片，可以是文字或者小盒子嵌套，在現實中，內容不能大於盒子，內容大於盒子就會撐破盒子，但在css中，盒子有彈性的，頂多內容太大就會撐大盒子，但是不會損害盒子。padding即是填充，就好像我們為了保證盒子里的東西不損壞，填充了一些東西，比如泡沫或者塑料薄膜，填充物有大有小，有軟有硬，反應在網頁中就是padding的大小了。而再外一層就是border邊框，因為邊框有大小和顏色的屬性，相當於盒子的厚度和它的顏色或者材料。margin外邊距，就是我們的盒子與其他的盒子或者其他東西的距離。假如有很多盒子，margin就是盒子堆碼直接的距離，可以通風，也美觀同時方便取出。
我們理解了盒子模型，有助於我們了解一個元素的最終尺寸是怎么樣決定的，同時也幫助我們理解元素在網頁上是如何定位的，而盒子模型主要適用於塊級元素。
css盒子尺寸的計算：
我們通過給高寬賦值，來定義content(內容)的高度和寬度。如果沒有做任何聲明，那么高度和寬度的默認值將是自動(auto)。即在css中給一個塊級元素的width和height屬性賦值時比如div{width ：200px; height: 200px}時，其中的width 和height只是對content部分設置的，即上圖中content區域的長和寬。而不是內容，內邊距，邊框的總和（但在IE的早期版本包括IE6中，盒子模型的width和height卻是內容+內邊距+邊框的總和，盡管符合人們思考的邏輯習慣，但是不符合規范，造成了很多兼容性問題。）
包含塊注釋
包含塊（Containing Block）是視覺格式化模型的一個重要概念，它與框模型類似，也可以理解為一個矩形，而這個矩形的作用是為它里面包含的元素提供一個參考，元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的。
如代碼所示，div和table都是包含塊，可以說div是table的包含塊，也可以說table是div的包含塊，這不是絕對的。
- 用戶代理（比如瀏覽器）選擇根元素作為 containing block（稱之為初始 containing block）。
- 對於其它元素，除非元素使用的是絕對位置，containing block 由最近的塊級祖先元素盒子的內容邊界組成。
- 如果元素有屬性 'position:fixed'，containing block 由視口建立。
- 如果元素有屬性 'position:absolute'，containing block 由最近的 position 不是 static 的祖先建立，按下面的步驟：
- 如果祖先是塊級元素，containing block 由祖先的 padding edge 形成。
- 如果祖先是內聯元素，containing block 取決於祖先的 direction 屬性。
- 如果 direction 是 ltr（左到右），祖先產生的第一個盒子的上、左內容邊界是 containing block 的上方和左方，祖先的最后一個盒子的下、右內容邊界是 containing block 的下方和右方。
- 如果 direction 是 rtl（右到左），祖先產生的第一個盒子的上、右內容邊界是 containing block 的上方和右方，祖先的最后一個盒子的下、左內容邊界是 containing block 的下方和左方。
如果沒有祖先，根元素盒子的內容邊界確定為 containing block。今天主要講解css盒子模型，包含塊另外寫貼咯。
對寬度為自動狀態的靜態定位元素（即無定位），和相對定位元素來說，計算寬度的方法是，將他們包含塊（containing block）的寬度減去此元素的橫向的所有外邊距，內邊距，邊框，滾動條。也就是說，從包含塊的寬度中除去元素的橫向外邊距，內邊距，邊框，滾動條（如果存在的話）的寬度，所剩的值就是content了。
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。假設框的每個邊上有 10 個像素的外邊距和10個像素的內邊距和5個像素的邊框。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 50像素，以下是CSS代碼：
以上事例即可以明白css盒子模型的計算了。
對於浮動和絕對定位元素（包括固定定位元素）來說， 自動狀態的寬度會使盒子收縮到緊貼它內容大小。
以下代碼和盒子示意圖即可以理解：
當我們放置一個塊級元素於頁面上時，並且不設置它的定位屬性（relative，absolute，fixed），即position:static，或者設置了position:relative的情況下，塊的寬度是延伸自動填充滿它的父元素的寬度區域。
以下代碼及盒子示意圖可知：
留意外邊距疊加效應
盡管在上面的計算元素所需區域大小的例子中外邊距已經在計算中包括在內了，但是需要注意的是縱向的無定位（static）元素的相鄰外邊距會疊加合成為其中一個較大寬度的外外邊距的值，並非兩者之和。這就意味當計算實際上需要存放一個元素的區域大小時，並不是從外邊距的邊緣開始算起，只有最寬的外邊距會生效，並且較窄的外邊距會與較大的疊加在一起。
由上圖可知，兩個盒子的縱向margin,不是兩個margin相加，而是最寬的外邊距為准，假如相等的外邊距就是取之一就ok。
注意，當一個元素的寬度被設置為100%時（也就是說父元素的內容寬度是100%），它不應該有任何的外邊距，內邊距，或者是邊框，這只會使它放置的區域需要更大的面積。這通常會被忽略且擾亂了頁面的布局，這樣的話內容要么溢出要么使元素比他們應該的樣式更寬。
以上代碼以及效果圖可見，布局破壞，父元素獨占一行，影響布局。
如果可用區域是固定寬度的，你能簡單的把每一個屬性元素（margin，padding等）的寬度都相加起來以匹配可用的那個固定寬度。舉個例子，如果可用的區域寬度是100px，並且你需要一個元素有20px的內邊距，簡單的把這個元素的寬度設置為60px，內邊距為20px（20+60+20=100）。這個辦法中先決條件是寬度值和元素盒子屬性使用的都是同一測量單位，因為你不希望把混合單位相加起來（100px + 10%，只是舉個例子而已，在內容中這樣的寫法是沒有意義的）。
當可用內容區域的寬度是未知的時候——比如在流式布局（fluid layout）中——這個方法是行不通的，因為百分比和像素不能一起相加。在這種情況下，解決方法應該是為需要的元素聲明一個100%的寬度值，並且把內邊距，邊框，外邊距的值都設置到一個嵌套其中的元素中去。這個嵌套元素沒有任何的寬度值聲明，並且可以在沒有干擾父元素的情況下展示需要的內邊距，邊框，外邊距。
例如自適應效果，具體代碼和圖片如下：
這就是根據屏幕大小，調整適合的寬度。這個嵌套元素沒有任何的寬度值聲明，並且可以在沒有干擾父元素的情況下展示需要的內邊距，邊框，外邊距。
css盒子的延伸：div+css布局的思路
傳統的前台網頁設計是這樣進行的：根據要求，先考慮好主色調，要用什么類型的圖片，用什么字體、顏色等等，然后再用Photoshop這類軟件自由的畫出來，最后再切成小圖，再不自由的通過設計HTML生成頁面，改用CSS排版后，我們要轉變這個思想，此時我們主要考慮的是頁面內容的語義和結構，因為一個強CSS控制的網頁，等做好網頁后，你還可以輕松的調你想要的網頁風格，況且CSS排版的另外一個目的是讓代碼易讀，區塊分明，強化代碼重用，所以結構很重要。假如你想說我的網頁設計的很復雜，到后來能不能實現那樣的效果？我要告訴你的是，假如用CSS實現不了的效果，一般用表格也是很難實現的，因為CSS的控制能力實在是太強大了，順便說一點的是用CSS排版有一個很實用的好處是，假如你是接單做網站的，假如你用了CSS排版網頁，做到后來客戶有什么不滿足，非凡是色調的話，那么改起來就相當輕易，甚至你還可以定制幾種風格的CSS文件供客戶選擇，又或者寫一個程序實現動態調用，讓網站具有動態改變風格的功能。
關鍵點：實現結構與表現分離
在真正開始布局實踐之前，再來熟悉一件事——結構和表現相分離，這也用CSS布局的特色所在，結構與表現分離后，代碼才簡潔，更新才方便，這不正是我們學習CSS的目的所在嗎？舉個例來說P是結構化標簽，有P標簽的地方表示這是一個段落區塊，margin是表現屬性，我要讓一個段落右縮進2字高，有些人會想到加空格，然后不斷地加空格，但現在可以給P標簽指定一個CSS樣式：P {text-indent: 2em;}，這樣結果body內容部分就如下，這沒有外加任何表現控制的標簽：
很高興跟大家分享到這里，今天就聊到這了，假如有需要指正與補充的地方，歡迎給我留言喲！謝謝！