版权声明：转载注明出处 https://blog.csdn.net/weixin_43264048/article/details/82834033
最近准备去面试了，总结一下知识点吧，不当之处请指出。祝大家前程似锦，废话不多说上东西。
1.HTML CSS JS的基础知识
1.1 什么是DOM
DOM是一套对文档的内容进行抽象和概念化的方法。 ——《JavaScript DOM 编程方法》
JS操作HTML的接口 ——自己总结的不当之处请指出
1.2 CSS层叠性的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#bgColor{
background-color: black;
}
.bgColor{
background-color: aqua;
}
div{
background-color: blue;
}
.bgColorI{
background-color: blueviolet !important;
}
</style>
<body>
<div id="bgColor" class="bgColor bgColorI" style="height:50px;width:50px;background-color: brown"></div>
</body>
</html>
层叠顺序是 !important>>>>>行内式>#ID>.Class>Tag 。组合的写法也可以按照这个权重进行推算。
1.3 CSS中的水平居中，垂直居中问题
1.水平居中
text-align:center;
margin:0 auto;
元素绝对定位left:50%;margin-left:-元素width的一半
2.垂直居中
line-height:元素的高度;
元素绝对定位top:50%;margin-top:-元素height的一半
vertical-align:middle;
3.银弹:flex布局 //一些低版本的浏览器不支持
这些方法有一些使用的细节，代码我就不贴了，可以自行搜索
1.4如何清除浮动
伪元素清除浮动,说一种就应该就够了
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
1.5 JS中如何判断一个属性在实例中还是在原型链中
利用hasOwnProperty这个方法返回的一个布尔值 // 在自身实例中返回true,在原型中返回false,都不在也返回false
function Text(name,age){
this.name = name;
this.age = age;
}
Text.prototype.work = function(a){
return a;
}
var a = new Text(1,2);
function ispro(obj,pro){
if(pro in obj){
return (obj.hasOwnProperty(pro));
}else{
console.log('原型实例中都不存在');
return false;
}
}
console.log(ispro(a,'work'));//false 在原型中
console.log(ispro(a,'name'));//true 在实例中
console.log(ispro(a,'age'));//true 在实例中
console.log(ispro(a,'bbb'));//实例和原型链中都不存在 false
1.6 JS中闭包的作用
1.访问局部变量
function fn(){
var a = 9999;
}
console.log(a); //a is not defined
fn();
function fn1(){
var a = 9999;
console.log(a) // 9999
}
fn1();
2.让局部变量保存起来，使用不当的闭包会引起内存泄漏
function fn(){
var a = 1;
return function(){
console.log(a);
a++;
return a;
}
}
var a = fn();
a(); //1
a(); //2
a(); //3
a(); //4
var b = fn();
b(); //1
b(); //2
b(); //3
b(); //4
1.7 JS中 ==,===有什么区别
严格等于和不严格等于的区别
console.log("1"==1); //true
console.log("1"===1); //false
以上面的String与number比较的代码为例
==时，如果类型不同会转换成相同类型进行比较
===时，如果类型不同直接返回false
有一个比较经典的案例
function Obj(){
return{
a:0,
toString:function(){
this.a++;
return this.a;
}
}
}
var a = new Obj();
console.log(a== 1&&a== 2&&a== 3); //true
这个是对象与数字之间比较的时候,重写了对象里面的toString方法导致a== 1&&a== 2&&a== 3为 true
1.8 JS浮点数字计算导致精度丢失的问题
其实这个问题不光JS中有，其他语言也有，像JAVA中也有，揪其原因是因为底层的二进制无法精确表示这种浮点类型的数字。在这里不谈有兴趣的同学可以去了解一下，不过JAVA中有BigDecimal这种东西可以用，这里仅展示一些小数，很大的整数也会有这种问题，看代码吧
var a = 0.1;
var b = 0.11;
console.log(a+b); //0.21000000000000002
console.log(a-b); //-0.009999999999999995
var a = 0.01;
var b = 0.11;
console.log(a+b);//0.12
console.log(a-b);//-0.1
var a=7.8;
var b = 0.9;
console.log(a+b);//8.7
console.log(a-b);//6.8999999999999995
var a =2.8;
var b = 0.9;
console.log(a+b);//3.6999999999999997
console.log(a-b);//1.9
这就非常有意思了，可以去试一下哦。这个可能就需要了解一下底层二进制表示数字的方法了，学无止境不是么？至于JS中的解决方法有几个思路，1.将浮点数字转化成整数计算，2.四舍五入。方法挺多大家可以自行百度。当然前端也不可能有大量的这种数字计算。
1.9 常见的浏览器兼容性的问题
其实这种东西真的太多了，写不完。随便说几个吧，有兴趣的同学可以留言,这一篇就写到这里了
各个浏览器默认的一些属性
CSS3中的一些属性的兼容性写法
谷歌浏览器中select里面option添加click事件无效
audio标签谷歌中不支持自动播放
details标签等等等等