JS CSS HTMl总结一.CSS 总结。 1.margin margin-right 和 margin-bottom

文本不会换行： white-space:nowrap

文本换行 word-break :break-all

一.CSS 总结。

1.margin

margin-right 和 margin-bottom 元素不动，会随着px去改变方向，

margin-left和 margin-top元素会随着px去改变方向.

2.flot

clear:both清除浮动,

BFC 可使用overflow: hidden 内部整么发生变化都不会触发外部变化解决脱离文档。

== 和 ===

js在比较的时候如果是 == 会先做类型转换，再判断值得大小，如果是===类型和值必须都相等

4.块状元素&内联元素？

display: block/table;有div h1 h2 table ul ol p等

display: inline/inline-block;有span img input button等

5.盒模型宽度计算

offsetWidth =(内容宽度+内边距+边框),

无外边距box-sizing: border-box;

6.margin负值问题

margin-top和margin-left负值,元素向上、向左移动

margin-right负值，右侧元素左移,自身不受影响

margin-bottom负值,下方元素上移,自身不受影响

7.BFC理解

BFC理解与应用一块独立渲染区域,内部元素的渲染不会影响边界以外的元素

形成BFC的条件

BFC的常见应用,清除浮动

8.float布局

圣杯布局和双飞翼布局的技术总结

使用float布局

两侧使用margin负值,以便和中间内容横向重叠

防止中间内容被两侧覆盖,一个用padding一个用margin

*手写clear fix */

clearfix: after {

content: display: table;clear: both;

}

9.flex布局

flex画三个点的色子 /.box {display: flex; / flex布局 /justify-content: space-between; }
两端对开/.item:nth-child(2) {

align-self: center; /第二项居中对齐/

}
.item:nth-child(3) {

align-self: flex-end; /第三项尾对齐/

}

10.居中对齐的实现方式

水平居中

inline元素: text-align: center

block元素: margin: auto

absolute元素: left: 50% + margin-left负值

11.居中对齐的实现方式

垂直居中

inline元素: line-height的值等于height值

absolute元素: top: 50% + margin-top负值

absolute元素: transform(-50%, -50%)

absolute元素: top, left, bottom, right = 0 + margin: auto

12.line-height如何继承

写具体数值,如30px ,则继承该值(比较好理解)

写比例,如2/1.5 ,则继承该比例(比较好理解)

写百分比,如200% ,则继承计算出来的值(考点) (重要)

二.JS总结

1.深拷贝使用：

let obj1 = {
  age: 20,
  name: "xxx",
  addRess: {
    city: "shenzheng",
  },
  arr: ["1", "2", "3"],
};
const obj2 = deepClone(obj1);
obj2.addRess.city = "2";

/**
 * 使用深拷贝
 */

function deepClone(obj = {}) {
  if (typeof obj !== "object" || obj == null) {
    return obj;
  }
  let result;
  if (obj instanceof Array) {
    result = [];
  } else {
    result = {};
  }
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key]);
    }
  }
  return result;
}

2.typeof能判断哪些类型识别所有值类型识别函数判断是否是引用类型(不可再细分)

3.可时使用===何时使用==

除了== null之外,其他都一律用例如:
const obj ={x: 100}if (obi.a = nulL)
相当于:
if (obj.a === null ll obj.a === undefined) {}

4.值类型和引用类型的区别

1. 基本类型： string,number,boolean,null,undefined

2. 引用类型： Function,Array,Object------技术对象系列，typeof()这个三种类型得到的都是object

const obj1= X: 100, y: 200}
const obj2 = obj1
let x1 = obj1.X 
obj2.x = 101x1 = 102
console. log(obj1) // { x: 101 }

5.类和继承

    // 父类
    class Eat {
      constructor(name, number) {
        this.name = name + "牛";
        this.number = number;
      }
      sayHi() {
        console.log(`sayHi ${this.name} , ${this.number}`);
      }
    }

    // 子类
    class Student1 extends Eat {
      constructor(name, age) {
        super(name);
        this.age = age;
      }
      ageOn() {
        console.log(`ageOn ${this.name} , ${this.age}`);
      }
    }

    // 子类
    class Student2 extends Eat {
      constructor(name, education) {
        super(name);
        this.education = education;
      }
      educationOn() {
        console.log(`educationOn ${this.name} , ${this.education}`);
      }
    }
    let studentData = new Student2("大哥", "语文");
    studentData.educationOn();
    studentData.sayHi();
    console.log("studentData", studentData);
    
    //打印参数如下
    educationOn 大哥牛 , 语文
    sayHi 大哥牛 , undefined
    studentData Student2 {name: '大哥牛', number: undefined, education: '语文'}

