【在一个父元素的大盒子里放一个子元素小盒子，大盒子的左边边框丢了，这是什么情况？？ _盒模型】

在一个父元素的大盒子里放一个子元素小盒子，大盒子的左边边框丢了，这是什么情况？？

我也踩过这个坑( 3 )

已统计您的踩坑,无需重复点击

回答(1)

盒模型

详细描述

截图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0;minimum-scale=1.0; 
    maximum-scale=1.0; user-scalable=no;">
    <title>捉鬼游戏</title>
    <style pyte="txet/css">
    html{
        font-size:312.5%;
    }
    body{
        margin: 0;
        font-size:initial;
    }
    p,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* header眉页 */

    header{
        height:.9rem;
        background: #29BDE0;
    }
    .left-box{
        width: 1rem;
        border:none;
        background: #29BDE0;
        margin: .3rem 0 0 .22rem;
        outline:none;
        
    }
    .left{
        width:.34rem;
        margin: .08rem;
        border: .02rem solid #FFFFFF;
    }

    /* main主体 */
    .main-box{
        height: 1.16rem;
        margin: .27rem .36rem;
        border: solid .01rem #C9C9C9;
        background: #FFFFFF;
        line-height: 1.16rem;
        text-align:center;
        font-size: .35rem;
        color: #9A9A9A
    }
    .arrows::after{
        display: inline-block;
        float: right;
        content: "";
        width: .24rem;
        height:.24rem;
        margin: .42rem .2rem 0 0;
        border-top:.05rem solid #E7E7E7;
        border-right: .05rem solid #E7E7E7;
        transform: rotate(45deg);
    }

    /* footer尾页 */
    .footer-box{
       height:7.76rem;
       margin: 0 .35rem .62rem .35rem;
       border: solid .01rem #C9C9C9;
       background: #FFFFFF;
    }
    .top-box{
        height: .9rem;
        border-bottom: .01rem solid #FBB435;
        background: #FFFFFF;
    }
    </style>
</head>
<body>
    <header>
        <button class="left-box" type="button">
            <p class="left"></p>
            <p class="left"></p>
            <p class="left"></p>
        </button>
    </header>
    <main>
        <div class="main-box">
            <p class="arrows">上次游戏：捉鬼猜词版</p>
        </div>
    </main>
    <footer>
        <ul class="footer-box">
            <li class="top-box"></li>
        </ul>
    </footer>
</body>
</html>

编辑于2024-04-26

时间排序

热门排序

[上海|结业弟子]JS-燕赤霞
0

刚才试了一下，把边框的宽度稍微给大一点，就显示完整了，具体的原理不清楚，估计是值太小了，显示问题

查看全部>

编辑于2018-12-07

去第页