一，百分比布局（流式布局）
width:寬度的百分比是相對于父盒子width內(nèi)容寬的比。沒有父盒子就是相對于瀏覽器的寬测暗。
height:高度的百分比是相對于父盒子height內(nèi)容高的比柜蜈。
padding,margin.:padding和margin不管任何方向百分比都是相對于父盒子width內(nèi)容寬的比。
border：不能書寫百分?jǐn)?shù)
二懊直，伸縮布局
1扒吁，給父元素設(shè)置display：flex? ? 必須給其直接父元素設(shè)置display：flex屬性 （父元素為伸縮盒子）
2，任何情況下都可以使用
3室囊，伸縮盒子中所有元素都是按照主軸方向顯示的
伸縮盒子默認(rèn)有兩條軸：水平顯示的主軸雕崩，永遠(yuǎn)垂直于主軸的側(cè)軸
4，常用屬性
改變主軸方向：flex-direction：roew（水平顯示融撞，默認(rèn)）/? column（垂直顯示）/? row-column（右向左）/??column-reverse（下向上）
設(shè)置元素在主軸方向上的對齊方式：justify-content：flex-start（主軸開始位置對齊）/? flex-end（主軸結(jié)束位置對齊）/? space-between（兩端對齊中間自適應(yīng)）/? center（中間對齊）/? sopace-around（元素周圍出現(xiàn)空白）
設(shè)置元素在側(cè)軸對齊方式：align-items：flex-start（側(cè)軸開始位置對齊）/? flex-end（側(cè)軸結(jié)束位置對齊）/? center（居中對齊）/? stretch（沿著側(cè)軸拉伸盼铁，默認(rèn)值---元素沒有設(shè)置高度的情況下）
在伸縮盒子中不管元素有多少個，默認(rèn)都一行顯示尝偎，設(shè)置元素是否換行：flex-warp：nowarp（默認(rèn)饶火，不換行）/? warp（換行）
設(shè)置換行后的對齊方式（多行對齊方式）align-content：flex-start（開始位置對齊）/? flex-end（結(jié)束位置對齊）/? center（居中對齊）/? strech（默認(rèn)）/? space-between（兩側(cè)對齊中間自適應(yīng)）/? space-around（周圍環(huán)繞）
伸縮盒子中的flex屬性：flex：number；number表示當(dāng)前元素占父元素的份數(shù)
給子元素排序：order：值致扯；
三肤寝，響應(yīng)式布局（同一個網(wǎng)頁在不同設(shè)備中布局效果不一樣）核心技術(shù)：媒體查詢
媒體查詢：通過視口的寬度來設(shè)備設(shè)備，實(shí)現(xiàn)不同設(shè)備布局效果不同
語法：@media?only?screen?and（width：320px）{?div {?布局 } }? 當(dāng)前設(shè)備的寬度等于320px時執(zhí)行媒體查詢中的代碼
詳解：
@media：聲明媒體查詢
screen：有屏幕的媒體類型抖僵，除此之外還有鲤看，all：任何類型，print打印設(shè)備類型
width：320px ：媒體特征裆针，min-width（最小寬）/? max-width（最大寬）刨摩，orientation：portrait（豎屏）/? landscape（橫屏）
and：多個媒體特征用and鏈接
only：一個鏈接條件的關(guān)鍵字寺晌，可以省略
四，rem適配（解決同一元素在不同設(shè)備中的變化澡刹，文字和盒子在不同像素密度下適配）
適配過程：
1呻征，UI圖和移動設(shè)備分成相同的份數(shù)例：20，UI/20=UI圖中每一份大小
2罢浇，計算出UI圖中每一個元素的比例：當(dāng)前元素的大小/每一份大小
3陆赋，計算跟標(biāo)簽中文字大小（跟文字大腥卤铡）：html文字大小=移動設(shè)備寬度/20
4攒岛，公式：元素rem值=?當(dāng)前元素測量大小 / UI圖寬度/份數(shù)）
例：@size：20；（自定義份數(shù)）
@media?only?screen?and （width：320px）{
? ?html：{
? ? ? ? font-size：320px / @size胞锰； （計算跟文字大性志狻）
? ? }
}
.box {?width：元素測量寬度 / （UI圖寬度 / @size）rem}
