前端总结

422 阅读2分钟

**实现左右中间自适应,左右固定,

1,利用浮动去实现。

2,利用定位去实现,

3,利用flexbox去实现

4,利用表格布局去实现 table-cell

5,grid网格布局

对象

1,对象就是一个实例

new 操作符。以这种方式调用构造函数实际上会经历以下 4

个步骤:

a,创建一个新对象,

b,改变改变构造函数的this指向,

b,执行这个构造函数中的代码,为对象添加属性,

d,返回新对象

跨域请求

jsonp

cors

websocket

postMessage

提升页面性能

资源压缩合并,减少http请求

非核心代码时间异步加载,

利用浏览器缓存,

使用cdn

浏览器预解析dns

实现水平垂直居中

第一种方法已知元素宽高

使用absolute,并且给给宽高设置50%,

第二种方法未知元素宽高

用css3的方法,使用transform translate(-50%,-50%)

第三种方法使用flex布局

用display:flexrnhou justify-centent:center

align-items:center

css3动画内容

css3动画有三个重要属性animation和动画绑定,需要@keyframes去配合 transform(一般我需要用来改旋转之类) transition(改宽高透明度之类的)

构造函数不需要显示的返回值。使用new来创建对象(调用构造函数)时,如果return的是非对象(数字、字符串、布尔类型等)会忽 而略返回值;如果return的是对象,则返回该对象。

删除数组,splice

img高度问题

父元素设置宽度以后img设置100%是生效的,而父元素设置max宽度,100%不生效

js作用域问题

JavaScript的函数作用域是指在在函数内声明的所有变量在函数体内始终是可见的,也就是说在函数体内变量声明之前就已经可用了。

es6常用功能总结

let、const

多行字符串,模板变量 (``和${})

块级作用域

函数形参可以声明默认参数

箭头函数

区分判断document.body和document.documentElement前者值得是body,后者指的是html元素节点

windows.location.href是旧的写法,新的标准推荐用document.URL替代。

history.scrollRestoration = "manual" 为是否记录用户页面滚动条,所以导致在页面加载的时候无法使用scrollTo

document.title,访问页面的title并可以修改

css3新属性object-fit,改变图片缩放

position:sticky 粘性定位

**