布局顶部外边距margin会使整个网页都有外边距的解决问题

阅读更多

在网页布局的时候，经常遇到的一个问题：
                希望一个元素距离网页顶部20px,但出来的效果是整个网页都距离顶部20px。

    代码：
                /*body的直接子元素*/
                .container {
                    margin-top: 20px;
                }

    原因：
                盒模型的外边距叠加。由于叠加，.container的20px顶部外边距就叠加到了body元素的样式上。所以一次类推，如果.container内部还有一个块级元素，还是顶部外边距20px，先是叠加到了.container的样式上，此时.container的顶部外边距就是20px(深刻理解叠加)，最后还是叠加到了body的样式上。

    解决方案：
                1、给body加上border样式，border-color等于背景颜色或transparent。这样body就形成了一个框了，.container元素的margin-top就会相对于这个框。
                2、可以把外边距转为内边距。可以在.container元素上padding-top: 20px;我经常运用这一种。便于控制页面的宽度和高度。

    说起盒模型，有两种，一种是w3c的标准盒模型，一种是IE的盒模型，个人测试是IE8还在运用自己的盒模型，IE9之后就标准化了。实际上，IE的盒模型更符合逻辑。可以用css3的box-sizing属性使不同的浏览器都运用一种盒模型标准。这里的测试我是在box-sizing: border-box;下测试的。至于盒模型，可以上网搜啊。很简单。

    以上观点只是我的个人观点，如有错误的地方，还敬请斧正。