一年左右工作经验及小白前端面试问题总结（1）有关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

[code]<div class="wapper">
<div class="inner"></div>
</div>

//css

方法一：

[code].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;
}

方法二：

[code].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://www.geek-share.com/detail/2601546081.html。

用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……之类的表格属性。