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

本文链接：https://blog.csdn.net/xd_yangxiaoromg/article/details/80832469

一、有关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

<div class="wapper">
   <div class="inner"></div>
</div>

//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元素在垂直方向上的边距会发生重叠；