更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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部分
1.float布局
.father{
height: 50px;
div{
height: 100%;
}
}
.left {
width: 200px;
float: left;
background-color: red
}
最后
文章到这里就结束了，如果觉得对你有帮助可以点个赞哦
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
1.float布局
.father{
height: 50px;
div{
height: 100%;
}
}
.left {
width: 200px;
float: left;
background-color: red
}
最后
文章到这里就结束了，如果觉得对你有帮助可以点个赞哦
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-Znc2p93i-1715612565139)]
扫一扫
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
