一、移動(dòng)端特點(diǎn)

（1）PC端網(wǎng)頁與移動(dòng)端的不同

    PC端：屏幕大，網(wǎng)頁有固定版心；
    移動(dòng)端：屏幕小，網(wǎng)頁寬度多數(shù)為100%。

（2）分辨率

◆屏幕尺寸：?屏幕對角線的長度，一般用英寸度量
◆分辨率分類：
1、物理分辨率是生產(chǎn)屏幕時(shí)就固定的，它是不可被改變的
2、邏輯分辨率是由軟件（驅(qū)動(dòng)）決定的。

（3）視口

視口.png

（4）二倍圖

二倍.png

二、百分比布局（流式布局）

效果： 寬度自適應(yīng)，高度固定
提示：有語義化標(biāo)簽：footer、 header

流.png

三、Flex布局（★彈性布局）

與浮動(dòng)（float）區(qū)別：

  浮動(dòng)：不占位、脫標(biāo)，容易導(dǎo)致父盒子塌陷
  flex布局：
  a、是一種瀏覽器提倡的布局模型
  b、布局網(wǎng)頁更簡單、靈活、快速
  c、 避免浮動(dòng)脫標(biāo)的問題

（1）設(shè)置方式：

給父元素添加 display: flex
子元素可以自動(dòng)的擠壓或拉伸

（2）組成部分：

a、彈性容器：彈性盒子的父親
b、彈性盒子
c、 主軸
d、側(cè)軸 / 交叉軸

flex布局.png

（3）主軸對齊方式（水平方向）

◆屬性: justify-content
◆屬性值：

主軸.png

A、space-around：

盒子2.png

B、space-between

父盒子0.png

C、space-evenly

一樣距離.png

（4）側(cè)軸對齊方式（垂直方向）

◆屬性1: align-items（添加到彈性容器，父盒子）
◆屬性2: align-self 控制某個(gè)彈性盒子在側(cè)軸的對齊方式（添加到彈性盒子）
◆屬性值

側(cè)軸.png

（5）伸縮比

◆目的：使用flex屬性修改彈性盒子伸縮比。
◆屬性：flex：值；
◆取值分類：數(shù)值（整數(shù)）
注意： 只占用父盒子剩余尺寸

四、總結(jié)

（1）彈性盒子：彈性容器的最近一級子元素(親兒子子元素)

1.默認(rèn)的寬度由內(nèi)容所撐開，默認(rèn)的高度為父元素的高度(側(cè)軸方向默認(rèn)是拉伸)；
2.沒有塊級，行內(nèi)，行內(nèi)塊元素之分，統(tǒng)統(tǒng)都是彈性盒子(可以直接設(shè)置寬高，一行顯示多個(gè))；
3.默認(rèn)不換行，寧愿犧牲自己的寬度，都不會(huì)自動(dòng)換行。

（2）
彈性容器設(shè)置的屬性：df，jc，ai
彈性盒子設(shè)置的屬性：align-self，flex