3.移动端

1.

• 百分比布局和弹性布局主要对宽度做调整

1.1可视化标签 meta

1.2 多倍图

物理像素和px之比，为1：2

1.2.1 背景缩放

1.3 特殊样式

2.流式布局（百分比）

2.1京东案例

2.1.1二倍精灵图做法

3.弹性布局 flex ★★

必须要给弹性布局区域的父元素加 dispaly: flex

3.1布局原理

原理：

通过给父盒子添加flex属性，控制子盒子的位置和排列方式

3.2 flex父类属性

3.2.1 主轴方向 flex-direction ★

3.2.2 主轴上的子元素排列方式 justify-content ★

• space-evenly 可以使子元素之间的空隙大小相同

3.2.3 子类换/不换行 flex-wrap

• 因为flex布局中，子类默认是不换行的
  

3.2.4 侧轴上的子元素排列方式 align-items （单行）

• stretch：拉伸功能使用时，不要给子盒子设置高度
  ——————————

3.2.5 侧轴上的子元素排列（多行） ★

3.2.6 总结

3.2.7

3.3 flex子项属性

3.3.1 flex属性 ★

3.3.2

4.背景颜色渐变