html5 移动端-1

移动端适配

IE（怪异）合模型：设置宽高后，占地面积就不会发生改变，增加padding后会压缩内容区域的大小，开启怪异合模型：box-sizing：border-box；
标准合模型：宽高只是设置内容区域的大小，设置padding后总的占地面积会发生改变。

弹性盒子

弹性盒子是css3中新的布局模式，又叫收缩合模型，开启弹性盒子display：flex；
容器默认存在两根轴：水平轴main axis(方向位置都会变不能倾斜)，垂直轴cross axis
主轴开始位置main start 结束位置 main end；
交叉轴开始位置cross start 结束位置 cross end;
主轴上的位置变化
justufy-content:

• flex-start；开始位置 默认
• flex-end；结束位置
• center；中心位置
• space-around；两端对齐 元素之间的距离=2*元素到边框的距离
• space-between；元素贴着两边，元素之间距离相等
  主轴的方向
  flex-direction:
• row 从左到右
• row-reverse从右到左
• column 从上到下
• column-reverse 从下到上

交叉轴上的对齐方式
align-items:

• flex-start;交叉轴的起点对齐
• flex-end;交叉轴的终点对齐
• center；交叉轴上中点对齐
• baseline；根据第一行文字的基线对齐

开启换行弹性合模型下默认不换行
flew-wrap:

• nowrap;默认不换行
• center；换行
• wrap-reverse;倒序换行

align-content 的功能和align-item 类似相同点都是设置自身子元素在自身上的对齐方式
不同点：改属性必须是多行的时候，对单行无效，同时可以去掉多余的行间距。
box-shadow：盒子阴影；
属性：

1. 水平位置的偏移
2. 垂直位置的偏移
3. 模糊度
4. 阴影面积
5. 阴影颜色
6. 内外阴影outset 外 inset内
   元素的排序需要将当前层级的每个元素都排序，否则: 排序的元素和 未排的元素按照两套顺序排列

			  .box:nth-child(1){
                   order: 3;
              }
              .box:nth-child(2){
                   order: 2;
              }             
              .box:nth-child(3){
                   order: 1;
              } 

元素的缩放
flex-shrink元素的缩放：默认比例；假如一个大div300px内有5个div宽98px
超出部分/元素的总个数 = 每个元素要收缩的面积

              .main>div:nth-child(1){
                   flex-shrink:2;
                   
              }
              .main>div:nth-child(2){
                   flex-shrink:1;
              }             
              .main>div:nth-child(3){
                   flex-shrink:1;
              }             
              .main>div:nth-child(4){
                   flex-shrink:0.5;
              }    
              .main>div:nth-child(5){
                   flex-shrink:0.5;
              }  

元素的放大：flex-grow 父级500px 三个子元素一个100px
未占面积/元素个数（分配分数）= 每个元素放大的面积

              .mis>div:nth-child(1){
                   flex-grow:2;
              }
              .mis>div:nth-child(2){
                   flex-grow:2;
              }
              .mis>div:nth-child(3){
                   flex-grow:1;
              }