CSS 盒子模型：解决 banner 和 foot 图像重叠问题

<p>在 CSS 中，每个元素都被视为一个矩形的盒子，称为盒子模型。盒子模型由四个部分组成：内容区域 (content)、内边距 (padding)、边框 (border) 和外边距 (margin)。</p>
<p>当 banner 和 foot 图像重叠时，通常是因为 #banner 的 margin-top 属性值过大，导致 #foot 被覆盖。为了解决这个问题，可以将 #banner 和 #foot 的 margin-top 值改为 0px，这样就可以避免重叠。</p>
<h3>修正后的代码：</h3>
<pre>
<style type="text/css">
    #top{
        width: 1240px;
        height: 358px;
        margin: 0px auto;
    }
    #main{
        width: 1240px;
        height: 475px;
        margin: 0px auto;
        margin-top: 20px;
    }
    .box1{
        width: 400px;
        height: 475px;
        float: left;
        margin-right: 20px;
    }
    .box2{
        width: 400px;
        height: 475px;
        float: left;
        margin-right: 20px;
    }
    .box3{
        width: 400px;
        height: 475px;
        float: left;
    }
    #banner{
        width: 1240px;
        height: 537px;
        margin: 0px auto;
        border: 8px solid #D87021;
        padding: 10px;
        border-radius: 20px;
    }
    #foot{
        width: 1240px;
        height: 257px;
        margin: 0px auto;
        margin-top: 0px;
    }
</style>
</pre>
<p>通过修改 margin-top 属性，可以轻松地解决 banner 和 foot 图像重叠的问题，使页面布局更加合理美观。</p>