基础知识点
1, 水平垂直居中
子绝父相, 子盒子设置绝对定位, 设置 top:50%;left:50%,margin-top:-50%;margin-left:-50%;
子绝父相, 子盒子设置绝对定位, 设置 left & top & right & bottom 为 0;margin: auto;
伸缩盒子, 父元素设置 flex;justify-content: center;align-items: center;
利用 transform 属性, 需要设置子绝父相, 设置 top:50%;left:50%;transform:translate(-50%, -50%);
2, 圣杯布局
中间盒子设置宽度 100%, 左右 margin, 留出左右盒子的位置
左右盒子在通过定位至左右
3, 兼容性问题
标签样式在不同的浏览器各自的 margin 和 padding 差异较大, 解决方案: CSS 里 *{margin:0;padding:0;}
当在 a 标签中嵌套 img 标签时, 在某些浏览器中 img 会有蓝色边框; 解决方案: 给 img 添加 border:0; 或者是 border:none;
图片默认有间; 隙解决方案: 1) 给 img 标签添加左浮动 float:left;2) 给 img 标签添加 display:block.
4, 清除浮动的方法?(重点)
1. 父级 div 定义 height
2. 结尾处家空 div 标签 clear:both
3. 父级 div 定义 伪类: after 和 zoom
4. 父级 div 定义 overflow:hidden
5, 前端优化技巧
压缩 CSS,JS, 图片
2. 减少 http 请求次数, 合并 CSS,JS 合并图片 (雪碧图)
3. 使用 CDN
4. 减少 dom 元素数量
5. 图片懒加载
6. 静态资源另外用无 cookie 得域名
7. 减少 dom 的访问 (缓存 dom)
8. 巧用事件委托
9. 样式表置顶, 脚本置低
6,this 指向问题
一般来说, 谁调用, this 就指向谁, 特殊情况除外
普通函数调用, 此时 this 指向 Windows
定时器函数, 此时 this 指向 Windows
更改 this 指向的三个方法
1.call( ) 方法调用一个函数, 其具有一个指定的 this 值
fn.call(改变其 this 指向, [指定的参数] ) 如果指定了 null 或者 undefired, 则内部 this 指向 Windows
应用场景:1借用构造函数
2借用其他对象的方法
2.apply( ) 方法调用一个函数, 其具有一个指定的 this 值, 作为一个数组提供的参数
fn.apply(var1, var2) 应用: 把数组展开
应用场景: 把数组展开, 传递给调用的方法
3.bind 不会调用函数, 会返回一个新的函数
应用场景:1改变定时器内部的 this,2改变事件处理函数的 this
7,JSON 字符串转化方法
- JSON.parse(str); // 由 JSON 字符串转换为 JSON 对象
- JSON.stringify(obj); // 将 JSON 对象转化为 JSON 字符
进阶知识点
1, 设置分页符
2, 只能输入数字和小数点
3, 统计每一个字符串出现的次数
高难度知识点
怎样引入一个第三方的包?
require 与 import 的区别:
遵循规范:
require 是 AMD 规范引入方式
import 是 es6 的一个语法标准, 如果要兼容浏览器的话必须转化成 es5 的语法
调用时间:
require 是运行时调用, 所以 require 理论上可以运用在代码的任何地方
import 是编译时调用, 所以必须放在文件开头
本质:
require 是赋值过程, 其实 require 的结果就是对象, 数字, 字符串, 函数等, 再把 require 的
结果赋值给某个变量
import 是解构过程, 但是目前所有的引擎都还没有实现 import, 我们在 node 中使用 babel 支持
ES6, 也仅仅是将 ES6 转码为 ES5 再执行, import 语法会被转码为 require
在那调用第三方支付接口? 为什么?
前端调接口和后端调接口各有什么区别, 优势与特点
一般支付接口都是由后端和支付单位联系调取的, 前端调接口容易被劫持, 不安全.
对 web 前端感兴趣的小伙伴也可以加 小编 q 裙:
来源: http://www.jianshu.com/p/c15594cb3bf8