弹性盒子 / 怪异盒 / 媒体查询

弹性盒  display:flex;

一//flex的属性（给父元素设置 控制灵活元素）
flex-direction 设置主轴
     row   x轴顶端对齐（左）默认值
     row-reverse x轴底端对齐（右）
     column  y轴顶端对齐（上） 默认值
     column-reverse y轴底端对齐（下）     
flex-wrap 设置换行
         nowrap  挤压内容不换行 默认值
         wrap 自动换行
         wrap-reverse  自动换行，反向显示
      （根据主轴决定挤压的是宽还是高）
flex-flow 复合属性       flex-flow：主轴  换行
justify-content   主轴对齐方式
         flex-start 主轴的顶端对齐 默认值
         flex-end   主轴的底端对齐
         center      主轴居中
         space-between   两端对齐，中间距离平分
         space-around 类似每个盒子左右平分加margin
         space-evenly  每个盒子之间间距都一样
align-items  侧轴对齐方式（要和flex-direction一起用）
        flex-start 侧轴的顶端对齐 默认值
        flex-end   侧轴的底端对齐
        center      侧轴居中
        baseline  基线对齐 根据盒子中内容的位置对齐
        stretch     侧轴拉伸  如果要设置宽/高拉伸，就不能设置宽/高的值  如果设置了该属性 属性值只能是stretch （也可以不设 因为不设宽/高时stretch为默认值）
align-content 侧轴行对齐（只适用于多行）
    flex-start  侧轴顶端对齐 取消行间距
    flex-end    侧轴底端对齐 取消行间距
    center       侧轴居中 取消行间距
    space-between   两端对齐，中间距离平分
    space-around 类似每个盒子左右平分加margin
    space-evenly  每个盒子之间间距都一样

二//给灵活元素设置的属性 控制自己
            order：0  数值越小越排前 0是默认值 可设负数
align-self 单独设置侧轴的对齐方式
                    flex-start   侧轴的顶端对齐
                    flex-end     侧轴的底端对齐
                    center       侧轴居中
                    stretch      侧轴拉伸 
                    auto         继承父元素align-items的值
flex-grow：0  设置拉升 默认值是0    灵活元素的宽/高值相加小于父元素的宽/高值
flex-shrink:1  设置收缩 默认值是1 （因为超出部分不显示） 灵活元素的宽/高值相加大于父元素的宽/高值
flex-basis：px/% 默认值为auto  0%由内容撑开
复合属性flex    flex：flex-grow flex-shrink flex-basis
              注意： 最后一个flex-basis值加了百分号，这是因为简写法中的flex-basis必须带单位，因此这里要么加百分号，要么就写0px。
            缩写「flex: 1」, 则其计算值为「1 1 0%」
            缩写「flex: auto」, 则其计算值为「1 1 auto」
          「flex: none」, 则其计算值为「0 0 auto」
            flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

怪异盒模型
box-sizing：
     border-box 怪异盒(添加border/padding宽高不变)
     content-box标准盒
弹性盒（使用弹性和设置内容水平垂直居中）
     父元素   display：flex
     子元素   margin：auto
弹性盒下的子元素也称灵活元素，灵活元素的元素类型如果是内联，也能设置宽高！！！

媒体查询

@media  all  and  （min-width：1200px）{属性{属性的样式}}

/* 竖屏的样式 */
       @media screen and (orientation:portrait){
       }
/* 横屏的样式 */
       @media screen and (orientation:landscape){
           }

@media  all  and  （min-width：1200px）and（max-width：px）{属性{属性的样式}}

移动端

重点设置  禁止网页内容缩放，浏览器多大就显示多大内容，防止比例失调
设备像素比  DPR    设置像素比  =物理像素  /  逻辑像素
        因为现在手机都是高清屏，同样的大小需要方更多的px，所以ps测量的距离和真正设置的像素，是有一定的比值关系，设备像素比
          物理像素      ps测量的像素
          逻辑像素       需要用css设置设置的px

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    width = device-width：宽度等于当前设备的宽度
    initial-scale： 初始的缩放比例（默认设置为1.0）
    minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
    maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
    user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
设计稿主流的分辨率
        移动端设置     物理像素      逻辑像素       dpr
        iphone4/5         640px            320px          2
        iphone6/7/8     750px            375px          2
        6+、ipaid      1080或1242     414px           3