冷门知识
1.背景做模糊处理：
filter:blur(120px);背景做模糊处理,值越大越模糊.除了IE，其他浏览器上均能实现，但微信小程序的开发中支持不好
推荐博客地址：https://blog.csdn.net/longshelan_113/article/details/53994115
2.禁止用户选择文本，鼠标移上么有效果：
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}1滚动条框架mCustomScrollbar
http://manos.malihu.gr/jquery-custom-content-scroller/
2常用素材
http://sc.chinaz.com/jiaoben/160223351330.htm#down
2flex盒子布局部分属性
1.1*flex-direction:row | row-reverse | column | column-reverse
.row:横向从左到右排列(左对齐),---默认
.row-reverse:反转横向排列(右对齐,从后往前排列,最后一项排在最前面).
.column:纵向排列
.cloumn-reverse:反转纵向排列,从后往前排列,最后一项排在最上面
1.2*flex-wrap:nowrap | wrap | wrap-reverse
.nowrap:当子元素超出父元素时不换行,----默认
.wrap:当子元素超出父元素时自动换行,----相当于float后的排列方式+++++++(第四象限)
.wrap-reverse:反转wrap排列+++++++++++++++(第一象限)
1.3*order:num;
数值小的排在前面
1.4*align-content++++++++++++align-items
垂直方向多行的对齐方式++++++++++++++垂直方向单行的对齐方式
1.5*flex:0 1 auto;
123.flexbox-CSS3弹性盒模型flexbox布局完整版教程
http://caibaojian.com/flexbox-guide.html
********<html style="font-size:10px;">++++++规定html标签的font-size属性值为1rem*******
做移动端开发必须要写的
<meta name="viewport" content="device-width,initial-scale=1,maximum-scale=1">
怎么把不同移动屏幕尺寸设置rem呢,
用flexible框架,是阿里团队开发的,需要引入js和meta
| 自定义象限表示flex-wrap | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| 限 | 象 | 二 | 第 | 第 | 一 | 象 | 限 | ||
| 5 | 4 | 4 | 5 | ||||||
| 3 | 2 | 1 | 1 | 2 | 3 | ||||
| 3 | 2 | 1 | 1 | 2 | 3 | ||||
| 5 | 4 | 4 | 5 | ||||||
| 限 | 象 | 三 | 第 | 第 | 四 | 象 | 限 | ||
3.设备像素比dpr:
物理像素 / css像素(发光点:多少个物理发光点来显示一个css像素),可以用js中的
window.devicePixelRatio获取当前设备的dpr.