一年左右工作经验及小白前端面试问题总结（1）有关css（或样式）的常见面试问题(2)js相关

一、有关css（或样式）常见问题

1.relative和absolute的区别？

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

注：侧重点可以在是否脱离文档流，更详细的解释可以参照这篇文档：https://www.cnblogs.com/jenry/archive/2007/07/15/818660.html

2.怎么让一个元素上下、左右都实现居中？请使用不止一种方法实现。

//html

//css

方法一：

.wapper{
    /*元素高宽可以自己确定*/
    width:500px;
    height:500px;
    position:relative;
    border:1px solid red;
}
.inner{
    width:200px;
    height: 200px;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:1px solid green;
}

 

方法二：

 

.wapper{
    width:500px;
    height:500px;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid red;
}
.inner{
    width:200px;
    height: 200px;
    border:1px solid green;
}

3.css盒模型

css盒模型分为“标准模型（w3c标准）”和“IE盒模型”。

标准模型（w3c标准）的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

详细内容可以看这篇博客，作者zyuzixiao说的很详细，https://blog.csdn.net/zyuzixiao/article/details/18733463。

用css设置盒模型：

box-sizing:content-box;//标准模型，浏览器默认

box-sizing:border-box;//IE模型

4.BFC问题（边距重叠解决方案）

a.进本概念：块级格式上下文

b.BFC的原理（渲染规则）：

①.BFC元素在垂直方向上的边距会发生重叠；

②.BFC的区域不会与浮动元素的box重叠；

③.BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素；

④.计算BFC高度的时候，容器内部的浮动元素也会参与计算。

c.如何创建BFC

①.overflow:hidden或auto；

②.float值不为none，即设置了浮动；

③position不为static或relative；

④/display为table，table-cell，table-row……之类的表格属性。

二、js相关知识点（很重要）

1、js事件兼容处理（不同浏览器的事件兼容处理）：一般会考事件增加监听事件和移除监听事件的兼容处理。

2、原型和原型链知识点整理：对于一个刚毕业的学生或者工作一年左右的人来说，大多没有做过什么了不起的项目，就会比较详细的考察你的基础知识，这一块是重中之中的。

3、js实现继承的方式：结合第二点认真学习，不但对面试有帮助，对以后的工作也很有帮助。