css3 HTML5

常用css3属性

border-radius

box-shadow 边框阴影

background-size： 可以设置宽高；cover（整个背景图都放进来，但是有可能溢出）/contain（背景图被包含div 可能有些地方没有背景图）

动画：：transform/变形 旋转 rotate（30deg） 位移 translate（）缩放scale（）扭曲 skew

　　过渡 ：transition：width 2s ease（运动方式） 3S（延迟时间） //需要被触发。改变的时候才有效

　　动画 animate（run（动画名字）； 2s； ease（运动方式） ；3S（延迟时间）；forwards//返回最后的状态 ）  //页面一加载就执行

弹性盒模型

flex-grow：1 剩余空间剩余份数（分配剩余空间）

flex-direction /四个值 row/主轴排列顺序

align-items 纵轴对其方式 /flex-start  strch内容基线对其/

justify-contet 主轴对其方式

 

移动端适配 （响应式布局）：

1. c3 中 media query 

2. 百分比 

3. rem（原理根据屏幕宽度  求出html合理的fontsize）

 

H5新增

语意义化标签  input type color/data/email/num

JSON.parse 字符串转化成JSON对象

JSON.stringify() JSON对象转化成字符串

 

深克隆

//浅克隆
var person = {name: 'zs',age:20}
function clone(obj) {
    var result = {}
    for (key in obj) {
       result[key] = obj[key]
    }
    return result
}

//深克隆
var person = {name: 'zs',age:20,
father:{name: 'zss',age:120}}
function clone(obj) {
    var result = {}
    for (key in obj) {
        if (typeof obj[key] === 'Object') {
            result[key] = clone(obj[key])
        }
       result[key] = obj[key]
    }
    return result
}
//当对象中储存有对象  实例的这个对象属性变化 会映射到每一个例子的这个属性

深克隆方法二

let str = JSON.stringify(person)
//转化字符串不存在直接赋值

存储 1.cookie

  //设置过期时间
    var data = new Data()
    data.setData(20)
    //存储一个cookie
    document.cookie = 'name = 11; expires=' + data
    //取cookie
    document.cookie //取出来的是字符串 多个也是取字符串

都是本地存储

1.储存大小不同

cookie  4kb

localstorage 和 s  5mb

2.生命周期不同

• s关闭浏览器窗口就没了
• l一直有
• C可以设置过期时间（不设置浏览器关闭就没了）

3.请求头里都会携带cookie（同源的http请求）cookie访问有同源限制  每次发送请求都会携带

4.作用域不同 

• sessionStrage 不同窗口不共享
• cookie所有同源窗口共享
• localStrage所有同源窗口共享

cookie是js里的

localStorage sessionStrage  H5中

sessionStorage.setItem("lastname", "Smith")
sessionStorage.getItem("lastname"）
sessionStorage.removeItem("lastname"）
sessionStorage.clear() 清除所有

localStorage  和s操作一样

//服务器储存用户信息 浏览过商品  下次根据这个推荐

 

//移动端响应页面

//c3 media query

//兼容不同分辨率 百分比

//弹性盒模型

//rem 根据根元素 原理：根据屏幕的宽度设置html的font-size。

//1.移动端点透事件 点击时候会触发 click有个300ms延迟

//解决方案：fastclick

//2.移动端1px边框问题。

//解决方案： transfrom scale(0.5)