布局方式
1、流式布局（百分比布局）
通過(guò)將盒子的寬度設(shè)置成百分比，從而根據(jù)屏幕的寬度來(lái)進(jìn)行伸縮讲坎，不受固定像素的限制，而內(nèi)容則向兩側(cè)填充御蒲。
百分比寬度 = 目標(biāo)元素的寬度 / 父級(jí)元素的寬度衣赶，高度的變化需要配合媒體查詢。
圖片百分比： 圖片的寬度和高度比較彈性化厚满。當(dāng)圖片不設(shè)置寬高時(shí)府瞄，則按原始大小顯示；當(dāng)設(shè)置圖片百分比時(shí)碘箍，寬高的變化則是按等比例加載（建議設(shè)置上限值遵馆，以免超出）
2、rem布局
rem（root em）丰榴，是一個(gè)相對(duì)單位货邓，類(lèi)似em，em是相對(duì)父級(jí)元素的字體大小四濒，而rem則是相對(duì)于<html>元素的字體大小换况。
rem的優(yōu)勢(shì)：父元素的文字大小可能不一致，而整個(gè)頁(yè)面只有一個(gè)<html>盗蟆，通過(guò)媒體查詢改變html根元素的字體大小戈二，就可以整體改變所有頁(yè)面中的文字大小。
媒體查詢
媒體查詢（Media Query）喳资，是CSS3中的新語(yǔ)法觉吭。通過(guò)使用媒體查詢，可以針對(duì)不同的媒體類(lèi)型定義不同的樣式仆邓，也可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式鲜滩。
語(yǔ)法規(guī)范： @media mediatype and|not|only (media feature) { css樣式 }
- 以@media： 開(kāi)頭
- mediatype ：媒體類(lèi)型，取值有：all(默認(rèn)节值，所有設(shè)備）徙硅、screen(PC、Pad搞疗、Phone)闷游、 TV、print(打印機(jī))
- 關(guān)鍵字： and | not | only（and指）
- media feature： 媒體特性贴汪，必須用小括號(hào)包裹 （width脐往、min-width、max-width）
語(yǔ)法示例：有兩種實(shí)現(xiàn)形式扳埂。
- 1业簿、引入外部CSS文件
<link rel="stylesheet" href="mediaQuery.css" media="screen and (min-width: 768px)"> - 2、內(nèi)部樣式表中書(shū)寫(xiě)css代碼片段的形式
@media screen and (min-width: 768px) { /* css樣式 */ }
在寫(xiě)多個(gè)媒體查詢時(shí)阳懂，為了防止混亂梅尤，媒體查詢的條件最好按照從小到大或者從大到小的順序?qū)懀话懔?xí)慣從小到大來(lái)寫(xiě)岩调，代碼顯得更簡(jiǎn)潔
3巷燥、flex布局
flex(flexible box)，彈性布局号枕，用來(lái)為盒模型提供最大的靈活性缰揪，任何一個(gè)容器都可以指定為flex布局。
父級(jí)容器設(shè)置為flex布局后葱淳，子元素的float钝腺、clear和vertical-align屬性將失效。
在flex布局中赞厕，采用flex布局的元素艳狐，稱為flex容器，其所有子元素則自動(dòng)變?yōu)槿萜鞒蓡T皿桑，稱為flex項(xiàng)目（flex item）毫目。
flex布局，其原理就是通過(guò)給父級(jí)元素增加flex屬性诲侮，來(lái)控制子元素的位置和排列方式镀虐，從而實(shí)現(xiàn)元素的整體布局。
flex布局中常用的屬性：
針對(duì)父級(jí)flex容器
-
flex-direction: 設(shè)置主軸方向（flex 項(xiàng)目的排列方向）浆西，flex布局中分主軸和側(cè)軸粉私，設(shè)置好主軸后，剩下的就是側(cè)軸
屬性值 描述 row 默認(rèn)值近零，水平方向诺核，從左往右 row-reverse 水平方向，從右往左 column 垂直方向久信，從上往下 column-reverse 垂直方向窖杀，從下往上
-
flex-wrap：設(shè)置flex項(xiàng)目是否換行
屬性值 描述 nowrap 默認(rèn)值，不允許換行 wrap 允許換行
flex-flow裙士，是flex-direction和flex-wrap的復(fù)合屬性入客，寫(xiě)法：flex-flow: row nowrap;
-
justify-content：定義flex 項(xiàng)目在主軸上的對(duì)齊方式
屬性值 描述 flex-start 默認(rèn)值，從起始位置開(kāi)始 flex-end 從末尾開(kāi)始 center 居中 space-around 平分剩余空間，每個(gè)項(xiàng)目?jī)蓚?cè)的邊距相同 space-between 首尾兩邊貼邊桌硫，再平分剩余空間 -
align-items：flex項(xiàng)目在側(cè)軸上的排列方式夭咬，針對(duì)單行的flex-項(xiàng)目有效（默認(rèn)側(cè)軸為垂直方向）
屬性值 描述 flex-start 默認(rèn)值，從上往下 flex-end 從下往上 center 居中 baseline 基于基線對(duì)齊（文本底部之下铆隘，不常用） stretch 拉伸卓舵，若項(xiàng)目未設(shè)置高度或?yàn)閍uto時(shí)，將占滿容器高度 -
align-content：針對(duì)多行flex項(xiàng)目（flex項(xiàng)目換行的情況）在側(cè)軸上的排列方式（側(cè)軸以垂直為例）
屬性值 描述 flex-start 默認(rèn)值膀钠，從上往下 flex-end 從下往上 center 居中 spece-around 項(xiàng)目在側(cè)軸方向平分剩余空間掏湾，每個(gè)項(xiàng)目?jī)蓚?cè)的邊距相同 space-between 在側(cè)軸上，首尾兩邊貼邊肿嘲，再平分剩余空間 stretch 拉伸融击，所有flex項(xiàng)目的高度平分容器的高度
針對(duì)子級(jí)flex 項(xiàng)目
order：定義項(xiàng)目的排列順序，屬性值為數(shù)值型雳窟，數(shù)值越大尊浪，排列越靠前，默認(rèn)都為0
align-self： 設(shè)置單個(gè)項(xiàng)目的對(duì)齊方式涩拙，可覆蓋align-items的屬性值际长，可選屬性值與align-items一樣，默認(rèn)為auto兴泥，表示繼承父元素的align-items屬性值
-
flex-grow：定義單個(gè)flex項(xiàng)目的*擴(kuò)展比例（在整個(gè)flex容器中有剩余空間的情況下）工育，該屬性值有：
0：默認(rèn)值，不進(jìn)行擴(kuò)展其他正數(shù)數(shù)值： 在剩余空間中占據(jù)的比例搓彻，若只有一個(gè)元素取值大于1如绸，則占滿整個(gè)剩余空間，若是多個(gè)元素都取值旭贬，則按比例劃分剩余空間
flex-shrik： 定義單個(gè)flex項(xiàng)目的收縮比例（在整個(gè)flex容器中的空間不足時(shí)）
1：默認(rèn)值怔接，表示空間不足時(shí)，等比縮小比例
0：表示空間不足時(shí)稀轨，不縮小flex-basis：指定項(xiàng)目所占據(jù)的空間大小扼脐，當(dāng)與width同時(shí)存在時(shí)，取flex-basis的值
auto：默認(rèn)為項(xiàng)目本身大小
像素值或百分比：自定義寬度
flex: 該屬性是flex-grow奋刽、flex-shrink以及flex-basis的綜合簡(jiǎn)寫(xiě)形式瓦侮，該屬性值有：
auto： 相當(dāng)于 1 1 auto;
none： 相當(dāng)于 0 0 auto；
自定義數(shù)值： flex-grow flex-shrink flex-basis佣谐， 其中肚吏，flex-grow值為必須值，其他兩個(gè)屬性值不寫(xiě)時(shí)狭魂， flex-shrink默認(rèn)為1罚攀，flex-basis默認(rèn)為 0% 党觅。
注意，flex屬性只寫(xiě)一個(gè)值時(shí)斋泄，這個(gè)值就是flex-grow杯瞻，但實(shí)現(xiàn)的效果與flex-grow還是有區(qū)別的
例如：flex:1 和 flex-grow:1
flex:1 ---->相當(dāng)于設(shè)置了三個(gè)屬性，flex-grow：1; flex-shrink:1; flex-basis:0%;
flex-grow:1 -----> 只是設(shè)置了flex-grow:1;而flex-shrink取默認(rèn)值1是己，flex-basis取默認(rèn)值auto;
從這里不難發(fā)現(xiàn)又兵，兩者最大的差異在于flex-basis的值不同，這也是導(dǎo)致之后計(jì)算時(shí)的差異的關(guān)鍵原因卒废。由于flex-basis的值的層疊性要高于width的屬性值，因此宙地，兩者同時(shí)存在時(shí)摔认，取的是flex-basis的屬性值。
4宅粥、響應(yīng)式布局
響應(yīng)式的開(kāi)發(fā)原理： 使用媒體查詢参袱，針對(duì)不同寬度的設(shè)備進(jìn)行布局和樣式的額設(shè)置，從而適配不同設(shè)備的目的秽梅。
在響應(yīng)式布局中抹蚀，通過(guò)媒體查詢技術(shù)，改變布局容器的大小企垦，進(jìn)而改變布局容器中的子元素排列方式和大小环壤，從而實(shí)現(xiàn)不同屏幕下所展示的不同頁(yè)面布局和樣式變化。
常見(jiàn)的響應(yīng)式屏幕尺寸劃分：
1钞诡、超小屏幕： xs(Extra Small)郑现，width <= 767px
2、小型屏幕： sm(Small)荧降，768px <= width <= 991px
3接箫、中型屏幕： md(Medium)，992px <= width <= 1199px
4朵诫、大型屏幕： lg(Large)辛友，width >= 1200px
