前端框架
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。
以 Vue 为例，我整理了如下的面试题。
如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
height:64px;
}
.banner{
background: #3c9480;
height:200px;
}
.content {
position: relative;
height: 100%;
margin-top: -50px;
}
section{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
background: rgb(179, 95, 101);
min-width: 800px;
min-height: 100%;
margin:0 100px 200px 100px;
}
footer{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: #8748878a;
height:200px;
margin-top:-200px;
}
section
为了不脱离文档流，我把footer挪出来，两个元素分别加上relative，这样当文档内容足够多的时候，页面看着是没有什么问题的，但当文档内容不够高时，页面底部还是会有留白情况
通过观察发现页面中有外层元素（container）高度不是100%，没有撑满一屏，再次计算得到section高度不是【屏幕高度-header-section-footer】的高
解决方案1：
关键代码
给body，html，以及container都设置高度100%，然后section的高度为100%-header-banner-footer的高度
body,html{
height:100%;
}
.container{
height:100%;
}
.section{
min-height:calc(100% - 64px - 200px - 200px);
}
html:
section
完整css:
body,html{
padding:0;
margin: 0;
height:100%;
font-size: 30px;
}
.container{
height:100%;
}
header{
background: #ff0;
height:64px;
}
.banner{
background: #3c9480;
height:200px;
}
section{
position: relative;
top:-50px;
background: rgb(179, 95, 101);
min-height:calc(100% - 64px - 200px - 200px);
flex:1;
margin:0 100px 200px 100px;
}
footer{
position: relative;
background: #8748878a;
height:200px;
margin-top:-200px;
}
最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
nd: #8748878a;
height:200px;
margin-top:-200px;
}
最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-aoYbeokI-1715481599989)]
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
