布局方式
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布局的元素，稱(chēng)為flex容器，其所有子元素則自動(dòng)變?yōu)槿萜鞒蓡T，稱(chēng)為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
