盒子的巢狀

枕夢發表於2017-04-28
巢狀
在盒子巢狀中，位置不符的問題：
解決方式:
    1、為父盒子新增 overflow：hidden

    2、為父盒子新增padding

    3、為父盒子新增border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div-1{
            overflow: hidden;
            width: 300px;
            height: 300px;
            background-color: orangered;
        }
        #div-2{
            width: 150px;
            height: 150px;
            background-color: yellow;
            margin: 0 auto;
            margin-top: 75px;
        }
    </style>
    <title>巢狀盒子</title>
</head>
<body>

<div id="div-1">
    <div id="div-2"></div
</div>
</body>
</html>

相關文章