本文主要介绍了在面试中较为常见的CSS笔试题，如果以下的题目你全都会，并且部分题目能提供两种甚至两种以上的解决方式，那么说明你的CSS功底还是比较扎实的，本文对您的参考作用不大，可以略过，如果你是前端初学者/其中部分不会，那么掌握本文中的CSS布局，还是非常有用的。
1.大盒子内小盒子水平垂直居中
2.实现1-6的骰子
(1)1点
(2)2点
(3)3点
(4)4点
(5)5点
(6)6点
3.实现三角形
4.实现左侧盒子固定，右侧盒子自适应
1.大盒子内小盒子水平垂直居中（代码）
(1)使用弹性盒子
<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>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 50px auto;
background-color: teal;
display: flex;
justify-content: center;
align-items: center;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
(2)使用定位+ transform
<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>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 50px auto;
background-color: teal;
position: relative;
}
.box2{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
(3)使用定位+margin
<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>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 50px auto;
background-color: teal;
position: relative;
}
.box2{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2.实现1-6的骰子（代码）
(1)1点
<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>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 50px auto;
background-color: teal;
position: relative;
}
.box2{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
(2)2点
<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>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 50px auto;
background-color: teal;
position: relative;
}
.box2{
position: absolute;
left: 10%;
top: 30%;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
}
.box3{
position: absolute;
left: 55%;
top: 30%;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
(3)3点
<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>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 50px auto;
background-color: teal;
}
.box2,.box3,.box4{
width: 100%;
height: 33.33%;
}
.point{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
}
.box3{
position: relative;
}
.box3 .point{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.box4{
display: flex;
justify-content: end;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="point"></div>
</div>
<div class="box3">
<div class="point"></div>
</div>
<div class="box4">
<div class="point"></div>
</div>
</div>
</body>
</html>
(4)4点
<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>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 50px auto;
background-color: teal;
position: relative;
}
.box2{
position: absolute;
left: 10%;
top: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
}
.box3{
position: absolute;
left: 55%;
top: 10%;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
}
.box4{
position: absolute;
left: 10%;
top: 10%;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
}
.box5{
position: absolute;
left: 55%;
top: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>
(5)5点
<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>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 50px auto;
background-color: teal;
position: relative;
}
.box2{
position: absolute;
left: 13%;
top: 60%;
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
.box3{
position: absolute;
left: 58%;
top: 10%;
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
.box4{
position: absolute;
left: 13%;
top: 10%;
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
.box5{
position: absolute;
left: 58%;
top: 60%;
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
.box6{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</body>
</html>
(6)6点
<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>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 50px auto;
background-color: teal;
position: relative;
}
.box2{
position: absolute;
left: 13%;
top: 37%;
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
.box3{
position: absolute;
left: 58%;
top: 5%;
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
.box4{
position: absolute;
left: 13%;
top: 5%;
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
.box5{
position: absolute;
left: 58%;
top: 37%;
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
.box6{
position: absolute;
left: 13%;
top: 70%;
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
.box7{
position: absolute;
left: 58%;
top: 70%;
width:80px;
height:80px;
border-radius: 50%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
</div>
</body>
</html>
3.实现三角形（代码）
思路: 宽高为0，边框透明
<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>Document</title>
<style>
.box1{
width: 0;
height: 0;
border: 50px solid red;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
4.实现左侧盒子固定，右侧盒子自适应（代码）
思路:使用flex布局
<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>Document</title>
<style>
.box{
width: 500px;
height: 200px;
background-color: purple;
margin: 50px auto;
display: flex;
}
.box-left{
width:100px;
height:100%;
background-color: yellowgreen;
}
.box-right{
flex:1;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box-left"></div>
<div class="box-right"></div>
</div>
</body>
</html>
思路:使用定位+设置内边距
<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>Document</title>
<style>
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.box-right{
width: 500px;
height: 200px;
background-color: skyblue;
padding-left: 100px;
margin: 50px auto;
position: relative;
}
.box-left{
position: absolute;
left: 0;
top: 0;
width:100px;
height:100%;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box-right">
1123
<div class="box-left"></div>
</div>
</body>
</html>
