經驗總結——靜態頁面佈局中的常見問題

做爲一個web前端的初學者，在靜態頁面的佈局中常常會遇到許多的問題，如今把本身遇到的一些問題及解決方法分享給你們，但願對你們可以有幫助，錯誤之處還望指正！
一、用<div>包含一個<img>標籤時，<img>標籤裏面的圖片下會有一條白色的縫隙
解決方法：由於<img>標籤默認是底部對齊，此時只須要給<img>標籤加一個display：block的屬性將其轉換爲塊狀元素便可。
二、使用列表製做二級導航的時候，二級列表會相對於一級列表有必定的誤差
解決方法：將二級列表設爲絕對定位而且清楚浮動便可
三、關於電腦端頁面的佈局，因爲如今電腦端和手機端的UI基本都是分開來製做，因此在進行電腦端頁面佈局的時候保證正常的分辨率的狀況下顯示正常便可，若是使用百分比佈局全部的元素單位都要使用百分比，不然在頁面大小發生變化的時候不一樣塊會發生必定程度的偏移。
四、關於佈局時候的居中問題，line-height是內容的垂直居中而不是元素的垂直居中，元素的垂直居中能夠利用內聯元素設置vertical-align:middle來實現，在肯定高度的狀況下也能夠經過設置margin或者padding來實現。
五、關於absolute的相對位置的問題
當使用absolute定位的時候，其相對位置是以上一級有position的元素的位置爲基準的，上一級中沒有則上上一級，依次，直至到body元素，則以body元素的位置爲基準。
六、同時使用vertical-align和line-height對於元素位置的影響
解決方法：當文字和圖片處於同一行的時候，設置vertical-align：middle和line-height：center並不能使文字和圖片都處於中間從而實現文字和圖片的居中對齊。

此時讓上級元素的高和圖片的高相同，在圖片屬性中設置vertical-align：top，同時設置文字的height和line-height便可居中。

七、浮動的清除方法

（1）空標籤方法：使用一個空標籤設置其屬性爲clear：both，或者直接調用clearfix類（clearfix類的寫法在下面）

（2）overflow：hidden加在浮動的塊的上一級屬性中

（3）clearfix方法，將clearfix類直接加在浮動元素的父級元素上便可。

clearfix代碼：

.clearfix:after { 
    content:""; 
    display:block; 
    height:0; 
    clear:both; 
} 
.clearfix {*zoom:1;}

八、IE瀏覽器中使用a標籤套img標籤會出現邊框的問題

解決方法：設置a標籤的border：0便可