主要內容
盒模型的概念標準盒模型怪異盒模型彈性盒模型學習目標
一、CSS 盒子模型(Box Model)
1、概念
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距（margin），邊框（border），填充（padding），和實際內容（content）。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
1）Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
2）Border(邊框) - 圍繞在內邊距和內容外的邊框。
3）Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
4）Content(內容) - 盒子的內容，顯示文本和圖像。
如果把盒子模型看作是一個生活中的快遞，那麼內容部分等同於你買的實物，內邊距等同於快遞盒子中的泡沫，邊框等同於快遞盒子，外邊距等同於兩個快遞盒子之間的距離。
下面看一個例子：
【實例1-1】
HTML代碼如下：
Css代碼如下：
效果圖如下：
控制臺中的盒模型如下：
通過代碼和圖給大家簡單講解一下，最中間藍色區域就是我們定義的寬度和高度，也就是content的寬度和高度，當我們給padding加一個寬度的時候整個整體也變寬了，padding的距離就是綠色部分，在padding外面就是border，淺黃色部分，由圖也很明顯的看出也增加了整個整體的寬度，border外面是margin部分，深黃色區域。
二、標準盒模型
概念W3C盒子模型(標準盒模型)
根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的；即在標準模式下的盒模型，盒子實際內容（content）的width/height=我們設置的width/height;盒子總寬度/高度=width/height+padding+border+margin。
2、內容區域（content）
Content內容區域包含寬度（width）和高度（height）兩個屬性。
塊級元素默認寬度為100%，行內元素默認寬度是由內容撐開，不管塊級元素還是行內元素，默認高度都是由內容撐開。
塊級元素可以設置寬高屬性，行內元素設置寬高屬性不生效。
寬度（width）和高度（height）可以取值為像素（px）和百分比（%）。
3、內邊距（Padding）
3.1定義
CSS padding（填充）是一個簡寫屬性，定義元素邊框與元素內容之間的空間，即上下左右的內邊距。
3.2可能的值
1）定義一個固定的填充(像素, pt, em,等)
2）使用百分比值定義一個填充
3.3單邊內邊距屬性
在CSS中，它可以指定不同的側面不同的填充：
【實例2-1】
分別代表：
（1）上內邊距是 25px
（2）右內邊距是 50px
（3）下內邊距是 25px
（4）左內邊距是 50px
3.4簡寫屬性
為了縮短代碼，它可以在一個屬性中指定的所有填充屬性。
這就是所謂的簡寫屬性。所有的填充屬性的簡寫屬性是 padding :
Padding屬性，可以有一到四個值。
（1） padding:25px 50px 75px 100px;
上填充為25px
右填充為50px
下填充為75px
左填充為100px
（2） padding:25px 50px 75px;
上填充為25px
左右填充為50px
下填充為75px
（3）padding:25px 50px;
上下填充為25px
左右填充為50px
（4）padding:25px;
所有的填充都是25px
3.5padding需要注意的問題
padding會撐大容器
3.6padding實現導航條
【實例2-2】
4、邊框（Border）
4.1定義
CSS邊框屬性允許你指定一個元素邊框的樣式和顏色。
4.2邊框樣式
邊框樣式屬性指定要顯示什麼樣的邊界。
border-style屬性用來定義邊框的樣式
border-style 值:
none: 默認無邊框
dotted: 定義一個點線邊框
dashed: 定義一個虛線邊框
solid: 定義實線邊框
double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
4.3邊框寬度
您可以通過 border-width 屬性為邊框指定寬度
4.4邊框顏色
border-color屬性用於設置邊框的顏色
您還可以設置邊框的顏色為"transparent"。
注意： border-color單獨使用是不起作用的，必須得先使用border-style來設置邊框樣式。
4.5邊框單獨設置各邊
在CSS中，可以指定不同的側面不同的邊框：
上面的例子也可以設置一個單一屬性：
border-style屬性可以有1-4個值：
（1）border-style:dotted solid double dashed;
上邊框是 dotted
右邊框是 solid
底邊框是 double
左邊框是 dashed
（2）border-style:dotted solid double;
上邊框是 dotted
左、右邊框是 solid
底邊框是 double
（3）border-style:dotted solid;
上、底邊框是 dotted
右、左邊框是 solid
（4）border-style:dotted;
四面邊框是 dotted
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
4.6邊框簡寫屬性
上面的例子用了很多屬性來設置邊框。
你也可以在一個屬性中設置邊框。
你可以在"border"屬性中設置：
border-widthborder-style (required)border-color
5、外邊距（Margin）
5.1定義
CSS margin(外邊距)屬性定義元素周圍的空間。
5.2取值
（1）Auto
（2）定義一個固定的margin
（3）定義一個使用百分比的邊距
5.3單邊外邊距屬性
在CSS中，它可以指定不同的側面不同的邊距：
5.4簡寫屬性
為了縮短代碼，有可能使用一個屬性中margin指定的所有邊距屬性。這就是所謂的簡寫屬性。
所有邊距屬性的簡寫屬性是 margin :
margin屬性可以有一到四個值。
（1）margin:25px 50px 75px 100px;
上邊距為25px右邊距為50px下邊距為75px左邊距為100px（2）margin:25px 50px 75px;
上邊距為25px左右邊距為50px下邊距為75px（3）margin:25px 50px;
上下邊距為25px左右邊距為50px（4）margin:25px;所有的4個邊距都是25px5.5margin需要注意的問題
（1）外邊距合併問題
垂直方向上外邊距相撞時，取較大值 注意：浮動元素的外邊距不合併【實例2-1】
效果圖如下：
（2）margin-top問題
當給子元素設置margin-top時，父元素會跟著子元素一起下來：
解決方法：
①父元素設置overflow:hidden;②父元素或者子元素設置float③父元素設置border:1px solid transparent;④父元素設置padding-top:1px;【實例2-2】
效果如下：
5.6margin練習
三、怪異盒模型
1.概念
IE盒子模型(怪異盒模型)
在該模式下，瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和；即在怪異模式下的盒模型，盒子的（content）寬度+內邊距padding+邊框border寬度=我們設置的width(height也是如此)，盒子總寬度/高度=width/height + margin 。
2.Box-sizing
CSS3指定盒子模型種類
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
box-sizing: content-box;//寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
box-sizing: border-box;// 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
即box-sizing屬性可以指定盒子模型種類，content-box指定盒子模型為W3C（標準盒模型），border-box為IE盒子模型（怪異盒模型）。
四、彈性盒模型（flex box）
1.定義
彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
2.CSS3彈性盒內容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值為 flex 將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。
【實例4.1】
3、父元素上的屬性
3.1display 屬性
display:flex;開啟彈性盒
display:flex;屬性設置後子元素默認水平排列
3.2flex-direction屬性
（1）定義
flex-direction 屬性指定了彈性子元素在父容器中的位置。
（2）語法
flex-direction的值有:
row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
（3）實例
3.3justify-content 屬性
（1）定義
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊
（2）語法
各個值解析:
①flex-start：
彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。
②flex-end：
彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。
③center：
彈性項目居中緊挨著填充。（如果剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
④space-between：
彈性項目平均分布在該行上。如果剩餘空間為負或者只有一個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分布在該行上，相鄰項目的間隔相等。
⑤space-around：
彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有一個彈性項，則該值等同於center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
效果圖展示：
（3）實例
3.4align-items 屬性
（1）定義
align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
（2）語法
各個值解析:
①flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
②flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
③center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
（3）實例
四、子元素上的屬性
4.1flex-grow
flex-grow 根據彈性盒子元素所設置的擴展因子作為比率來分配剩餘空間。
默認為0，即如果存在剩餘空間，也不放大。如果只有一個子元素設置，那麼按擴展因子轉化的百分比對其分配剩餘空間。0.1即10%，1即100%，超出按100%【實例4-2】
五、瀏覽器內核
瀏覽器最重要或者說核心的部分是「Rendering Engine」，可大概譯為「渲染引擎」，不過我們一般習慣將之稱為「瀏覽器內核」。負責對網頁語法的解釋（如標準通用標記語言下的一個應用HTML、JavaScript）並渲染（顯示）網頁。 所以，通常所謂的瀏覽器內核也就是瀏覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不同的瀏覽器內核對網頁編寫語法的解釋也有不同，因此同一網頁在不同的內核的瀏覽器裡的渲染（顯示）效果也可能不同，這也是網頁編寫者需要在不同內核的瀏覽器中測試網頁顯示效果的原因。
六、廠商前綴
css標準中各個屬性也要經歷從草案(WD)到推薦(REC)的過程，css中的屬性進展都不一樣。瀏覽器廠商在標準尚未明確情況下提前支持會有風險，同時也會出現有的瀏覽器廠商支持的好，有的支持的不好，所以就用廠商前綴加以區分。
CSS3中一些新功能也是目前導致各大瀏覽器不兼容的一個原因，這些新功能的出現，瀏覽器廠商們變便開始嘗試融合、試驗，所以就在這些功能前加上自己的特定前綴來執行自己的特定解決方法，為了讓這些功能能在完全確認下來前使用；
下面就是我們經常用到的前綴及其兼容瀏覽器：
-webkit-
Apple Webkit團隊，兼容Android, Safari, Chrome等；
-moz-
Mozilla，兼容Firefox等;
-ms-
Microsoft基金會，兼容IE;
-o-
兼容Opera
因此對於一些較新的css3特性，需要添加以上前綴兼容每個瀏覽器，例如實現線性漸變，標準寫法是 linear-gradient()，但是一下瀏覽器還未完全確定這一特性，就在前面添加一個前綴來進行試驗執行，如 -webkit-linear-gradient；
下面是開發中常用的兼容寫法：
七、Css Hack
由於不同廠商的瀏覽器，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不一樣，因此會導致生成的頁面效果不同，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
css hack並不是什麼技術，只是針對於在不同瀏覽器上的bug的解決方案。一般都是利用各瀏覽器的支持CSS的能力和BUG來進行的。
hack這個詞，看翻譯也知道它屬於是一種「暴力」的作法，儘量找到通用方法而減少對CSS Hack的使用，大規模使用CSS Hack會帶來維護成本的提高以及瀏覽器版本變化而帶來類似Hack失效等系列問題。（對當前瀏覽器版本起作用的hack，也許升級一下，界面就又亂了）
下面我們學習常用的幾個hack，主要僅針對IE瀏覽器，IE6以下不再考慮。
1.條件hack
【示例1】
【示例2】
【示例3】
通過上面三個例子我們可以發現：
條件注釋它的格式為
大於 gt
大於或等於 gte
小於 lt
小於或等於 lte
非指定版本 ！
這些條件幫我們更精確的篩選瀏覽器版本
2、屬性級Hack
同一段文字在IE6,7,8顯示為不同顏色
八、作業
https://www.meizu.com/