css易混淆的点和遇到的问题

（1）body>div:nth-chlid(2)表示body的第二个div孩子；

（2）background-size：cover；/*只会拉伸成一张图片，可能会溢出*/

        background-Size：contain；/*按图片的宽高拉伸，可能不止一张图片*/

（3）因为table>tbody>tr>td，tbody可以省略

         所以table tr>td，并不是table>tr>td

        tr不用设置border，展示不出来效果，背景色可以

（4）遇到的问题

                代码如下：

                        <div>上部层</div>

                        <div> <!--父层-->
                                     <div style="margin-top:200px;">子层</div>
                        </div>

理想中的效果是父层和上部层贴边显示，子层距离父层顶部有200px的距离，但却出现问题，子层和父层贴边了，而父层和上部层却间隔了200px。

网上求助得到如下的一句：

当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用在父元素上。

也就是说因为子层是父层的第一个非空子元素，所以使用margin-top会发生这个错误。

解决的办法有两个：

1、使用浮动来解决，即将子层代码改为：<div style="margin-top:200px;float:left";>子层</div>

2、使用padding-top来解决，即：

                        <div style="padding-top:200px;">
                            <div>子层</div>
                        </div>