css3盒模型、彈性盒模型、怪異盒模型
一、CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
- Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。（margin的長度是允許出現負值的）注意：當以百分比來設定長度時，不管是寬度還是高度，都是按照父元素的寬度百分比計算的（即便是計算上下外邊距也是按照父元素的寬度百分比計算的）
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。（padding的長度是不允許出現負值的）和margin一樣，當以百分比來設定長度時，不管是寬度還是高度，都是按照父元素的寬度百分比計算的。
- Content(內容) - 盒子的內容，顯示文字和影象。
元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
瀏覽器的相容性問題
根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。
IE8 及更早IE版本不支援設定填充的寬度和邊框的寬度屬性。
解決IE8及更早版本不相容問題可以在HTML頁面宣告 <!DOCTYPE html>即可。
二、CSS3 彈性盒子模型(Flex Box Model)
彈性盒子是 CSS3 的一種新的佈局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
瀏覽器支援
目前沒有瀏覽器支援 box-flex 屬性。
Firefox 支援替代的 -moz-box-flex 屬性。
Safari、Opera 以及 Chrome 支援替代的 -webkit-box-flex 屬性。
ie9之前的瀏覽器不支援
注意：在使用彈性盒模型的時候，父元素必須要加display:box或display:inline-box
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;}//需要加上瀏覽器核心字首
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
box-orient:定義盒模型的佈局方向
- horizontal：水平方向(不加的時候預設為水平方向)
- vertical：垂直方向
box-direction：元素排列順序
- normal：正序
- reverse：反序
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff; }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>
box - ordinal - group：設定元素的具體位置
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}
.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}
.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}
.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}
.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}
</style>
box-flex：定義盒子的彈性空間
- 子元素的尺寸 = 盒子的尺寸*子元素的box-flex屬性值/所有子元素的box-flex屬性值的和
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){width:300px;}
.box div:nth-of-type(2){-webkit-box-flex:2;}
.box div:nth-of-type(3){-webkit-box-flex:3;}
.box div:nth-of-type(4){-webkit-box-flex:4;}
.box div:nth-of-type(5){-webkit-box-flex:5;}
/*
子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 所有子元素的box-flex屬性值的和
*/
</style>
box-pack：對盒子富裕的空間進行管理
- start所有子元素在盒子左側顯示，富裕空間在右側
- end：所有子元素在盒子右側顯示，富裕空間在左側
- center:所有子元素居中
- justify：富裕空間在子元素之間平均分佈
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:Justify; }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>
box-align：在垂直方向上對元素的位置進行管理
- start：所有子元素據頂
- end：所有子元素據底
- center：所有子元素居中
<style>
html{height:100%;}
body{height:100%;margin:0;}
.box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>
盒模型陰影：
用法：box-shadow：[inset]x y blur [speed] color
引數
- inset:投影方式：inset：內投影 、不給的時候：預設外投影
- x、y：陰影的水平和垂直偏移距離
- blur：模糊半徑
- spread;擴充套件陰影半徑（先擴充套件原有形狀，再開始畫陰影）
- color：陰影的顏色
<style>
.box{width:100px;height:100px;margin:100px;background:Red; box-shadow:inset 10px 10px 30px blue;}
</style>
其他盒模型新增屬性
box-reflect：倒影
- direction：方向 （必選引數）above|below|left|right
- 距離
- 漸變（可選）
resize：自由縮放
- both：水平垂直都可以縮放
- horizontal 只有水平方向可以自由縮放
- vertical:只有垂直方向可以縮放
注意：一定要配合overflow：auto一塊使用，一塊使用只有水平方向可以縮放
<style>
body{ background:#000;}
img{display:block;margin:200px auto;-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}
</style>
</head>
<body>
<img src="miaov.jpg" />
</body>三、怪異盒模型
盒模型一共有兩種模式，一種是標準模式，另一種就是怪異模式
當你用編輯器新建一個html頁面的時候你一定會發現最頂上都會有一個DOCTYPE標籤，例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE HTML>
以上幾種DOCTYPE都是標準的文件型別，無論使用哪種模式完整定義DOCTYPE，都會觸發標準模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）。
在標準模式下的盒模型如下圖所示，盒子總寬度/高度=width/height+padding+border+margin
在怪異模式下的盒模型如下圖所示，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;
看到這裡你應該對盒模型的兩種模式有了清晰的認識，下面在此基礎上介紹一下css3屬性box-sizing;
box-sizing 盒模型的解析模式
box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。
content-box，border和padding不計算入width之內
padding-box，padding計算入width內
border-box，border和padding計算入width之內，其實就是怪異模式了。
當設定為box-sizing:content-box時，將採用標準模式解析計算，也是預設模式；
當設定為box-sizing:border-box時，將採用怪異模式解析計算；
目前使用此屬性需要字首如下:
-webkit-box-sizing: content-box; -moz-box-sizing: content-box;
對於box-sizing想要了解更多的請點選box-sizing 詳解
知識點補充：| 引擎型別 | Gecko | Webkit | Presto | Internet Explorer |
|---|---|---|---|---|
| Box-sizing | -moz-box-sizing | -webkit-box-sizing | -o-box-sizing/box-sizing | -ms-box-sizing |