子类元素设置margin-top，父类元素一起移动的原因以及解决思路

1.   margin-top为外边距，一个遗留的问题是两个div，上面的div设计margin-bottom，下面的div设计margin-top，会边距塌陷。

 当父类元素套了子类div，若子类元素设置margin-top有可能会出现父类元素与子类元素同时移动的情况，详情请看图

ps：这是还没有给背景色为黑色的子类div加margin-top

<style>

    * {

        margin: 0;

        padding: 0;

    }

    .primary {

        width: 800px;

        height: 500px;

        margin: auto;

        background: yellow;

    }

    .top {

        width: 500px;

        height: 100px;

        background: #000;

    }

    .middle {

        width: 500px;

        height: 300px;

        background: red;

    }

</style>

<div class="primary">

        <div class="top"></div>

        <div class="middle"></div>

    </div>

若是给子类加了div，效果如图

但若是给父类设置一个边框即可解决上述问题

子类就可以以父类为参照物下去了！ 但是子类与子类之间，即使不给边框，单给红色div设置margin-top依然能达到想要的结果。

如图

难道说计算机还会区别对待吗 

原因：
边距重叠：一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。

2.img标签是用src获取图片，a标签是用href跳转地址，而background-image是用url来设置图片。

都是访问地址，为什么不用同一种属性呢？

src的全称为source(资源)

它的作用是把标签替换为外部资源，不是调用而是替换。

href(Hypertext Reference 超文本引用)

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

url (Uniform Resource Locator,统一资源定位符)

统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址，一般用于引用网页上的文件资源。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

总结：

src是用资源替换掉原来的标签，href是指出地址的位置，url设计在background-image中，是因为background-image不是一个标签，而是一个属性，不能用src替换

所以为什么我们所写的网页，图片不是一个个地址，我们为了让网页变的生动替换掉了原来的标签，那些繁杂的代码，就留给程序员自己，精美的页面就尽情展现给用户。href又像是网页中的信标，指向了一个个新大陆。