經驗總結——靜態頁面佈局中的常見問題
作為一個web前端的初學者，在靜態頁面的佈局中經常會遇到許多的問題，現在把自己遇到的一些問題及解決方法分享給大家，希望對大家能夠有幫助，錯誤之處還望指正！
1、用<div>包含一個<img>標籤時，<img>標籤裡面的圖片下會有一條白色的縫隙
解決方法：因為<img>標籤預設是底部對齊，此時只需要給<img>標籤加一個display：block的屬性將其轉換為塊狀元素即可。
2、使用列表製作二級導航的時候，二級列表會相對於一級列表有一定的偏差
解決方法：將二級列表設為絕對定位並且清楚浮動即可
3、關於電腦端頁面的佈局，由於現在電腦端和手機端的UI基本都是分開來製作，所以在進行電腦端頁面佈局的時候保證正常的解析度的情況下顯示正常即可，如果使用百分比佈局所有的元素單位都要使用百分比，否則在頁面大小發生變化的時候不同塊會發生一定程度的偏移。
5、關於absolute的相對位置的問題
當使用absolute定位的時候，其相對位置是以上一級有position的元素的位置為基準的，上一級中沒有則上上一級，依次，直至到body元素，則以body元素的位置為基準。
6、同時使用vertical-align和line-height對於元素位置的影響
解決方法：當文字和圖片處於同一行的時候，設定vertical-align：middle和line-height：center並不能使文字和圖片都處於中間從而實現文字和圖片的居中對齊。
此時讓上級元素的高和圖片的高相同，在圖片屬性中設定vertical-align：top，同時設定文字的height和line-height即可居中。
7、浮動的清除方法
（1）空標籤方法：使用一個空標籤設定其屬性為clear：both，或者直接呼叫clearfix類（clearfix類的寫法在下面）
（2）overflow：hidden加在浮動的塊的上一級屬性中
（3）clearfix方法，將clearfix類直接加在浮動元素的父級元素上即可。
clearfix程式碼：
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;}
8、IE瀏覽器中使用a標籤套img標籤會出現邊框的問題
解決方法：設定img和a標籤的border：0即可
9、z-index的使用
z-index只能在position屬性值為relative或absolute或fixed的元素上有效。
z-index值只決定同一父元素中的同級子元素的堆疊順序。父元素的z-index值（如果有）為子元素定義了堆疊順序（css版堆疊“拼爹”）。
向上追溯找不到含有z-index值的父元素的情況下，則可以視為自由的z-index元素，它可以與父元素的同級兄弟定位元素或其他自由的定位元素來比較z-index的值，
決定其堆疊順序。同級元素的z-index值如果相同，則堆疊順序由元素在文件中的先後位置決定，後出現的會在上面。
所以如果當你發現一個z-index值較大的元素被值較小的元素遮擋了，請先檢查它們之間的dom結點關係，多半是因為其父結點含有啟用並設定了z-index值的position定位元素。