web前端面试题题目

一.各类浏览器兼容的前缀：-o-(Opera)，-ms-(IE)； -moz-(火狐)；-webkit-(chrome)

二.存在兼容性的css属性：placeholder，主要是由于各类浏览器placeholder颜色显示的不同

三.边距重叠

  两个div标签，垂直排列，上面的margin-bottom:50px,下面的margin-top:20px,那两个div之间的margin是50px；

  解决途径：BFC,  

  BFC的原理是：

• 处于同一个BFC中的元素相互影响，可能会发生margin collapse；
• BFC在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然；
• 计算BFC的高度时，考虑BFC所包含的全部元素，包括浮动元素也参与计算；
• 浮动盒的区域不会叠加到BFC上；

  建立BFC：

• 浮动（float的值不为none）；
• 绝对定位元素（position的值为absolute或fixed）；
• 行内块（display为inline-block）
• 表格单元（display为table、table-cell、table-caption等HTML表格相关属性）；
• 弹性盒（display为flex或inline-flex）；
• overflow不为visible；

四.清除浮动原理以及方法

   应用BFC：

   一、父级div定义伪类：after和zoom        

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
 .clearfloat{zoom:1} // 兼容ie7及如下浏览器

 2.在结尾处添加空div标签clear:both

 3.父级div定义height

 4.父级div定义overflow:hidden/overflow:auto

 5.应用BFC原理，设置父元素为知足上面样式的BFC元素

五：垂直，水平，垂直水平居中

   1.margin和width

   2.定位加margin

   3.定位加transform

   4.flex布局：justify-content（水平），align-items(垂直)

六：js面向对象的特征：封装，继承，多态

七：js原型链：构造函数，原型对象，实例，构造函数的prototype属性直接指向原型对象，原型对象的constructor指针指向了构造函数，实例的__proto__指向原型对象

     

八：js设计模式（https://www.cnblogs.com/chenxygx/p/5754101.html）

     1.单例模式；2.工厂模式；3.策略模式；4.观察者模式（事件流）；5.迭代模式

九：eventloop事件流机制，js是单线程的