一、css
盒模型：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ height: 300px; width: 300px; border: 5px solid pink; padding: 20px; background-color: wheat; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
我们上述写了一些代码，设置是一个宽高分别为300px的盒子那么现在看到的是一个宽高为350px的盒子，那么是为什么呢？我们就一起来探讨一下吧
由第二张图片我们很清楚的知道 我们给盒子设置的宽高为300px的盒子，然后设置了padding值为20px,border设置了5px,margin没有设置值，因此：
我们可以清楚的知道盒模型中的内容包括：内容（content）、margin（外边距）、border（边框）、padding（内边框）
margin（外边距）：清除边框的区域，外边距是透明的
border（边框）：围绕在内边距和内容外的边框
padding（内边距）：清除内容周围的区域，内边距是透明的
content（内容）：盒子的内容，显示文本和图像
css两种盒模型：w3c标准和模型、IE盒模型
标准盒子模型中：width指的是content部分的宽度
IE盒模型：width指的是content+padding+border这三个部分宽度
切换盒模型可以借助css3的box-sizing属性
box-sizing:content-box 是w3c盒子模型
box-sizing:border-box是IE盒子模型
box-sizing的默认是content-box
二、JS基础
类型及检测方式
类型：
基本数据类型：undefined、null、boolean、string、number、BigInt（es10新增）、Symbol（es6新增）
引用数据类型：object(array、function、date、Math、RegExp)
【普通对象Object 】【数组对象-Array】【正则对象-RegExp】【日期对象-Date】【数学函数-Math】【函数对象-Function】
原始数据类型：基础类型存储在栈内存中，被引用或者拷贝的时候，会创建一个完全相等的变量；占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储
引用数据类型：引用数据类型存储在堆内存，存储的是地址，多个引用指向同一个地址，这里涉及一个'共享'的概念;占据空间大没打小不固定。引用数据类型在栈中存储了指针，该指针向堆中该试题的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，去的地址后从堆中获得实体
数据检测：
typeof对于原始类型来说，除了null都可以显示正确的类型
typeof对于对象来说，除了函数都会显示object，所以typeof并不能准确判断变量到底是什么类型，所以想判断一个对象的正确类型，这时候可以考虑使用instanceof
instanceof可以正确判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的prototype
instanceof可以准确的判断复杂引用数据类型，但是不能正确判断基础数据类型
而typeof也存在弊端，他虽然可以判断基础数据类型（null）除外，但是引用数据类型中，除了function类型意外，其他的也无法判断
constructor
constructor在我创建一个对象，更改他的原型，他就会变得不可靠
function Fn(){}; Fn.prptotype=new Array(); var f=new Fn(); console.log(f.constructor===Fn)//false console.log(f.constructor===Array)//true Object.prototype.toString.call()
toString()是Object的原型方法，调用该方法，可以同意返回格式为[Object xxx]的字符串，其中，xxx就是对象的类型。对于Object对象，直接调用toString()就能返回[Object Object];而对于其他对象，则需要通过call来调用，才能返回正确的类型信息，
Object.prototype.toString({}) // "[object Object]" Object.prototype.toString.call({}) // 同上结果，加上call也ok Object.prototype.toString.call(1) // "[object Number]" Object.prototype.toString.call('1') // "[object String]" Object.prototype.toString.call(true) // "[object Boolean]" Object.prototype.toString.call(function(){}) // "[object Function]" Object.prototype.toString.call(null) //"[object Null]" Object.prototype.toString.call(undefined) //"[object Undefined]" Object.prototype.toString.call(/123/g) //"[object RegExp]" Object.prototype.toString.call(new Date()) //"[object Date]" Object.prototype.toString.call([]) //"[object Array]" Object.prototype.toString.call(document) //"[object HTMLDocument]" Object.prototype.toString.call(window) //"[object Window]" // 从上面这段代码可以看出，Object.prototype.toString.call() 可以很好地判断引用类型，甚至可以把 document 和 window 都区分开来
- typeof
直接在计算机底层基于数据类型的值（二进制）进行检测
typeof null为object 原因是对象存在在计算机中，都是以000开始的二进制存储，所以检测出来的结果是对象
typeof 普通对象/数组对象/正则对象/日期对象 都是object
typeof NaN === 'number'
- instanceof
- 检测当前实例是否属于这个类的
底层机制：只要当前类出现在实例的原型上，结果都是true
不能检测基本数据类型
- constructor
支持基本类型
- constructor可以随便改，也不准
Object.prototype.toString.call([val])
返回当前实例所属类信息
判断 Target 的类型，单单用 typeof 并无法完全满足，这其实并不是 bug，本质原因是 JS 的万物皆对象的理论。因此要真正完美判断时，我们需要区分对待:
- 基本类型(null): 使用 String(null)
- 基本类型(string / number / boolean / undefined) + function: - 直接使用 typeof即可
- 其余引用类型(Array / Date / RegExp Error): 调用toString后根据[object XXX]进行判断
JS类型转换只有三种：
转换为布尔值
转换为数字
转换为字符转
