老师这样对吗？按钮使用百分比设置宽度，这块我不太明白对不对

来源：2-12 自由编程

我不是胖球球

2021-09-16 15:32:04

相关代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>2.5 水平居中和垂直居中</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .box-container {
            width: 100%;
            height: 1000px;
            background-color: rgba(22, 22, 22, 0.815);
        }

        .inner-container {
            width: 50%;
            background-color: #fff;
            border-radius: 5px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .info-container {
            text-align: center;
            font-size: 18px;
            margin: 20px 25px;
        }

        .btn-container {
            display: flex;
            justify-content: space-around;
            padding-bottom: 20px;
        }

        .left-btn,
        .right-btn {
            width: 40%;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            border: none;
            color: white;
            border-radius: 5px;
        }
        .left-btn{
            background-color: rgb(35, 58, 122);
        }
        .right-btn {
            background-color: rgba(138, 133, 133, 0.856);
        }
    </style>
</head>

<body>
    <!-- 要求：1. 为最外层的大盒子box设置宽高 ,使它相对浏览器屏幕100%显示 ,并为其设置一个半透明的背景色 ,实现遮罩层效果
    2. 里面的内容盒子inner设置宽度50% ,不设置高度 , 让里面的内容撑起来 。并设置白色背景色和圆角样式。 使用定位和translate让它在box水平垂直居中显示 。并设置填充值能够让inner里面的内容整体水平垂直居中显示。
    3. 里面的提示信息p元素设置文字水平居中。
    4. 按钮可以使用flex布局，并使用百分比设置宽度，高度设置一个固定值 。按钮文字水平垂直居中 ，垂直居中要使用行高设置。 -->

    <script src="http://192.168.1.37:1337/vorlon.js"></script>
    <div class="box-container">
        <div class="inner-container">
            <div class="info-container"><span>确定要删除吗？</span></div>
            <div class="btn-container">
                <button class="left-btn">确定</button>
                <button class="right-btn">取消</button>
            </div>
        </div>
    </div>
</body>

</html>

写回答

1回答