【前端面试题】前端布局问题
目录
使用vertical-align,text-align,inline-block实现
12.15复盘了一下，改了一些拼写错误。如果还有拼写错误我没找出来，请大家指正，共同进步！
单列布局
水平居中
实现子元素相对于父元素水平居中
使用inline-block和text-align实现
.parent{text-align:center;}
.child{display:inline-block;}
优点：兼容性好
缺点：需要同时设置父元素和子元素
使用margin:0 auto实现
.child{margin:0 auto;}
优点：兼容性好
缺点：需要指定宽高
使用table实现
.child{ display:table; margin:0 auto;}
优点：只需要对自身进行设置
缺点：在IE6,7浏览器中需要调整结构
使用绝对定位实现
.parent{position:relative;}
.child{position:absolute; left:50%; transform:translate(-50%);}
不足：兼容性差，只能在IE9以上可用
使用flex布局实现
way1:
.parent{ display:flex; justify-content:center;}
way2:
.parent{display:flex;}
.child{margin: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
.parent{display:table-cell; vertical-align:middles;}
使用绝对定位
.parent{position:relative;}
.child{position:absolute; top:50%; transform:translate(0,-50%);}
使用flex布局
.parent{display: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实现
.parent{display:table-cell; vertical-align:middle; text-align:center;}
.child{display:inline-block;}
使用绝对定位
.parent{ position:relative;}
.child{position:absolute; top:50%; transform:translate(50%,-50%);}
使用flex布局
.parent{display: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
.left{float:left; width:100px;}
.right{margin-left:100px;}
使用float+overflow
.left{float:left; width:100px; }
.right{overflow:hidden;}
使用table
.parent{display:table; table-layout:fixed; width:1000px;}
.left{width:100px; display:table-cell;}
.right{display:table-cell;}
使用flex
.parent{display:flex;}
.left{width:100px;}
.right{flex: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实现
.left{margin-right:-100px;width:100%; float:left;}
.right{float:right;width:100px;}
使用table实现
.parent{display:table; table-layout:table-cell;}
.left{display:table-cell;}
.right{width:100px; display:table-cell;}
使用flex实现
.parent{display:flex;}
.left{flex:1;}
.right{width: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实现
.left{float:left; width:200px;}
.center{float:left; width:200px;}
.right{margin-left:400px;}
使用float+overflow实现
.left{float:left; width:200px;}
.center{float:left; width:200px;}
.right{overflow:hidden;}
使用table实现
.parent{display:table; table-layout:fixed;}
.left,.center,.right{display:table-cell;}
.left,.center{width:200px;}
使用flex实现
.parent{display:flex;}
.left,.center{width:200px;}
.right{flex: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;}
.right{width:200px;float:right;}
.center{margin:0 200px;}
利用table实现
.parent{width:100%;diasplay:table;table-layout:fixed;}
.left,.right,.center{display:table-cell;}
.left,.right{width:200px;}
利用flex实现
.parent{display:flex}
.left,.right{width:200px;}
.center{flex: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,.parent{height:100%;overflow:hidden;}
.top{position:absolute; top:0;left:0;right:0;height:200px;}
.left{position:absolute;left:0;top:200px;bottom:100px;width:200px;}
.right{position:absolute;overflow:auto;left:200px;right:0;top:200px;bottom:100px;}
.bottom{position:absolute;left:0;right:0;height:100px;}
利用flex实现
.parent{display:flex;flex-direction:column;}
.top{height:100px;}
.bottom{height:50px;}
.middle{flex:1;display:flex;}
.left{width:200px;}
.right{flex: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实现
.parent{display:table; table-layout:fixed;width:300px;}
.row{display:table-row;}
.item{display:table-cell;width:33.3%;height:100px;}
使用flex实现
.parent{display:flex;flex-direction:column;}
.row{height:100px;display:flex;}
.item{width: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
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码