作為一枚初級程式猿，難免在製作靜態頁面時會遇到一些bug，在此，我從網上找了一些資料並且結合自己的專案開發經驗，總結了一些在靜態頁面布局時可能會遇到的問題，希望能對初級程式猿有一定的幫助(資料請參考：本文在此基礎上有所擴充套件和詳述：
1.
標籤被包裹時，你會發現
下會有一條縫隙
原因分析：
是乙個特殊的標籤，它屬於行內元素又有塊級元素的部分屬性，準確點說，它屬於display:inline-block(但又有區別)，而且它預設底部對齊
解決方法：給
標籤加乙個display:block將其轉換為標準的塊級元素即可解決
2.使用製作導航欄的二級導航時，二級導航所在ul總會有一定的偏差
原因分析：二級導航與一級導航為子父級關係，而且我們習慣與把二級導航的ul放在一級導航內元素的後面，導致瀏覽器解析時會解析出多的文字節點
解決方法：給二級導航設定為絕對定位，並清楚浮動
3.在製作pc端和移動端的靜態頁面時，由於pc端和移動端的ui都是分開的，在pc端進行靜態頁面布局時保證正常解析度正常顯示，倘若你使用百分比布局時，在頁面大小發生變化的時候會發生元素的偏移
原因分析：靜態頁面布局，pc端和移動端的頁面大小是有很大差別的，而且pc端和移動端各種瀏覽器的渲染也有差別，畫素點佔比也有差別
解決方法：給頁面中的所有元素單位都使用百分別，切將字型單位大小設定為em/rem等單位
4.布局時居中，利用line-height想讓元素垂直居中與頁面，利用text-align讓元素水平居中
原因分析：line-height是指行高，既文字的行高，延伸為內容的行高，text-align指文字水平居中，可延伸為內容水平居中
解決方法：元素的垂直居中利用行內元素設定vertical-align:middle實現，水平居中可以設定塊級元素的margin:auto實現，在特殊情況(高度確定等)下，可以使用絕對定位，設定偏移量為50%，同時設定對應方向的margin反向偏移元素寬高距離一半(例：某div寬度100px,高100px,先讓該div水平居中,絕對定位後設定left:50%;margin-left:-50px)，此方法居中後可根據情況而清除浮動
5.在使用position:absolute定位時，其相對位置不明確，想當然的使用此方法定位，結果發現定位元素沒有達到理想的效果
原因分析：position:absolute的相對位置是已上一級有position設定的元素位置為基準，若上一級沒有則再往上一級，依次類推直到body元素，也就是說，任何元素都沒設定position，此時absolute的基準是body元素
解決方法：在使用position:absolute定位時，找到你所想定位的地方，再找到此地方所在的元素，並以此元素為父級元素(定位元素放入其中)，並給此父級元素設定position:relative即可
6.同時使用vertical-align和line-height對於元素位置的影響
原因分析：vertical-align和line-height，乙個是針對元素，乙個是針對內容，當然此內容也可以包括子級元素，這時對子級元素設定二者可能出現屬性重疊，造成效果不理想，例：當文字和處於同一級是，同時設定vertical-align和line-height並不能使文字和居中對齊
解決方法：此時讓上級元素的高和的高相同，在屬性中設定vertical-align：top，同時設定文字的height和line-height即可居中(line-height的值為height的一半)
7.元素高度塌陷問題(並非只有浮動)
原因分析：當乙個元素的所有子級元素都脫離正常文件流(浮動或者絕對定位)，而父級元素仍處於正常文件流，由於層級關係，導致父級元素中沒有實打實的元素存在，導致高度撐不起來，從而對父級元素設定的有關背景的樣式全部無效
解決方法：
7-1.對父級元素設定適合的css高度，強行撐起高度(不推薦使用，建議父級元素高度固定時使用)
7-2.clear:both清除浮動——新建乙個樣式選擇器css命名為「clear」的div，對應選擇器樣式為「clear:both」，在父級元素結束前加此div引入「class="clear"」樣式(即空標籤方法，不推薦使用)
7-3.給父級元素設定overflow:hidden(因為overflow:hidden屬性相當於是讓父級緊貼內容，但會導致部分子級元素顯示異常，只推薦沒有使用position或對overflow:hidden理解時使用)
7-5.給父級元素設定 display:table(不推薦使用)
7-6.結尾處加 br標籤 clear:both(不推薦使用)
7-7.給父級元素設定 overflow:auto (不推薦使用，需要出現滾動條或者確保你的**不會出現滾動條使用)
7-8.給父級元素定義 偽類:after 和 zoom (clearfix方法，此方法為當前主流清楚浮動方法，強烈推薦使用，建議定義公共類，以減少css**)
clearfix**如下：
.clearfix:after .clearfix8、ie瀏覽器中使用a標籤套img標籤會出現邊框的問題
原因分析：ie瀏覽器是目前的主流瀏覽器中相容性問題最多的瀏覽器
解決方法：同時設定img和a標籤的border：0即可
9、z-index的使用
z-index只能在position屬性值為relative或absolute或fixed的元素上有效。
希望這些經驗對初級程式猿有一定的幫助！
關於頁面布局的一些注意點
1 在div布局不好解決的地方不用猶豫，使用table！2 div使用百分比大小時如果其又受其他元素的固定高寬影響的話overflow無效，加入position absolute即可解決 3 當有dtd頭存在時height的百分比單位不起作用 4 當td內沒有文字內容時td不顯示，即使裡面有div等...
頁面布局的一些心得
關於 1.用於控制大的板塊比較好，居中很方便。同行同列等相對位置不會錯亂。2.難於精確控制，由於歷史長，屬性，css等都能控制，也容易混亂。3.如果想以表簡單的方式控制位置，特別是類似margin的位置，有點力不從心。關於div 1.box模型比較煩，要控制寬高，就必須計算margin，border...
頁面布局的一些心得
關於 1.用於控制大的板塊比較好，居中很方便。同行同列等相對位置不會錯亂。2.難於精確控制，由於歷史長，屬性，css等都能控制，也容易混亂。3.如果想以表簡單的方式控制位置，特別是類似margin的位置，有點力不從心。關於div 1.box模型比較煩，要控制寬高，就必須計算margin，border...