前端面试题
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