盒模型：設(shè)置元素位置關(guān)系content+padding+border+margin
?1、標(biāo)準(zhǔn)盒模型
????? -?content指內(nèi)部區(qū)域 設(shè)置寬高大小
????? - padding會(huì)撐大當(dāng)前的容器 需要減去相應(yīng)的padding值
????? - border盒子的外面
????? - margin外邊距
????? -計(jì)算方法
?????????? -自身的大小content+padding+border
?????????? -實(shí)際的大小content+padding+border+margin
2、怪異盒模型（IE盒模型：當(dāng)文件丟失了文檔類型的時(shí)候，會(huì)觸發(fā)怪異盒模型的渲染方式）
?? - padding和border值是長(zhǎng)在盒子的內(nèi)部的 不需要減去相應(yīng)的設(shè)置值
?? -計(jì)算方式
????????? -自身的大小 content（padding和border包含在內(nèi)）
????????? -實(shí)際的大小 content（padding和border包含在內(nèi)）+margin
形成盒模型的屬性：box-sizing
?????? -標(biāo)準(zhǔn)盒模型：content-box 默認(rèn)值
?????? -怪異盒模型：border-box
彈性盒的概念：控制子級(jí)元素在父級(jí)元素中排列方式
?? 屬性：display
?? 屬性值：flex
??????? -設(shè)置彈性盒要給父級(jí)元素添加
??????? -給容器添加彈性盒之后，所有的子級(jí)元素默認(rèn)在主軸上排列
???????????? -默認(rèn)主軸是X軸，側(cè)軸是Y軸
???????????? -?默認(rèn)主軸是Y軸，側(cè)軸是X軸
??????? -給容器添加彈性盒之后，所有的子級(jí)元素可以不考慮元素類型 直接設(shè)置寬高大小（轉(zhuǎn)換為塊元素）
??????? -居中方式：
???????????? -單個(gè)元素居中 只需要給元素設(shè)置margin：auto即可
?注意：
????? -浮動(dòng)在彈性盒環(huán)境是不可用的（暫且）
????? -盒模型和定位屬性正常使用
彈性盒詳解
?? 添加在父級(jí)上的屬性
1.彈性盒默認(rèn)主軸是X軸，改變主軸方向
?????? 屬性：flex-direction
?????? 屬性值：
?????????? - row? X軸（默認(rèn)軸）
?????????? - column Y軸為主軸
?????????? - row/column-reverse? 默認(rèn)軸依然是X/Y軸 ，排列順序是顛倒的
2.主軸的對(duì)齊方式（控制子級(jí)元素方式在主軸上的顯示對(duì)齊）
??????? 屬性：justify-content
??????? 屬性值：
??????????? - flex-start? 開始的位置
??????????? - flex-end??? 結(jié)束的位置
??????????? - center????? 居中
??????????? - space-between?? 兩端對(duì)齊，其他空間自動(dòng)分配
??????????? - space-around??? 所有的空間都是自動(dòng)分配
??????????? - space-evenly??? 所有的空間都是相等的
3.側(cè)軸的對(duì)齊方式
??????? 屬性：align-items
??????? 屬性值：
??????????? - flex-start
??????????? - flex-end
??????????? - center
??????????? - baseline? 基線對(duì)齊
?????????????????? -默認(rèn)情況下和flex-start效果是一樣的
?????????????????? -當(dāng)設(shè)置文本字體大小的時(shí)候，所有的文本都會(huì)以基線對(duì)齊
??????????? - stretch? 拉伸
4.彈性盒中子級(jí)元素的總寬度大于父級(jí)的時(shí)候，默認(rèn)是進(jìn)行擠壓的，不會(huì)往下掉
?????? 換行屬性：flex-wrap
????????? 屬性值
????????????? - wrap?? 換行
???????? ?????- nowrap?不換行
????????????? - wrap-reserve?? 換行順序方向
5.行與行之間的間距
????????? 屬性：align-content
????????? 屬性值：
????????????? -?flex-start?? 開始位置
????????????? -?flex-end?? 結(jié)束位置
????????????? -?center???? 居中
????????????? -?space-between兩端對(duì)齊 其他的空間自動(dòng)分配
????????????? -?space-around? 所有的空間都是自動(dòng)分配的
????????????? -?space-evenly? 搜有的空間都是相等的
添加在子級(jí)元素上的屬性
?? align-items ?表示控制所有子級(jí)元素在側(cè)軸上的對(duì)齊方式
? ?align-self??表示控制單個(gè)子級(jí)元素在側(cè)軸上的對(duì)齊方式
???????? - flex-start/end
???????? - center
???????? - auto
???????? - stretch? 拉伸
??order?表示排序優(yōu)先級(jí)
???????? -屬性值默認(rèn)為0 數(shù)字越大優(yōu)先級(jí)越高 越往后顯示??
??? ?flex:1表示在彈性盒環(huán)境下 占據(jù)主軸上剩下的空間 并且會(huì)隨著子級(jí)元素的的內(nèi)容而撐開