6.原型关系每个class都有显示原型prototype 每个实例都有隐式原型_proto_. 实例的_proto_指向对应class的prototype

理解：隐示类型是显示类型new 出来的，隐示类型通过显示类型得出了三角关系Student显示类型和隐示类型，等同于People显示类型,People继承Object。每一级都会找，如果找不到就会找隐示类型最后得出一个链, 最后到Object原型在网下找就是null. 不然就会乱了。

7.作用域和闭包作用域分为：全局作用域，块级作用域，函数作用域。

闭包是指有权访问另一个函数作用域中的变量的函数

闭包：所有的自由变量的查找，是在函数定义的地方，向上级块级作用域查找。不是在执行的地方查找。

8.this指向手写bind 执行时候调用，不是定义调用

9.闭包数据修改可以这么写

10.同步和异步区别：异步：不会阻塞代码执行，代码该整么执行还会整么执行，到时候触发异步回调函数执行就执行非常方便。同步：会阻塞代码执行，如果等待没完成后面就不执行了单线程：Js是单线程语言，只能同时做一件事。异步解决单线程问题。异步应用场景：网咯请求和定时任务

11.Promise 手写

const getData(res){
 return new Promise((resolve,reject)=>{
   $.ajax({
     res
       }).success(data){
       resolve(data)
     }).error(err){
       reject(err)
     }

event loop 异步和同步的执行过程

13.Promise 有三种状态

pending{不会触发then和catch},resolved{会触发then},rejected{会触发catch}

then和catch 只要里面不报错返回的是resolved的Promise，报错返回rejected的Promise

14.async,await 1,解决了异步回调callback hell, 2.Promise then catch 链式调用，但也是基于回调函数， 3.async,await 是同步写法，解决了回调函数， 4.消灭异步回调函数，不需要回调写异步代码。有了promise可以用链式调用。 5.执行async函数，返回promise对象， 6.await 相当于Promse的then, 7.try...catch可以捕捉异常，代替了Promise的catch

宏任务：setTimeout,seInterval,Ajax,Dom Dom渲染后触发是浏览器规定微任务：Promise async/await Dom渲染前触发是ES6规定微任务比宏任务快执行。存放地方不同

16.Dom

17.Bom

16.ajax GET 请求手写

POST 请求手写 true异步

      //  ajax 封装
      ajax(url) {
        const p = new Promise((resolve, reject) => {
          // 定义XML
          const xhr = new XMLHttpRequest();
          // 执行
          xhr.open("GET", url, true);
          // 设置请求头
          xhr.setRequestHeader("token", store.getters.token); 
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                resolve(JSON.parse(xhr.responseText));
              } else if (xhr.status === 404) {
                reject(new Error("404 not defind"));
              }
            }
          };
          xhr.send(null);
        });
        return p;
      },
      
     // 调用
       async initList() {
        methods
          .ajax("/fm-equipment-standard/em_standard_base/page")
          .then((res) => {
            console.log("ajax", res);
          })
          .catch((e) => {
            console.log("e", e);
          });
                     }

17.同源策略和跨域

18.cookie

18.HTTP

19.headers 请求头客户端发布服务端

服务端向客户端

缓存理解

强制缓存：如静态资源可被缓存（js,css,img）在请求头内用Cache-Control 两个常用属性max-age 会做为缓存，no-cache 不用强制缓存，交给服务端处理。

协商缓存：服务端判断客户端资源如js,img是否和服务端资源一致如果一致就用本地缓存状态码返回304没有被修改，服务端返回标识给客户端，客户端带着标识范问服务端如有同样标识就返回304，或返回新资源标识。

协商缓存服务端判断客户端资源如js,img是否和服务端资源一致如果一致就用本地缓存状态码返回304没有被修改，服务端返回标识给客户端，客户端带着标识范问服务端如有同样标识就返回304，或返回新资源标识。

协商缓存生效，返回304
协商缓存失效，返回200和请求结果结果

三次握手和四次挥手

三次握手： 1.第一次握手建立连接时，客户端发送syn包到服务器，客户端并且进入等待状态。 2.第二次握手服务器收到syn包并确认客户的syn包，同时也发送自己的syn包，服务端并且进入等待状态。 3.第三次握手客户端收到服务端的syn+ACK包，向服务器发送确认包ACK，客户端和服务端TCP连接成功，完成三次握手

TCP四次挥手： 1.客户端发出报文，客户端进入终止等待状态。 2.服务器收到报文，并发出接受报文，服务端关闭等待状态。 3.客户端收到报文后，客户端进入终止等待状态。 4.服务器数据发送完毕后，就向客户端发送连接释放报文，服务端进入确认状态。 5.客户端收到报文后，发出确认，关闭状态。 6.服务器收到客户端确认后，结束TCB连接。

18.HTTPS (重要)