【不定时更新】记录舍友李优雅的前端学习历程

前记：css其实算是前端里边比较基础的部分，但是有些意外的小情况却足够让人烦不胜烦，恰巧舍友李优雅正自学前端，遇到了一些问题，我想着不妨记录下来，等到她熟练掌握了之后再拿过去嘲笑她。。。
case 1:
李优雅：你快帮我看一下，为什么显示不出图片来！！

html部分：

<header class="header">
        <div class="header_img"/>
</header>

css部分：

.header
{
    background: #FFF4C1;
    height: 80px;
    position: absolute;
    width: 100%;
}
.header_img
{
    background: url(img/厦大校徽.png);
    width:50px;
    height: 50px;
    position: relative;
    margin: 15px 30px;
    border-style: solid;
}

虽然她的语法有点怪（后来详说），但是我的重心是放在图片显示的问题上，我仔细查看了一下她的路径还有url的写法，发现并没有什么问题，在chrome上也可以看见图片的路径是对的，但是就是没有图片显示。。。

【排除掉所有的而不可能，剩下的，即使再不可能，那也是真相】
于是我默默地在css文件中的header_img里边加上了一句：
background-size: contain;

所以就是图片像素大小的问题，如果一张背景图片的像素过大，就会导致在div中只显示一部分的问题，这个时候用contain属性就会缩小图片以适应div的宽度，相似的，如果图片过小，那么使用cover就可以强行把div的内容填满。
。。。。。。
之后，李优雅就很开心地继续写代码去了，但是当她新增加了一个div之后，她发现了一个新的问题：
html部分

<header class="header">
    <div class="header_img"/>
    <div class="header_title"><a>志愿网</a></div>
</header>

css部分：

.header_img
{
    background: url(img/厦大校徽.png);
    width:50px;
    height: 50px;
    position: relative;
    margin: 15px 30px;
    background-size: contain;
    border-style: solid;
}
.header_title
{
    font-size: 14px;
    position: relative;
    margin: 15px 20px;
    border-style: solid;
}

显示出来的网页：

所以她问我：同级的div排列起来怎么还会覆盖住呢？
我：怎么会呢，div是块级元素，会独占一行的
她：不是阿，就是覆盖住了
我：你设置了浮动吗？
她：没有啊
我：( ⊙ o ⊙ )震惊！

我当时真的是震惊的，简直觉得自己是不是学了假的css
结果！！
结果！！！
是因为

没有闭合。。。。。。。。。。。即使最后写了那个/。。。所以这不是同级元素之间的排列，这是父子之间的。。再加上子元素设置了margin，所以呈现出了那样的样子。
（2017.3.26）