html5 + css 學習小結

我最喜歡的一段話是這麼說的，我們今天的生活由昨天的選擇決定的，我們今天的選擇決定我們明天的生活。所以，少年，爲了明天的生活，奮鬥吧！
這是最近寫靜態頁面遇到的一些問題以及解決方法。
1.div 的hover顯示邊框圖片會向右下方移動的問題
現在的網頁上經常會需要把鼠標移動到圖片上圖片顯示邊框的效果，但是因爲標準盒模型下div的margin，border,padding,content是向外渲染的，所以當鼠標移動到圖片上方時，想要在本來沒有邊框的圖片上顯示邊框，很正常的就會出現邊框顯示後圖片被擠下來了。要解決這個問題可以有兩種方法。
第一種方法是對圖片一開始便設置一個與背景顏色相同的邊框，這樣在hover效果的時候，只需要改變圖片的顏色即可。這樣用戶在使用的時候就不會感覺突兀，不舒服了。

<style>
        .div1{
            width: 100px;
            height: 100px;
            border: 1px solid #ffffff;
        }
        .div1:hover{
            border: 1px solid greenyellow;
        }
    </style>

第二種方法就是在第一個放至圖片的div上方再放置一個div2，div2的大小設置爲第一個div不加邊框的寬度，並利用position將第二個div的z-index設置爲2，給第二個div設置一個hover效果，這樣用戶在將鼠標移動到圖片上時，div2就會顯示邊框，但因爲div2加上邊框之後的寬度正好等於第一個div，就會看起來正好是邊框壓在了第一個div上，用戶體驗就會看起來比較舒服。

.div1{
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .div2{
            width: 98px;
            height: 98px;
            z-index:2;
            top:0;
            left: 0;
        }
        .div2:hover{
            border: 1px solid greenyellow;
        }