前端面试题前端布局问题
Posted 二琳爱吃肉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端面试题前端布局问题相关的知识，希望对你有一定的参考价值。
目录
使用vertical-align,text-align,inline-block实现
12.15复盘了一下，改了一些拼写错误。如果还有拼写错误我没找出来，请大家指正，共同进步！
单列布局
水平居中
实现子元素相对于父元素水平居中
使用inline-block和text-align实现
.parenttext-align:center;
.childdisplay:inline-block;
优点：兼容性好
缺点：需要同时设置父元素和子元素
使用margin:0 auto实现
.childmargin:0 auto;
优点：兼容性好
缺点：需要指定宽高
使用table实现
.child display:table; margin:0 auto;
优点：只需要对自身进行设置
缺点：在IE6,7浏览器中需要调整结构
使用绝对定位实现
.parentposition:relative;
.childposition:absolute; left:50%; transform:translate(-50%);
不足：兼容性差，只能在IE9以上可用
使用flex布局实现
way1:
.parent display:flex; justify-content:center;
way2:
.parentdisplay:flex;
.childmargin:0 auto;
缺点：兼容性差，如果大面积使用flex布局可能会影响页面渲染效率
水平居中代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端布局</title>
<style>
/* 父元素text-align:center; 子元素display:inline-block;
.parent
height: 200px;
width: 200px;
background: pink;
text-align: center;
.child
background: yellow;
height: 100px;
width: 100px;
display: inline-block;
*/
/* margin:0 auto;
.parent
height: 200px;
width: 200px;
background: pink;
.child
background: yellow;
height: 100px;
width: 100px;
margin: 0 auto;
*/
/* 使用table实现
.parent
height: 200px;
width: 200px;
background: pink;
.child
background: yellow;
height: 100px;
width: 100px;
display: table;
margin: 0 auto;
*/
/* 使用绝对定位
.parent
height: 200px;
width: 200px;
background: pink;
position: relative;
.child
background: yellow;
height: 100px;
width: 100px;
position: absolute;
left: 50%;
transform: translate(-50%);
*/
/* 使用flex布局 方法一
.parent
height: 200px;
width: 200px;
background: pink;
display: flex;
justify-content: center;
.child
background: yellow;
height: 100px;
width: 100px;
*/
/* 使用flex布局 方法二*/
.parent
height: 200px;
width: 200px;
background: pink;
display: flex;
.child
background: yellow;
height: 100px;
width: 100px;
margin: 0 auto;
</style>
</head>
<body>
<!-- 水平居中 -->
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>垂直居中
实现子元素相对父元素垂直居中
使用vertical-align:middle
.parentdisplay:table-cell; vertical-align:middles;
使用绝对定位
.parentposition:relative;
.childposition:absolute; top:50%; transform:translate(0,-50%);
使用flex布局
.parentdisplay:flex; text-align:center;
垂直居中代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端布局</title>
<style>
/* 垂直居中 */
/* vertical-align
.parent
height: 200px;
width: 200px;
background: pink;
display: table-cell;
vertical-align: middle;
.child
background: yellow;
height: 100px;
width: 100px;
*/
/* 使用绝对定位
.parent
height: 200px;
width: 200px;
background: pink;
position: relative;
.child
background: yellow;
height: 100px;
width: 100px;
position: absolute;
top: 50%;
transform: translate(0,-50%);
*/
/* 使用flex */
.parent
height: 200px;
width: 200px;
background: pink;
display: flex;
align-items: center;
.child
background: yellow;
height: 100px;
width: 100px;
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>水平垂直居中
使用vertical-align,text-align,inline-block实现
.parentdisplay:table-cell; vertical-align:middle; text-align:center;
.childdisplay:inline-block;
使用绝对定位
.parent position:relative;
.childposition:absolute; top:50%; transform:translate(50%,-50%);
使用flex布局
.parentdisplay:flex; justify-content:center; align-items:center;
水平垂直居中代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端布局</title>
<style>
/* 垂直水平居中 */
/* 使用vertical-align,text-align,inline-block实现
.parent
height: 200px;
width: 200px;
background: pink;
display: table-cell;
vertical-align: middle;
text-align: center;
.child
background: yellow;
height: 100px;
width: 100px;
display: inline-block;
*/
/* 使用绝对定位
.parent
height: 200px;
width: 200px;
background: pink;
position: relative;
.child
background: yellow;
height: 100px;
width: 100px;
position: absolute;
top: 50%;
transform: translate(50%,-50%);
*/
/* 使用flex实现 */
.parent
height: 200px;
width: 200px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
.child
background: yellow;
height: 100px;
width: 100px;
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>多列布局
左列定宽，右列自适应
使用float+margin
.leftfloat:left; width:100px;
.rightmargin-left:100px;
使用float+overflow
.leftfloat:left; width:100px;
.rightoverflow:hidden;
使用table
.parentdisplay:table; table-layout:fixed; width:1000px;
.leftwidth:100px; display:table-cell;
.rightdisplay:table-cell;
使用flex
.parentdisplay:flex;
.leftwidth:100px;
.rightflex:1;
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端布局</title>
<style>
/* 左侧定宽右侧自适应
.parent
height: 300px;
width: 1000px;
background-color: antiquewhite;
.left
background-color: pink;
float: left;
width: 100px;
height: 300px;
.right
background-color: purple;
margin-left: 100px;
height: 300px;
*/
/* 使用float+overflow
.parent
height: 300px;
width: 1000px;
background-color: antiquewhite;
.left
background-color: pink;
float: left;
width: 100px;
height: 300px;
.right
background-color: purple;
overflow: hidden;
height: 300px;
*/
/* 使用table实现
.parent
height: 300px;
background-color: antiquewhite;
display: table;
table-layout: fixed;
width: 1000px;
.left
background-color: pink;
width: 100px;
height: 300px;
display: table-cell;
.right
background-color: purple;
height: 300px;
display:table-cell;
*/
/* 利用flex实现 */
.parent
height: 300px;
width: 1000px;
background-color: antiquewhite;
display: flex;
.left
background-color: pink;
width: 100px;
height: 300px;
.right
background-color: purple;
height: 300px;
flex: 1;
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>右列定宽，左列自适应
使用float+margin实现
.leftmargin-right:-100px;width:100%; float:left;
.rightfloat:right;width:100px;
使用table实现
.parentdisplay:table; table-layout:table-cell;
.leftdisplay:table-cell;
.rightwidth:100px; display:table-cell;
使用flex实现
.parentdisplay:flex;
.leftflex:1;
.rightwidth:100px;
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端布局</title>
<style>
/* 右侧定宽，左侧自适应 */
/* 利用float+margin实现
.parent
height: 300px;
width: 1000px;
background-color: antiquewhite;
.left
background-color: pink;
margin-right: -100px;
width: 100%;
float: left;
height: 300px;
.right
background-color: purple;
height: 300px;
float: right;
width: 100px;
*/
/* 使用table实现
.parent
height: 300px;
width: 1000px;
background-color: antiquewhite;
display: table;
table-layout: fixed;
.left
background-color: pink;
height: 300px;
display: table-cell;
.right
background-color: purple;
height: 300px;
width: 100px;
display: table-cell;
*/
/* 使用flex实现 */
.parent
height: 300px;
width: 1000px;
background-color: antiquewhite;
display: flex;
.left
background-color: pink;
height: 300px;
flex: 1;
.right
background-color: purple;
height: 300px;
width: 100px;
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>两列定宽，一列自适应
使用float+margin实现
.leftfloat:left; width:200px;
.centerfloat:left; width:200px;
.rightmargin-left:400px;
使用float+overflow实现
.leftfloat:left; width:200px;
.centerfloat:left; width:200px;
.rightoverflow:hidden;
使用table实现
.parentdisplay:table; table-layout:fixed;
.left,.center,.rightdisplay:table-cell;
.left,.centerwidth:200px;
使用flex实现
.parentdisplay:flex;
.left,.centerwidth:200px;
.rightflex:1;
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局</title>
<style>
/* right、center定宽，right自适应 */
/* 使用float+margin
.parent
background-color: rebeccapurple;
height: 300px;
width: 1000px;
.left
background-color: plum;
height: 300px;
float: left;
width: 200px;
.center
background-color: salmon;
height: 300px;
float: left;
width: 200px;
.right
background-color: skyblue;
height: 300px;
margin-left: 400px;
*/
/* 使用float+overflow实现
.parent
background-color: rebeccapurple;
height: 300px;
width: 1000px;
.left
background-color: plum;
height: 300px;
float: left;
width: 200px;
.center
background-color: salmon;
height: 300px;
float: left;
width: 200px;
.right
background-color: skyblue;
height: 300px;
overflow: hidden;
*/
/* 使用table实现
.parent
background-color: rebeccapurple;
height: 300px;
width: 1000px;
display: table;
table-layout: fixed;
.left
background-color: plum;
height: 300px;
display: table-cell;
width: 200px;
.center
background-color: salmon;
height: 300px;
display: table-cell;
width: 200px;
.right
background-color: skyblue;
height: 300px;
display: table-cell;
*/
/* 使用flex实现 */
.parent
background-color: rebeccapurple;
height: 300px;
width: 1000px;
display: flex;
.left
background-color: plum;
height: 300px;
width: 200px;
.center
background-color: salmon;
height: 300px;
width: 200px;
.right
background-color: skyblue;
height: 300px;
flex:1;
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>两侧定宽，中间自适应
利用float+margin实现
.left width:200px; float:left;
.rightwidth:200px;float:right;
.centermargin:0 200px;
利用table实现
.parentwidth:100%;diasplay:table;table-layout:fixed;
.left,.right,.centerdisplay:table-cell;
.left,.rightwidth:200px;
利用flex实现
.parentdisplay:flex
.left,.rightwidth:200px;
.centerflex:1;
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端布局</title>
<style>
/* 利用margin+float实现
.left
width: 200px;
height: 300px;
background-color: plum;
float: left;
.right
width: 200px;
height: 300px;
background-color: skyblue;
float: right;
.center
margin: 0 200px;
height: 300px;
background-color: salmon;
*/
/* 利用table实现
.parent
width:100%;
display: table;
table-layout: fixed;
.left
display: table-cell;
width: 200px;
height: 300px;
background-color: plum;
.right
display: table-cell;
width: 200px;
height: 300px;
background-color: skyblue;
.center
display: table-cell;
height: 300px;
background-color: salmon;
*/
/* 利用flex实现 */
.parent
display: flex;
.left
width: 200px;
height: 300px;
background-color: plum;
.right
width: 200px;
height: 300px;
background-color: skyblue;
.center
flex: 1;
height: 300px;
background-color: salmon;
</style>
</head>
<body>
<!-- 利用float+margin实现
<div class="left"></div>
<div class="right"></div>
<div class="center"></div> -->
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>全屏布局
利用绝对定位实现
html,body,.parentheight:100%;overflow:hidden;
.topposition:absolute; top:0;left:0;right:0;height:200px;
.leftposition:absolute;left:0;top:200px;bottom:100px;width:200px;
.rightposition:absolute;overflow:auto;left:200px;right:0;top:200px;bottom:100px;
.bottomposition:absolute;left:0;right:0;height:100px;
利用flex实现
.parentdisplay:flex;flex-direction:column;
.topheight:100px;
.bottomheight:50px;
.middleflex:1;display:flex;
.leftwidth:200px;
.rightflex:1;overflow:auto;
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏布局</title>
<style>
/* 利用绝对定位实现
html,
body
overflow: hidden;
height: 100%;
.parent
height: 100%;
overflow: hidden;
background-color: antiquewhite;
.top
background-color: aqua;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
.left
background-color: burlywood;
position: absolute;
top: 200px;
left: 0;
bottom: 100px;
width: 200px;
.right
background-color: coral;
position: absolute;
overflow: auto;
left: 200px;
right: 0;
top: 200px;
bottom: 100px;
.bottom
background-color: darkcyan;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100px;
*/
.parent
background-color: pink;
display: flex;
flex-direction: column;
.top
background-color: darkkhaki;
height: 100px;
.bottom
background-color: blueviolet;
height: 50px;
.middle
height: 200px;
background-color: cornflowerblue;
flex:1;
display: flex;
.left
height: 200px;
background-color: cyan;
width: 200px;
.right
height: 200px;
background-color: darkorange;
flex:1;
overflow: auto;
</style>
</head>
<body>
<!-- 利用绝对定位实现 -->
<!-- <div class="parent">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div> -->
<!-- 利用flex实现 -->
<div class="parent">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>九宫格布局
使用table实现
.parentdisplay:table; table-layout:fixed;width:300px;
.rowdisplay:table-row;
.itemdisplay:table-cell;width:33.3%;height:100px;
使用flex实现
.parentdisplay:flex;flex-direction:column;
.rowheight:100px;display:flex;
.itemwidth:100px;
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格布局</title>
<!-- 利用table实现
<style>
.parent
background-color: skyblue;
display: table;
table-layout: fixed;
width: 300px;
.row
background-color: aqua;
display: table-row;
.item
background-color: antiquewhite;
display: table-cell;
width: 33.3%;
height: 100px;
</style> -->
<!-- 使用flex实现 -->
<style>
.parent
display: flex;
flex-direction: column;
.row
height: 100px;
display: flex;
.item
width: 100px;
background-color: aqua;
</style>
</head>
<body>
<div class="parent">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</body>
</html>
前端布局全部源码
https://github.com/harbinailin/goodcss/tree/main/css/%E5%89%8D%E7%AB%AF%E5%B8%83%E5%B1%80
以上是关于前端面试题前端布局问题的主要内容，如果未能解决你的问题，请参考以下文章