css，js基础总结（面试笔记）

一.CSS基础

1.1 盒模型

本质是一个盒子，对周围和其他html元素进行封装包扩border padding margin content，允许我们

对盒子进行操作

1.2.让盒子水平垂直居中的方法

  1.使用子绝父相，在子元素设置 margin为0，在设置top，left，  right，bottom为0

  2.使用定位，再子盒子内top：50%，left：50%，transform：translate盒子本身的-50%

  3.使用弹性布局 ，

  在父盒子display：flex

  在子盒子内  justify-content：centent；

   align-items：centent

4. 利用cale（父盒子-子盒子）/2，计算出top跟left的距离

 直接设置top跟left负距离

5.直接margin-left跟margin-top

1.3.css确定优先级

css的继承性

优先规则：最近的祖先元素比其他祖先元素优先级高

优先规则：直接样式比祖先样式优先级高

选择器的优先级

优先规则：内联样式＞id选择器＞

类选择器 = 属性选择器 = 伪类选择器 ＞标签选择器 = 伪元素选择器

1.4.浮动的工作原理和解决方法

工作原理：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

解决方法：

1.溢出隐藏 overflow：hiddeen

2.添加一个空标签，style="clear：both"缺点是多出很多无意义标签

3.使用一个br标签和其自身的html属性clear=all

4.overflow：auto

5.采用伪元素方法清除，设置

content为空，

dsiplay：block，

clear：both

visibility：hiddeen

1.5.css隐藏元素的方法

1. display设置为none

2. 通过position的方式将元素定位到远离页面

3. 通过设置透明度opacity：o 隐藏元素

4. visibility:hidden 

1.6css的元素分类

块级元素：div ul li tabbar h2

特点：独占一行，可以设置宽高，不设宽的情况下，宽度跟父元素相同。可通过display：block设置为块级元素

行内元素：a span br

特点：不能设置宽高，内容高度由文本填充，一行可以有多个元素，行内元素与行内元素有空隙间隔

可通过display：inline设置

行内块元素：image input

特点： 一行可以有多个，也可设置宽高，可通过display：inline-block来设置

1.7.Link标签和 @import

link标签除了可以加载css，还可以定义ref连接属性。

@import直接加载css

link直接加载同时显示CSS。

@import 先下载再加载

1.8.css三角形

宽高必须为0

border：2px solid transparent（设置颜色为透明）

面向那边就让那边的颜色显示 border-bottom-color

1.9 外边距塌陷

两个嵌套关系的块级元素，父元素有或者没有外边距（margin-top）时，子元素也有外边距，则连个外边距合成一个上外边距，造成外边距塌陷

解决方法：

设置一个border或者一个padding，但会撑大盒子 

触发BFC块级格式化上下文

1. 父元素的overflow为auto或hidden
2. 父元素的display的值为table-cell或inline-block

2.0 cs3新特性

1.文本阴影  tetx-shadow  box-shadow

2.圆角边框 border-radius

3.transform过渡

4.线性渐变 background-image:linear-gradient background-color:linear-gradient

二.JacaScript基础

2.1栈和堆

js的数据类型主要分为两大类，一是简单数据类型，二是引用数据类型

简单数据类型：string ，Number,Null,Boolaen,Undefing

引用数据类型: Function, Array,Object

什么是栈和堆

栈：由操作系统自动分配的内存，自动释放，占据固定大小空间  

堆：由操作系统动态分配的内存，由程序员进行释放，也可由垃圾回收机制回收，

栈跟堆的区别

基本数据类型的值存放在栈中，引用类型的值存放在堆中

基本数据类型有固定的大小和值，存放在栈中，而引用类型不确定大小，但其引用地址是固定的，存放在栈中，指向存在堆中的对象

基本类型在环境执行后销毁，而引用类型只有在引用变量不存在时，会被垃圾回收机制回收

2.2创建对象的几种方式

1.使用object构造函数创建

var parson = new Object()
parson.name = "米奇妙妙屋"
console.log(parson.naem);

2.使用对象字面量表示法

    var parson = {
      name:'jhhh'
    }
    console.log(parson.name);

