css优先级确定

• 每个选择器都有权值，权值越大越优先
• 继承的样式优先级低于自身指定样式
• ！important优先级最高 js也无法修改
• 权值相同时，靠近元素的样式优先级高  顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）
  

bfc内容见盒模型如何清除浮动不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

• clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：   {clear:both;height:0;overflow:hidden;}
• 给浮动元素父级设置高度
• 父级同时浮动（需要给父级同级元素添加浮动）
• 父级设置成inline-block，其margin: 0 auto居中方式失效
• 给父级添加overflow:hidden 清除浮动方法
• 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
  

自适应布局

思路：

• 左侧浮动或者绝对定位，然后右侧margin撑开
• 使用div包含，然后靠负margin形成bfc
• 使用flex
  

link @import导入css

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• link无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM去改变样式；而@import不支持。
  

animation

长宽比方案

• 使用padding方式结合calc实现
• 长宽一项设置百分比另一项aspect-ratio实现（需借助插件实现）
  

display相关

• block:div等容器类型
• inline:img span等行内类型
• table系列：将样式变成table类型
• flex:重点把握，非常强大
• grid:同上
• inline-block:可设置宽度，两者间有一点间隙
• inherit:继承父级
  

JavaScript相关
js数据类型1.number;
2.string;
3.boolean;
4.undefined;
5.null;
6.symbol（ES6新增，文章后面有对着新类型的解释）Symbol 生成一个全局唯一的值。
7.Object.（包括Object，Array，Function）

数组去重
思路1：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中
思路2：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。
思路3：利用对象属性存在的特性，如果没有该属性则存入新数组。
思路4（最常用）：使用es6 set                   let arr= [1, 2, 3, 3, 5, 7, 2, 6, 8];console.log([...new Set(arr)]);

JS 如何实现继承
1.使用原型继承（既继承了父类的模板，又继承了父类的原型对象。优点是继承了父类的模板，又继承了父类的原型对象，缺点就是父类实例传参，不是子类实例化传参，不符合常规语言的写法）
2.使用call的方式（继承了父类的模板，不继承了父类的原型对象。优点是方便了子类实例传参，缺点就是不继承了父类的原型对象）

call apply

作用：在函数调用时改变函数的执行上下文也就是this的值 区别：call采用不定长的参数列表，而apply使用一个参数数组。 性能优化图

点击查看更多精彩前端资源

点击有惊喜

css优先级确定

• 每个选择器都有权值，权值越大越优先
• 继承的样式优先级低于自身指定样式
• ！important优先级最高 js也无法修改
• 权值相同时，靠近元素的样式优先级高  顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）
  

bfc内容见盒模型如何清除浮动不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

• clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：   {clear:both;height:0;overflow:hidden;}
• 给浮动元素父级设置高度
• 父级同时浮动（需要给父级同级元素添加浮动）
• 父级设置成inline-block，其margin: 0 auto居中方式失效
• 给父级添加overflow:hidden 清除浮动方法
• 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
  

自适应布局

思路：

• 左侧浮动或者绝对定位，然后右侧margin撑开
• 使用div包含，然后靠负margin形成bfc
• 使用flex
  

link @import导入css

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• link无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM去改变样式；而@import不支持。
  

animation

长宽比方案

• 使用padding方式结合calc实现
• 长宽一项设置百分比另一项aspect-ratio实现（需借助插件实现）
  

display相关

• block:div等容器类型
• inline:img span等行内类型
• table系列：将样式变成table类型
• flex:重点把握，非常强大
• grid:同上
• inline-block:可设置宽度，两者间有一点间隙
• inherit:继承父级
  

JavaScript相关
js数据类型1.number;
2.string;
3.boolean;
4.undefined;
5.null;
6.symbol（ES6新增，文章后面有对着新类型的解释）Symbol 生成一个全局唯一的值。
7.Object.（包括Object，Array，Function）

数组去重
思路1：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中
思路2：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。
思路3：利用对象属性存在的特性，如果没有该属性则存入新数组。
思路4（最常用）：使用es6 set                   let arr= [1, 2, 3, 3, 5, 7, 2, 6, 8];console.log([...new Set(arr)]);

JS 如何实现继承
1.使用原型继承（既继承了父类的模板，又继承了父类的原型对象。优点是继承了父类的模板，又继承了父类的原型对象，缺点就是父类实例传参，不是子类实例化传参，不符合常规语言的写法）
2.使用call的方式（继承了父类的模板，不继承了父类的原型对象。优点是方便了子类实例传参，缺点就是不继承了父类的原型对象）

call apply

作用：在函数调用时改变函数的执行上下文也就是this的值 区别：call采用不定长的参数列表，而apply使用一个参数数组。 性能优化图

点击查看更多精彩前端资源

点击有惊喜