老师，请帮我看看

来源：2-11 编程练习

我不是胖球球

2021-04-23 14:18:49

问题描述：老师请帮我看看bd2的注释部分 margin-left：-20px是自己试出来的，结果是对的，但是不明白为什么margin-left不是正的，要设置成负的

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        /*补充代码*/
        .box{
            position: relative;
        }

        .box .bd1 {
            width: 0;
            height: 0;
            float: left;
            border: 100px solid transparent;;
            border-left-color: red;
            border-radius: 80px;
            /* left: 20px; */
        }

        .box .bd2 {
            float: left;
            position: absolute;
            width: 0;
            height: 0;
            border: 100px solid transparent;;
            border-right-color: red;
            border-radius: 80px;
            /* 自己试出来的，结果是对的，但是不明白为什么margin-left不是正的，要设置成负的 */
            margin-left: -20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="bd1"></div>
        <div class="bd2"></div>
    </div>
</body>

</html>