2019知识点

https://overtrue.me/  easywechat作者，还有好多好用的插件

1.子元素选择器：>，也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素。 
#wrap > .inner {color: pink;}
2.相邻兄弟选择器：+，它只会匹配紧跟着的兄弟元素。 
#wrap #first + .inner {color: #f00;}
3.通用兄弟选择器：~，它会匹配所有的兄弟元素(不需要紧跟)。 
#wrap #first ~ div { border: 1px solid;}

4.重叠的外边距,当上下垂直的外边距同时存在时会发生外边距折叠。就是只保留两个margin值中较大的那个。
<div class="div1">
    <div class="div2"></div>
    <div class="div2"></div>
</div>
.div1{
    width: 600px;
    height: 200px;
    border: 1px solid #aaa;
    margin: 50px auto;
}
.div2{
    width: 50px;
    margin: 20px;
    border: 1px solid red;
    height:50px;
}
两个div上下间距的margin只有50px

4.重置css样式 为了避免不同浏览器的不能默认样式所带来的的麻烦，重置css样式无疑是最好的选择。
* { margin: 0;padding: 0;box-sizing: border-box;}
box-sizing属性有两个值：
1)content-box（默认）： -内容的实际尺寸。所有的padding和边框值都不包含。
2)border-box ： padding与边框包含在元素的宽度或高度中。比如一个元素设置为：width: 100px;box-sizing:border-box,那么它的总宽就是100px,包括：padding与边框。
5.css样式使用短横线命名

5.js返回上一页
1)onClick="javascript :history.back(-1);"
2)window.history.go(-1);

6.修改input、textarea元素中的placeholder属性样式
input::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */
input:-moz-placeholder{}                  /* Firefox版本4-18 */
input::-moz-placeholder{}                  /* Firefox版本19+ */
input:-ms-input-placeholder{}           /* IE浏览器 */

7.准备了A B两套风格的促销页面，想让一半人看到 A 页面，另一半人看到 B 页面，这样来测试两种的转化成交效果
使用nginx的ngx_http_split_clients_module模块借助这个模块的 split_clients 指令完成分流
具体参考：https://segmentfault.com/a/1190000019592627

8.vue解决跨域问题  config/index.js，修改dev里的proxyTable
具体参考：https://segmentfault.com/a/1190000019582944

9.免费的 API接口：https://www.free-api.com/

1. 物理像素
物理像素是手机的分辨率，在同一个手机上，物理像素是出厂就设置好的，如iPhone6的物理像素是750*1334 
2. 逻辑像素
逻辑像素是手机的逻辑分辨率，包括css像素
3. 设备像素比
物理像素/逻辑像素=DPR
4. viewpoint概念
用于设置页面宽度；
width=device-width，此时页面的宽度恰好等于设备的浏览器宽度
width=640，此时页面的宽度大于设备浏览器宽度，会出现横向滚动条
initial-scale：页面的初始缩放值，1不进行缩放，0.5放大两倍