巧用盒子模型

最新推荐文章于 2025-05-19 21:16:36 发布

weixin_33788244

最新推荐文章于 2025-05-19 21:16:36 发布

阅读量99

点赞数 1

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016461439

一、首先理一下盒子模型的基本概念
1）默认盒子模型
使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。width=content

2）边框盒子模型
使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。width=content+padding+margin

所以我们可以利用边框盒子模型的特性，使用padding来调节大小。从而解决图形大小变换变形的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>呼吸灯demo</title>
    <style>
        .container {
            width: 230px;
            height: 330px;
            background-color: #343434;
            margin: 0 auto;
        }
        .rec {
            height: 230px;
            box-sizing: border-box;/*边框盒子，外圆是被挤出的*/
            padding: 34px;
        }
        .rec > .outer_circle {
            box-sizing: border-box;
            height: 100%;
            border:6px solid #999;
            border-radius: 50%;
            padding: 10px;
        }
        .rec > .outer_circle > .inner_circle {
            box-sizing: border-box;
            height: 100%;
            border:16px solid #fff;
            border-radius: 50%;
        }
        .info {
            color: #fff;
            text-align: center;
            padding: 1em 0;
        }

    </style>
</head>
<body>
    <div class="container">
        <!-- 正方形，呼吸灯的容器 -->
        <div class="rec">
            <div class="outer_circle">
                <div class="inner_circle">
                    
                </div>
            </div>
        </div>
        <!-- 数据信息显示 -->
        <div class="info">
            HI
        </div>
    </div>
</body>
</html>

完成呼吸灯制作

之后只要通过animation控制padding的大小就能控制圆的大小而不会动画过程中变形。