2024年最新前端面试题之CSS布局问题，吃透这份阿里P8纯手打前端面经

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

垂直居中DIV

---

HTML部分

我是垂直居中的div

这里简单给出几种

1.绝对定位（盒子宽高已知）

.father {

position: relative;

width: 500px;

height: 500px;

background-color: red;

}

.son {

position: absolute;

left: 50%;

top: 50%;

margin-left: -150px;（-盒子一半宽度）

margin-top: -150px;（-盒子一半高度）

width: 300px;

height:300px;

background-color: blue;

}

2.绝对定位（宽高已知）

.father {

position: relative;

width: 500px;

height: 500px;

background-color: red;

}

.son{

position:absolute;

margin:auto;

top:0; left:0; bottom:0;right:0;

width: 300px;

height:300px;

background-color: blue;

}

3.定位 （宽高未知）

.son {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: blue;

}

4.flex布局（父元素设置）

.father {

display: flex;

align-items: center;

justify-content: center;

width: 500px;

height: 500px;

background-color: red;

}

两栏布局左边固定右边自适应

---

这与右边固定左边自适应，上固定下自适应是一个道理。

HTML部分

1.float布局

.left {

width: 200px;

height: 200px;

float: left;

background-color: blue;

}

.right {

margin-left: 200px;

height: 200px;

background-color: red;

}

2.绝对定位

.father {

position: relative;

height: 200px;

}

.left {

position:absolute;

width: 200px;

height: 100%;

float: left;

background-color: blue;

}

.right {

position:absolute;

height: 100%;

left:200px;

right: 0;

background-color: red;

}

3.flex布局

.father {

height: 300px;

width: 100%;

display: flex;

}

.left {

width: 300px;

height: 100%;

background-color: blue;

}

.right {

flex: 1;

height: 100%;

background-color: red;

}

三栏布局左右固定中自适应

---

这与左中固定右边自适应，中右固定左边自适应，以及上下固定中间自适应是一个道理

HTML部分

#### 最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。