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：

1、父级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是单线程的