3.使用自定义构造函数创建对象

    // 3.自定义构造函数
    function Parson(uname,age,sex) {
      this.uname = uname;
      this.sex = sex;
      this.age = age
    }
    var ldh = new Parson('刘德华',18,'男')
    var zxy = new Parson('张学友',18,'男')
    console.log(ldh);
    console.log(zxy);

4.工厂模式创建对象    

    function creatPerson(name,age) {
      var obj = new Object();
      obj.name = name;
      obj.age = age
      return obj
    }
    var ldh = creatPerson('刘德华',18)
    console.log(ldh);

2.3. 作用域链

作用域链：内部函数访问外部函数的变量，采取的链式查找的方式来决定取那个值，这种结构称为作用域链，就近原则

2.4 继承对象的方法

2.5 什么是闭包，为什么要使用，闭包的利弊

简单来说，闭包就是内部函数调用外部函数的变量，让这些变量始终保存在内存中，不会被垃圾回收机制回收

作用：延长变量的作用范围

利：减少命名冲突，不会被回收垃圾机制回收，

弊：过多使用闭包，会使内存变大，影响浏览器性能，造成内存泄漏

2.6.JS延迟加载的方式

1.defer属性

用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

2. async 属性

不让页面等待脚本下载和执行，从而异步加载页面其他内容。

3.使用setTimeout延迟方法

4.让JS最后加载

把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

2.7 什么是跨域

浏览器从一个域名的网页请求另一个域名的网页资源时，域名，端口，协议任一不同，都视为跨域

2.8深拷贝和浅拷贝 

1.浅拷贝：只是拷贝一层，更深层次对象级别的只拷贝引用地址

2.深拷贝：深拷贝拷贝多层，每一次别的数据都会拷贝

浅拷贝的方法：Object.assign（拷贝给谁，把谁给拷贝）   Array.prototype.slice

深拷贝的方法：JSON.parse

2.9 本地储存

sessionStorage跟loactionStorage

sessionStorage

生命周期为关闭浏览器的窗口，在同一个页面下，数据可以共享，以键值对的形式存储数据

储存数据：sessionStorage.setItem(key,value)

获取数据：sessionStorage.getItem(key)

删除数据：sessionStorage.removeItem(key)

删除所有数据：sessionStorage.clear( )

loaclStroage

生命周期永久存储，除非手动删除，在同个浏览器内可以通过多个页面分享数据

属性同上

3.0 作用域

js作用域：就是代码，（变量）在某个范围内起作用和效果。目的是为了提高程序的可靠性，更重要的是减少命名冲突

js的作用域在es6之前只有全局作用域和局部作用域

全局作用域：整个script标签 或者是一个外部引入的js文件

局部作用域：在函数内就是局部作用域，这个代码的名字只在函数内部起效果和作用

3.1原型和原型链

原型：

所有函数都有一个原型属性prototype

所有对象都有一个（隐式原型）属性—proto—

引用类型—proto—指向他构造函数的prototype

    function Student(name) {
     this.name = name
    }
    console.log(Student.prototype);

    const zhangsan = new Student()
    console.log(zhangsan.__proto__);

    console.log(zhangsan.__proto__ === Student.prototype);

原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

简单来说，添加一个

Student.prototype.a = 1

console（zhangsan.a）
打印一个zhangsan.a,则控制台输出a=1，但在张三这个对象里面没有a这个属性，所以去它的构造函数的prototype里面查找（找到了），若找不到则去prototype.—proto—查找，即Object.prototype,若再找不到，则再往最顶一级Object.paototype._proto_，若找不到，返回null

3.2 null跟undefined区别

null 表示一个尚未存在的对象，转为数值是0：原型链的终点

undefined表示一个未定义的对象，转为数值是NaN：如变量声明，而未赋值，显示undefined

3.3垃圾回收机制
垃圾回收：js代码想要运行，需要操作系统或者运行时提供内存空间，来存储变量及它的值。在某些变量（例如局部变量）在不参与运行时，就需要系统回收被占用的内存空间，称为垃圾回收