聊聊css盒子模型

css盒子模型原理：

在網頁設計中常聽的屬性名：內容(content)、填充/內邊距(padding)、邊框(border)、外邊距(margin)， 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的包含塊，這不是絕對的。

其定義以下：

1. 用戶代理（好比瀏覽器）選擇根元素做爲 containing block（稱之爲初始 containing block）。
2. 對於其它元素，除非元素使用的是絕對位置，containing block 由最近的塊級祖先元素盒子的內容邊界組成。
3. 若是元素有屬性 'position:fixed'，containing block 由視口創建。
4. 若是元素有屬性 'position:absolute'，containing block 由最近的 position 不是 static 的祖先創建，按下面的步驟：
   1. 若是祖先是塊級元素，containing block 由祖先的 padding edge 造成。
   2. 若是祖先是內聯元素，containing block 取決於祖先的 direction 屬性。
      1. 若是 direction 是 ltr（左到右），祖先產生的第一個盒子的上、左內容邊界是 containing block 的上方和左方，祖先的最後一個盒子的下、右內容邊界是 containing block 的下方和右方。
      2. 若是 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內容部分就以下，這沒有外加任何表現控制的標籤：

很高興跟你們分享到這裏，今天就聊到這了，假若有須要指正與補充的地方，歡迎給我留言喲！謝謝！