标签：function color 继承 transform 面试 div 属性
模拟面试老师问到的面试题
1.冒泡和捕获的差别
冒泡：从里到外
捕获：从外到里
举例：
div，body，html，doc
doc，html，body，div
2.继承 extends
1.原型链继承
function Parent1(){
this.name='parent1'
this.play=[1,2,3]
}
function Child1(){
this.type='child2'
}
Child1.prototype=new Parent1()//重要
console.log(new Child1())
缺点：child和parent两个实例使用的是同一个原型对象，他们的内存空间是共享的，一个发生改变，另一个也会改变，
2.构造函数继承（借助call）
function Patrnt1(){
this.name='parent1'
}
Patrnt1.prototype.getname=function(){
return this.name
}
function Child1(){
Parent1.call(this)//重要
this.type='child1'
}
let child=new Child1()
log(child)
log(child.getname())//报错
缺点：父类原型对象中一旦存在父类之前自己定义的方法，那么子类将无法继承这些方法。
只能继承父类的实例属性和方法，不能继承原型属性或者方法。
3.组合继承
4.原型式继承 Object.create 类似于浅拷贝
let parent4={
name:"amy"
friends["p1","p2"]
getname:function(){
return this.name}
}
let person4=object.creat(parent4)//重要
person4.name="tom"
person4.friends.push("jessy")
缺点:多个实例的引用类型属性指向相同的内存，存在篡改的可能，
5.寄生式继承
6.寄生组合式继承
3.src与href
href：1用在link和a 2是为当前文档和引用建立练习 3浏览器解析：识别为css，并行下载资源并且不会停止对当前文档资源的加载
src;1用在sc，img上 2是替换当前的元素 3 停止其他资源的加载，直接将该资源下载完毕，编译，执行
4.css位移
transform:translate(水平位移,垂直位移);
transform:translate(水平位移);
transform:translateX(水平位移);
transform:translateY(垂直位移);
默认情况: 正值 从上往下,从左往右
5.12px改成1px
使用transform: scale();属性缩放字体所在元素即可实现小字体显示
6.引用数据类型和基本数据类型的区别
基本数据：bool int float double byte short long char
引用数据：数组 字符串
基本数据保存在栈中，而引用数据类型只是地址保存在栈中，具体内容保存在堆中
7.表单事件
input select change invalid reset submit
8.！important
!important>行内样式>id>class|属性>标签>通配符；
9.语义化标签
h标签 strong标签 nav标签 p标签 ins del
具有可读性，使得文档结构清晰
浏览器便于读取，有利于优化，
利于团队开发和维护，
用户体验好
10.h5新增特性
语义化标签，增强型表单，新增表单元素，新增表单属性，音频、视频，canvas，地理定位，拖拽，本地存储，
11.css3新增语法
transtion animation transform 阴影 边框 text-shadow
12.es6新增语法
1.新的变量声明
let const
2箭头函数
3解构赋值
可以将属性/值从对象/数组中取出,赋值给其他变量。
4...运算符
剩余运算符 展开运算符
5模板字符串
反引号 ￥{}
6模块
导入import 导出export
13.事件代理
事件代理又叫事件委托，利用的是事件冒泡，事件要绑定很多事件，可以绑定给他的祖先
14.js
15.渲染过程
1先解析html文件，生成dom树
2在解析css文件，生成css规则树
3将dom树和css规则数结合，创建渲染树
4根据渲染树去布局和绘制
16.异步
异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。
代码不按照代码顺序执行
17为什么说js是单线程的
1进程：cpu分配资源的最小单位
2线程：cpu调度的最小单位
3浏览器是多进程的
没打开一个页面，就是一个进程，所以浏览器是多进程的
4js是单线程的
js作为浏览器的脚本语言，主要实现用户和浏览器的交互以及操作dom，所以他只能是单线程的，举个例子，假如js是多线程的，当一个线程要修改一个dom元素，一个线程要删除这个dom元素，浏览器就会不知所措
18.新建dom节点
document.creatElement("div")
父元素.appendChild（）
父元素.insertBefore（新节点，谁的前面）
父元素.removeChild（）
19.防抖和节流
多次触发只响应最后一次
多次触发只响应其中几次
20.重绘和回流
影响元素的简单样式的改变，如颜色，字体等
影响元素的布局的属性，比如宽高
重绘不一定会引起回流，回流一定引起重绘
21.sass
SASS是一种CSS的开发工具
1 变量 以$开头
$blue:#111
div{
color: $blue
}
2 选择器嵌套 属性也可以嵌套
div h1{
color:red
}
可以写成
div{
h1{
color:red
}
}
border-color属性可以写成(冒号别漏掉)
p{
border:{
color:red
}
}
3注释 有三种
/**/ 保留在编译后的文件中
// 编译后被省略
/*! 重要注释 即使压缩编译 也会保留，通常用于版权信息
4 继承 允许一个选择器继承另一个选择器 @extend
.class2{
@extends .classs1
}
5 定义一个代码块 @mixin
使用@include命令 调用这个mixin
@mixin left{
float:left
margine-left:10px
}
div{
@include left
}
6 插入文件
@import命令，用来插入外部文件。
7 @if
p{
@if 1+1==2{color:red}
@if5<3{color:blue}
}
@if lightness($color)>30%{
bgc:#000
}@else{
bgc:#fff
}
8 for循环 while循环 each
@for $i from 1to10{
.border-#{$i}{
border:#{$i}px solid blue
}
}
$i 6;
@while $i>0{
.item-#{$i}{width:2em*$i;
$i:$i-2
}
}
9 自定义函数
@function double($n){
@return $n*2
}
22.this
1.方法调用，谁调用指向谁
2.函数调用 没有明确指向 指向window
3.构造函数 指向被构造的对象
4.apply call bind 指向第一个参数
5.箭头函数 指向上一层
6.严格模式下，没有定义，指向undefined
23.作用域链
每一个函数执行的时候，会先在自己创建的ao上找对应的属性值，找不到就往自己的父级的ao上面找，再找不到就再上一层的ao，知道找到最大的boss window
25.隔行变色
用 for循环，if判断，偶数是一个色，奇数是一个色
26.transform
1translate(x,y)
transform：translate(5px,5px)
2scale(x,y)
transform:scale(0.8,1)
3rotate(deg)
transform:rotate(45deg)
4skew(deg,deg)
transform:skew(30deg,30deg)
5rotateX() rotateY() rotateZ()
transform:rotateX(180deg)
6 perspective
27.link与script区别
引入css样式
引入js
标签：function,color,继承,transform,面试,div,属性 来源： https://www.cnblogs.com/ddyx/p/16142674.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。