前記：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
結果！！
結果！！！
是因為