前端面试题
css盒模型
-
css模型
利用width和height赋值时,指的是content的宽和高,盒子真实的宽高还要加上padding和border部分
-
ie模型
利用width和height赋值时,就是盒子的宽和高
怎么设置盒模型: 默认box-sizing:content-box(标准),box-sizing:border-box(ie)
BFC:
哪些元素会创建bfc?
- float的值不为none
- postion的值不是static或relative
- display的值是inline-block,table-cell,flex,table-caption,inline-flex
- overflow的值不是visible
上述使用bfc的副作用:
- float:left,元素移到左侧,并被其他元素环绕
- display:table 会造成响应性问题
- overflow:scroll 可能会产生多余的滚动条
- overflow:hidden 将裁减溢出元素
为什么要创建bfc?
外边距折叠 包含浮动
js获取盒模型的宽高有哪些方式?
- dom.style.width/height(只适用获取内联元素的宽和高)
- dom.currentStyle.width/height(获取渲染后的宽和高,但是只适用于ie)
- window.getComputedStyle(dom).width/height(获取渲染后的宽和高,适用于firefox,chrome)
- dom.getBoundingClientRect().width/height(计算元素的绝对位置,获取left,top,width,height)
html中标签可以被分为哪几类?各自有什么特点?
- 块标签:默认独占一行,宽度为100%,可以设置宽高,支持上下左右margin和padding
- 行内标签:与其他元素并排一行,不支持设置宽高,宽度随内容撑开,支持左右方向的margin 和padding
- 行内块标签:与其他元素并排一行,支持设置宽高,支持上下左右的margin,padding值
css中哪些属性可以被继承?
-
无继承性的属性? display ,文本属性(vertical-align,text-decoration,text-shadow,white-space,unicode-bidi),盒子模型属性,背景属性,定位属性,生成内容的属性(content等),轮廓样式属性(outline-style,outline-width),页面样式属性(size),声音样式属性
-
有继承性的属性? 字体系列属性(font等),文本系列属性(text-indent,text-align,line-height,word-spacing,letter-spacing,text-transform,direction,color)等
-
内联元素可以继承的属性? 字体系列属性,文本系列除开text-indent,text-align属性
-
块级元素可以继承的属性? text-indent,text-align
DOM事件
dom事件的级别
- dom0 : ele.onclick = function(){},兼容所有浏览器,但是只能注册一次,多次注册时后面会覆盖前面的
- dom2: ele.addEventListener('click',function(){},false) (ie不支持),可以添加多个事件,按照顺序依次处理 ie:ele.attachEvent('onclick',function(){})
- dom3:与dom2一样,增加了许多事件类型,包括鼠标事件,键盘事件
dom事件模型
冒泡:从目标元素到window
捕获:从window到目标元素
event对象的常见应用
- event.preventDefault() :阻止默认事件,例如阻止a元素的跳转事件
- event.stopPropagation() :阻止冒泡事件
- event.stopImmediatePropagation():当前元素之后的监听事件不会被执行
- event.currentTarget:被绑定事件的元素
- event.target:当前被点击元素
http协议
- 无连接(只有一次连接)无状态(对事务处理没有记忆)
- 常见的http方法:get ,post ,put,head,delete
一次完整的http请求所经历的7个步骤
- 建立tcp连接
- web浏览器向web服务器发送请求行
- web浏览器发送请求头(以空白行结束该头信息的发送)
- web服务器应答
- web服务器发送应答头
- web服务器发送应答数据
- web服务器关闭tcp连接
http1.1 新特性
- 默认持久连接节省流量
- 管线化,客户端可以同时发出多个请求,而不用一个个等待相应
- 断点续传:利用http消息头分块传输
https的工作原理
- 请求服务端生成证书,客户端对证书进行校验
- 根据证书的公钥有效,生成随机数,利用rsa加密
- 消息体产生后,对摘要进行md5加密
- 发送给服务端,只有服务端(rsa私钥)能解密
- 解密得到的随机数,再用aes加密
原型链
创建对象的方法
- 字面量
- 构造函数
- Object.create()
原型链
new操作符原理
创建一个新对象,将该对象的proto属性指向构造函数的prototype对象,将构造函数的作用域赋给新的对象,如果构造函数返回对象,则返回构造函数对象,否则返回创建的新对象
function new1(fn){ let obj = {}; obj.__proto__ = fn.prototype; return function(){ let o = fn.apply(obj,arguments); return o?o:obj; } }
var new2 = function(Func){ var o = Object.create(Func.prototype); var k = Func.call(this,o); if(typeof k === 'object'){ return k; }else{ return o; } }
实现继承的几种方式
1.借助构造函数 2.借助原型链 3.组合方式 4.es6中的类继承
js哪些方法会引起异步操作?
setTimeout,setInterval,ajax请求,动态加载,Promise
js浅拷贝和深拷贝的区别?
浅拷贝只是复制了对象的引用地址,两个对象指向同一个内存地址,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝(例:assign())
深拷贝是将对象及值复制过来,两个对象修改其中任意的值另一个值不会改变,这就是深拷贝(例:JSON.parse()和JSON.stringify(),但是此方法无法复制函数类型)