麻烦老师看一下有什么问题
来源:2-12 自由编程
Yuujio
2021-06-26 10:52:35
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100vh;
height: 100vh;
background-color: rgba(20, 8, 8, 0.192);
}
.inner{
width: 50%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background-color: #fff;
border-radius: 10px;
}
.inner p{
text-align:center;
padding:30px 0;
}
.inner .buttonbox{
display: flex;
justify-content:center;
align-items:center;
}
.inner .buttonbox button{
width: 40%;
height: 40px;
border-radius: 10px;
color: aliceblue;
margin: 10px;
margin-bottom: 30px;
}
.inner .buttonbox .blue{
background-color: rgba(51, 59, 163, 0.856);
border: 1px rgba(51, 59, 163, 0.856);
}
.inner .buttonbox .grey{
background-color: rgb(156, 148, 148);
border: 1px rgb(156, 148, 148);
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<p>确认要删除吗?</p>
<div class="buttonbox">
<button class="blue">确认</button>
<button class='grey'>取消</button>
</div>
</div>
</div>
</body>
</html>
1回答
同学你好,整体思路是对,有一个问题需要注意调整下,如下:
打开页面,没有调到手机模式时,box盒子宽度没有填充满整个页面,如下图所示:
原因:设置box盒子宽度的单位写成了vh,按着视口高度计算了
建议:调整为vw。如下:
祝学习愉快~
相似问题