css正方形盒

M18771556987

已于 2023-03-16 00:28:32 修改

阅读量188

点赞数

文章标签： css 前端 html Powered by 金山文档

于 2023-03-16 00:25:44 首次发布

本文链接：https://blog.csdn.net/weixin_36878452/article/details/129574590

版权

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
        }
        .container {
            display: flex;
            width: 100%
        }
        .pie {
            flex: 1;
        }
        .pie .max-width {
            max-width: 300px;
            position: relative;
            margin: 0 auto;
        }
        .pie-1 .rect {
            background: red;

        }
        .pie-2 .rect {
            background: green;
        }
        .pie-3 .rect {
            background: blue;
        }
        .pie-4 .rect {
            background: yellow;
        }
        .rect {
            width: 90%;
            padding-top: 90%;
            position: relative;;
            margin: 0 auto;
        }
        .rect-flex {
            display: flex;
            justify-content: space-evenly;
        }
        .rect-vh {
            width: 20vw;
            height: 20vw;
            padding: 10px;
            display: flex;
            box-sizing: border-box;
            max-width: 200px;
            max-height: 200px;
        }
        .rect-vh>div {
            flex: 1;
        }
        .rect-container-1 {
            background: red;
        }
        .rect-container-2 {
            background: green;
        }
        .rect-container-3 {
            background: blue;
        }
        .rect-container-4 {
            background: yellow;
        }
        .rect-container-5 {
            background: pink;
        }
    </style>
</head>
<body>
    <ul class="container">
        <li class="pie pie-1">
            <div class="max-width">
                <div class="rect">
                </div>
            </div>
        </li>
        <li class="pie pie-2">
            <div class="max-width">
                <div class="rect"></div>
            </div>
        </li>
        <li class="pie pie-3">
            <div class="max-width">
                <div class="rect"></div>
            </div>
        </li>
        <li class="pie pie-4">
            <div class="max-width">
                <div class="rect"></div>
            </div>
        </li>
    </ul>

    <div class="rect-flex">
        <div class="rect-vh">
            <div class="rect-container-1"></div>
        </div>
        <div class="rect-vh">
            <div class="rect-container-2"></div>
        </div>
        <div class="rect-vh">
            <div class="rect-container-3"></div>
        </div>
        <div class="rect-vh">
            <div class="rect-container-4"></div>
        </div>
        <div class="rect-vh">
            <div class="rect-container-5"></div>
        </div>
    </div>
</body>
</html>