H5--大概的,没事看看

1.设置弹性盒
任何元素都可以设置
display:flex;
display:inline-flex //给行内元素设置弹性盒子

 display:-webkit-flex;   //webkit(是浏览器的内核，是谷歌浏览器和safari(苹果浏览器)的内核)
 display:-webkit-flex  //谷歌浏览器和safari(苹果浏览器)的内核
 display:-moz-flex  火狐浏览器的内核 
 display:-ms-flex  IE浏览器的内核  
 display:-o-flex  欧朋浏览器的内核

2.设置Flex布局以后，子元素的float、clear、vertical-align属性将失效

二、给容器设置的属性(6个)
1.flex-direction //设置弹性盒里面子元素的方向，默认是水平排列的
row(默认值:水平) row-reverse（水平方向的翻转） column(垂直) column-reverse（垂直方向的翻转）

2.flex-wrap //设置换行
nowrap(默认值:不换行) wrap wrap-reverse

3.flex-flow //复合属性 包括direction,wrap 默认值:row nowrap

4.justify-content //水平方向的排列方式
flex-start(默认值 左对齐) flex-end右对齐 center居中 space-between两端对齐 space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

5.align-items //垂直方向的排列方式
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
stretch（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度

6.align-content //多根轴线的对齐方式
stretch(默认值) 轴线占满整个交叉轴
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
space-between 两端对齐
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
强制让文字在一行显示 white-space:nowrap;
设为 Flex 布局以后，子元素的（）、（）和（）属性将失效？ float clear vertical-align
所有网站内容在一屏高度显示，页面中不出现滚动条的页面形式叫做 单屏网页

三、项目的属性（子元素）
1.order //定义每一个项目的排列顺序，数值越小，排列越靠前，默认为0

2.flex-grow //定义项目的放大比例,默认为0
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.flex-shrink //定义项目的缩小比列，默认为1 负值对该属性无效
如果所有项目的flex-shrink属性都为1，当空间不足时，都将比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4.flex-basis //定义了在分配多余空间之前，项目占据的主轴空间（main size）

5.flex //复合属性(flex-grow,flex-shrink,flex-basis) 默认值:0 1 auto
该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)
建议优先使用这个属性，而不是单独写三个分离的属性

6.align-self //允许单个项目有与其他项目不一样的对齐方式,可覆盖
align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
auto flex-start flex-end center baseline stretch

--------------SASS--------------
1.scss/less都是css的预处理器，scss比less更强大。

2.编译风格
nested:嵌套缩进的css代码，默认值
expanded：没有缩进的。扩展的css代码
compact: 简洁格式的css代码
compressed:压缩后的css代码

3.变量 $开头

 $height:100%    
 div{ 
   height:$height;
    }  

计算
4.标签嵌套

  div{
    h1{
      height:$height
       }
     }

属性嵌套 &引用父元素

 div{
    border：{
        radius:5px;
      }
    }

5.注释
//单行注释 不会编译到css文件里面，只在scss源文件里面

/多行注释/ 会编译到css文件里面

6.继承
@extend class1;

7.@mixin 名字{
重复的样式
}
调用：@include 名字

@mixin 强大之处在于可以设置参数和缺省值

  @mixin justify($justify:center){
            justify-content:$justify;
               }

@include justify; //默认值
@include justify(flex-end) //传过来的参数

8.@import “_minxin.scss” //引入外部文件

9.自定义函数(转为rem)

  @function 名字pxTorem($px){

     //$px为需要转换的字号
     @return $px / 37.5px * 1rem;   37.5px //浏览器默认字体

    }
  调用:div{
        width:名字(30px);

      }

em rem px

rem //相对于html(根元素)
em //相对于父元素，有继承性

1.引入flexble.js //用来做适配用的
2.在自己的scss文件里面，引入common.scss._mixin.scss
3.在自己的scss文件写的时候，需要调用pxTorem(20px),用来把px转成rem

rem布局(自适应布局): 一套代码适配不同的终端

//线(1像素)的缩放
height:1px;
transform:translatesY(0.5);
background:

-------关于设备-------
一、关于设备
1.三个需要了解的概念
PPI:可以理解为屏幕的显示宽度
DPR:设备像素比:物理像素/逻辑像素
Resolution:就是我们常说的分辨率
二、像素
像素分为三种：
1.设备像素
设备像素也称为物理像素
2.设备独立像素
3.css像素
在没有缩放的情况下，1个css像素等同于一个设备独立像素

4.获取当前设备的dpr（设备像素比）
window.devicePixRatio
三、viewport
移动端讲师口划分为三类 布局视口 视觉视口 完美视口
1.布局视口
怎么获取布局视口的宽度
①document.documentElement.clientWidth ②document.documentElement.clientHright
2.视觉视口
用户正在看到的网页的区域
window.innerWidth //视口的宽度
window.innerHeight //视口的高度

3 .完美视口 （布局视口等于视觉视口的宽度） css像素等于设备独立像素
将布局视口的宽度设置为设备独立像素的宽度
screen.width //设备独立像素的宽度
screen.height //设备独立像素的高度

     1个css像素=4个物理像素

4.viewport默认有6个属性
width:设置viewport的宽度,这里可以为一个整数，又或是字符串"width-device"
inital-scale:页面初始的缩放值，为数字，可以是小数
minimum-scale:允许用户的最小缩放值，为数字，可以是小数
maximum-scale:允许用户的最大缩放值，为数字，可以是小数
height:设置viewport的高度
user-scalable:是否允许用户进行缩放,'no’为

5.判断当前设备是一个安卓设备还是iphone设备
window.navigation.appVersion.match(/设备/gi);

四、iconfont
1.下载
a.我的图标 点击需要的图标 添加到购物车
b.点击购物车 点击添加至项目
c.如果已经创建过项目，那就直接点击项目。如果没有创建过项目，点击右边的加号，新创建一个项目