盒子的嵌套

最新推荐文章于 2023-08-10 10:27:17 发布

枕梦

最新推荐文章于 2023-08-10 10:27:17 发布

阅读量4.7k

点赞数 8

分类专栏： HTML5+CSS 文章标签：盒子嵌套 div位置

本文链接：https://blog.csdn.net/qq_37768482/article/details/70919540

版权

HTML5+CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

在盒子嵌套中，位置不符的问题：

解决方式:
    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>