vue.js写的饿了么站https://www.vue-js.com/topic/5bea8b65fffaa30f33091d66
瀑布流详细介绍网址:https://www.cnblogs.com/Jabin/p/5879646.html
冷门知识
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
3jQuery插件库
4css常用的奇淫技巧
https://blog.csdn.net/crystal6918/article/details/53841984
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.
4*offsetWidth和offsetHeight = 内容 + 内边距 + 边框 只能获取到元素的宽高(+ 内边距 + 边框)
.style.width和.style.height 只是行内的宽高,既可以获取到元素的宽高,也可以设置
a) style.left只能获取行内的,而offsetLeft则可以获取到所有的;
b) offsetLeft 可以返回没有定位盒子距离左侧的位置;而style.left不可以,其只能返回有定位盒子的left;
c) offsetLeft 返回的是数字,而 style.left 返回的是字符串,除了数字外还带有单位:px; 注意:可以用parseInt进行转化;比如:styleLeft='300px' ---> parseInt(styleLft) ---> 300 ;
d) offsetLeft是只读的,而style.left是可读写;
e) 如果没有给 当前 元素指定过 top 样式,则 style.top 返回的是空字符串。