哈喽大家好，我是作者“未來”，本期分享的内容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！
志同道合的小夥伴跟我一起學習交流哦！
第二階段 CSS3
10 CSS盒模型及應用(重點)
其實，CSS就三個大子產品：盒子模型、浮動、定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝内容的容器。每個矩形都由元素的内容、内邊距( padding)、邊框( border)和外邊距( margin)組成。
1 看透網頁布局本質
網頁布局中，我們是如何把裡面的文字，圖檔，按照美工給我們的效果圖排列的整齊有序呢？
我們說過，行内元素比如文字類似牛奶，也需要一個盒子把他們裝起來，我們前面學過的雙标簽都是一個盒子。有了盒子，我們就可以随意的，自由的，擺放位置了。
網頁布局的本質：把網頁元素 比如文字圖檔等等，放入盒子裡面，然後利用CSS擺放盒子的過程，就是網頁布局。
CSS其實沒有太多邏輯可言，類似我們小時候玩的積木我們可以自由的，随意的擺放出我們想要的效果。
2 認識盒子模型組成
盒子模型( Box Model)
首先，我們來看一張圖，來體會下什麼是盒子模型
所有的文檔元素(标簽)都會生成一個矩形框，我們稱為元素框( element box)，它描述了一個文檔元素在網頁布局彙總所占的位置大小。是以，每個盒子除了有自己大小和位置外，還影響着其他盒子的大小和位置。
3 盒子邊框(border)
文法：
邊框屬性——設定邊框樣式( border-stye)
邊框樣式用于定義頁面中邊框的風格，常用屬性值如下：
none：沒有邊框即忽略所有邊框的寬度(預設值)
solid：邊框為單實線(最為常用的)
dashed：邊框為虛線
dotted：邊框為點線
double：邊框為雙實線
4 邊框綜合寫法(一)
5 邊框綜合寫法(二)
6 合并細線表格
以前學過的html表格邊框很粗，這裡隻需要CSS一句話就可以美觀起來。讓我們真的相信，CSS就是我們的白馬王子(白雪公主)。
Table{ border- collapse:collapse；} collapse單詞是合并的意思border-collapse:collapse：表示邊框合并在一起。
7 圓角矩形
從此以後，我們的世界不隻有矩形。 radius半徑(距離)
文法格式：
8 盒子内邊距
padding屬性用于設定内邊距。是指邊框與内容之間的距離。
padding-top：上内邊距
padding-right：右内邊距
padding-bottom：下内邊距
padding-left：左内邊距
注意：後面跟幾個數值表示的意思是不一樣的。
9 fireworks測量工具
類似ps
滴管用來拾取顔色，切片工具用來測量距離。
10 新浪導航欄(一)
案例：要求做出下面的效果
11 新浪導航欄(二)
12 外邊距以及盒子居中對齊
margin屬性用于設定外邊距。設定外邊距會在元素之間建立“空白”，這段空白通常不能放置其他内容。
margin-top：上外邊距
margin-right：右外邊距
margin-bottom：下外邊距
margin-left：上外邊距
margin：上外邊距 右外邊距 下外邊距 左外邊距。 取值順序跟内邊距相同。
外邊距實作盒子居中
可以讓一個盒子實作水準居中，需要滿足以下兩個條件：
1 必須是塊級元素。
2 盒子必須指定了寬度(width)
然後就給左右的外邊距都設定為auto，就可使塊級元素水準居中。
實際工作中常用這種方式進行網頁布局，示例代碼如下：
13 文字、盒子、圖檔和背景水準居中的差別
14 清除内外邊距
為了更友善地控制網頁中的元素，制作網頁時，可使用如下代碼清除元素的預設内外邊距：
15 行内元素上下内外邊距的問題
注意：行内元素是隻有左右外邊距的，是沒有上下外邊距的。内邊距，在ie6等低版本浏覽器也會有問題。
我們盡量不要給行内元素指定上下的内外邊距就好了。
16 外邊距合并(一)
使用 margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并。
相鄰塊元素垂直外邊距的合并當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top，則他們之間的垂直間距不是margin-bottom與 margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并(也稱外邊距塌陷)。
解決方案：避免就好了。
17 外邊距合并(二)
嵌套塊元素垂直外邊距的合并
對于兩個嵌套關系的塊元素，如果父元素沒有上内邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。
解決方案：
1.可以為父元素定義1像素的上邊框或上内邊距。
2.可以為父元素添加 overflow:hidden
18 盒子的計算尺寸
content寬度和高度
使用寬度屬性width和高度屬性 height可以對盒子的大小進行控制。
width和 height的屬性值可以為不同機關的數值或相對于父元素的百分比%，實際工作中最常用的是像素值。
大多數浏覽器，如 Firefox、lE6及以上版本都采用了W3C規範，符合CSS規範的盒子模型的總寬度和總高度的計算原則是：
注意：
1、寬度屬性width和高度屬性 height僅适用于塊級元素，對行内元素無效(img标簽和 input除外)。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合并的情況。
19 學會計算盒子尺寸(重點)
Padding-left:15px 會讓盒子向右拉長15像素，是以，寬度weidth要減去15px。
20 padding不影響盒子大小的情況
如果一個盒子沒有給定寬度高度或者繼承父親的寬度高度，則 padding不會影響本盒子大小
21 搜尋趣圖(一)案例分析
22 搜尋趣圖(二)大盒子
23 搜尋趣圖(三)标題
24 搜尋趣圖(四)
25 搜尋趣圖(五)
26 盒子模型布局穩定性
開始學習盒子模型，同學們最大的困惑就是，分不清内外邊距的使用，什麼情況下使用内邊距，什麼情況下使用外邊距？
答案是：其實他們大部分情況下是可以混用的。就是說，你用内邊距也可以，用外邊距也可以。你覺得哪個友善，就用哪個。
但是，總有一個最好用的吧，我們根據穩定性來分，建議如下：
按照優先使用寬度(width)其次使用内邊距( padding)再次外邊距( margin)。
原因：
1. margin會有外邊距合并還有ie6下面 margin加倍的bug(讨厭)是以最後使用。
2. padding會影響盒子大小，需要進行加減計算(麻煩)其次使用。
3. width沒有問題(嗨皮)我們經常使用寬度剩餘法、高度剩餘法來做。
第一個盒子不是寬度剩餘法，後面就是寬度剩餘法，解決間距問題。
27 CSS3盒模型
CS53中可以通過box- sazing來指定盒模型，即可指定為 content-box、 border-box，這樣我們計算盒子大小的方式就發生了改變。
可以分成兩種情況：
1、box-sizing:content-box盒子大小為width+ padding+ border content-box:此值為其預設值，其讓元素維持W3C的标準 Box Mode
2、 box-sizing:border-box盒子大小為width就是說 padding和 border是包含到width裡面的。
注：上面的标注的width指的是CSS屬性裡設定的width:length, content的值是會自動調整的。
28 盒子陰影
文法格式：
box- shadow：水準陰影 垂直陰影 模糊距離 陰影尺寸 陰影顔色内/外影；
29 水晶圖檔案例
看不懂的小夥伴不要氣餒，後續的分享中将持續解釋，隻要你跟着我分享的課程從頭到尾去學習，每篇文章看三遍，一個月後，回過頭來看之前的文章就會感覺簡單極了。
本章已結束，下篇文章将分享《11 浮動及應用》小夥伴們不要錯過喲！