移动端特点：

    问： PC端网页和移动端网页的有什么不同？
    答： 1：PC屏幕大，网页固定版心
         2：手机屏幕小， 网页宽度多数为100%
    问： 如何在电脑里面边写代码边调试移动端网页效果？
    答： 谷歌模拟器
    

屏幕尺寸：

    目标：了解屏幕尺寸概率
          布局使用自适应：320-768之间
    屏幕尺寸：
           1：指的是屏幕对角线的长度，一般用英寸来度量
           2：ppl：单位英寸内的物理像素点个数，值越大，屏幕越清晰
           3：物理像素点：形成图像的最小单位
           

分辨率

    目标：    了解移动端主流设备分辨率
   分辨率分类 1：物理分辨率是生产屏幕时就固定的，不可被软件和（驱动）改变的（出厂设置）
             2：逻辑分辨率是由软件（驱动）决定的，页面一般都是根据逻辑分辨率去设计的（软件设置）
             
     思考：制作网页参考物理分辨率还是逻辑分辨率？
            答：逻辑分辨率
             

视口

      目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
      
      手机屏幕尺寸都不同， 网页宽度为100%
         **网页的宽度和逻辑分辨率尺寸相同**
          
       **移动端默认页面宽度980px，在没有视口标签的情况下**
       
   理想视口标签：meta：vp
        width=device-width ————————设备的宽度和视口（页面）宽度相等
        initial-scale=1.0  ————————表示现在写多少像素，在页面之中就展示多少像素，（不缩放）
        minimum-scale=1，maximum-scale-1，
        user-scalable=0  ————禁止用户缩放首页，防止页面布局被打乱
        
        目标：网页宽度和设备宽度(分辨率)相同。
        l 解决办法：添加视口标签。
        2 视口：显示HTML网页的区域，用来约束HTML尺寸。
        
        
        

百分比布局：又称流式布局

    目标：能够使用百分比布局开发网页
        百分比布局：又称流式布局
        效果：宽度自适应（百分比）高度固定
        

Flex布局

    目标： 能够使用Flex布局模型灵活、快速的开发网页
    flex布局：又称弹性布局
    1：是一种浏览器提倡的布局模型
    2：布局网页更简单，灵活
    3：避免浮动脱标的问题
    

flex组成部分

    flex：由最外面的盒子，添加了display：flex。 叫弹性容器。特点：1：默认宽度就是父盒子的宽度，高度：由内容撑开。
    弹性容器里面的小盒子：叫弹性盒子：就是弹性容器的最近一级的子级。特点：1：默认宽度由内容撑开，默认高度和父元素一样高。
    2：弹性盒子没有块级元素,行内元素，行内块元素之分，统统叫做弹性盒子，因为弹性盒子统统可以设置宽高
    3：弹性盒子默认不会换行，默认一行显示，会沿着主轴方式一行显示
    4：要注意弹性盒子的概率。
    
    主轴：
    1：justify-content-flex-start：默认值。起点左边依次排列（）
    2：justify-content-flex-end：  右边依次排列（）
    3：justify-content-center：    沿主轴居中排列（jcc）
    4：justify-content-space-around：将空白空间均分之后，环绕在弹性盒子的两侧--第一个和最后一个弹性盒子与弹性容器之间的距离就是弹性盒子与弹性盒子之间的距离的2/1（jcsad）
    5:justify-content-space-between：空白空间会均分，然后存在于弹性盒子与弹性盒子之间：第一个和最后一个弹性盒子与弹性容器没有距离
    6：justify-content-space-evenly：弹性盒子和弹性盒子之间的距离等于第一个和最后一个弹性盒子与容器之间的距离
    
    侧轴控制的是垂直方向的对齐方式：（ai）
    1：align-items:flex-start：默认值，起点开始依次排列
    2：align-items:flex-end：  结束的地方，下面显示
    3：align-items:center：垂直居中（aic）
    4：align-items:stretch：默认值弹性盒子沿着主轴线被拉伸铺满至整个容器
    
    
    align-self：（as）属性值和ai一样的
       as是给需要单独控制侧轴方向对齐的弹性盒子添加
       

伸缩比：

    属性：flex：（值，取整数）
         flex：1：是给弹性盒子添加，所有的盒子都添加相同的flex值，均分弹性容器的宽度，如果flex值不同，根据比例进行分配。
               2：其他盒子宽度固定：只有一个盒子设置了flex：1--占据父元素剩余的宽度