盒模型
content-box
設(shè)置的?width?屬性只包含?content?的內(nèi)容的空間。也就是說：
盒子占用的空間?=?content 的大小?+?padding 的大小?+?border 的大小?+?margin 的大小
border-box
使用border-box，我們的 width 就包含了 padding 和 border 的尺寸了?；厝タ纯次覀兒心Ｐ偷膱D，我們可以看到border-box的黃色線括著的區(qū)域，它所占據(jù)的空間和范圍。
這樣當(dāng)我們給一個盒，padding 和 border 的時候，就不會影響我們給予盒子的 width。這樣我們就可以保證我們盒子在沒有 margin 的時候它所占據(jù)的空間就是與我們 width 一致的。
呈現(xiàn)出來的效果就是 padding 和 border 都會往內(nèi)擠壓空間，而不會影響盒子的寬度。
BFC（塊級格式上下文）
只有塊狀元素才可以創(chuàng)建bfc.
BFC特性
1.內(nèi)部的Box會在垂直方向，從頂部開始一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區(qū)域不會與float box疊加。
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然。
6.計算BFC的高度時，浮動元素也參與計算（當(dāng)BFC內(nèi)部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動元素的高度）。
flex
display:flex
彈性盒用于決定元素在盒子里的分布方式以及如何處理盒子的可用空間。通過盒模型，設(shè)計師可以很輕松的創(chuàng)建自適應(yīng)瀏覽器窗口的流動布局或自適應(yīng)字體的彈性布局
默認布局左右布局 高度百分百
采用flex布局的元素，成為flex容器，他的所有子元素自動成為容器成員，稱為容器項目
容器默認存在兩根軸：主軸（main axis）和交叉軸（cross axis）.主軸默認水平，交叉軸默認垂直，主軸的開始位置（與邊框的交叉點）叫做main start, 結(jié)束位置叫做main end ;交叉軸的開始位置叫做cross start ,結(jié)束為止叫做cross end.項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size（默認由內(nèi)容撐出來）,占據(jù)的交叉軸叫做cross size（默認撐滿）.
屬性 決定主軸的方向（即項目的排列方向）
.box{
?flex-direction: row |row-reverse | column | column-reverse
}
?Row(默認值)：主軸為水平方向，起點在左端。**
?Row-reverse:主軸水平方向，起始點在右端。
?Column:主軸為垂直方向，起點在上沿。**
?Column-reverse:主軸在垂直方向，起點在下沿
項目默認不換行
屬性
.box{
flex-wrap:nowrap | wrap | wrap-reverse;
}
Nowrap默認 不換行
屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用（多行）
.box {
align-content: flex-start | flex-end | center | space-between | space-around
| stretch;
}
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間
隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。
屬性：定義了項目在主軸上的對齊方式
.box{
justify-content:
flex-start |flex-end |center |space-between |space-around;
}
flex-start:默認值 左對齊
flex-end 右對齊
Center居中
Space-between 兩端對齊，項目之間的間隔都相等
Space-around 每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍
屬性定義項目在交叉軸上如何對齊（單行）
.box{
align-items:flex-start | flex-end | center |
baseline |stretch;
}
屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。
flex-grow屬性
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
?.item {
flex-grow: <number>;
}
如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的
剩余空間將比其他項多一倍。
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
.item {flex-shrink: <number>;}
如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
.item {
?flex-basis: <length> | auto;
?}
它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間。
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
?該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
?建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關(guān)值。
