本人在做前端開發相關工作時，遇到過也解決過很多技術性問題。今天起，就從PC端頁面開發開始，理一理新手們可能會遇到的那些坑。

本文非教學文章，僅供有前端開發基礎的同學同僚們一起討論與總結，本人將從零開始持續更新，歡迎大家的批評指正。

高度塌陷問題: 父元素的高度會被子元素撐開，當子元素都設置了浮動時，由於子元素半脫離文檔流，父元素失去子元素的高度，便會產生高度塌陷
　　hack1:父元素overflow:hidden;
　　hack2:子元素下方加一個空div,並設置height:0;clear:both;

img底部空隙問題：inline默認垂直對齊方式是baseline(基線對齊)
　　hack1: 修改img垂直對齊方式(vertical-align:bottom)
　　hack2: 修改div行高使基線下方位置基本被忽略（line-height：0px；）
　　hack3: 修改行內元素的字體大小，從而消除基線基線帶來的影響（繼承自div{font-size:0px;}
　　hack4: 修改img的表現方式為block，從而不再受行內基線影響（display:block;和float:left;都可以，但不建議用display:block,因為這樣從本質上改變了img)
　　hack5：設置div的高度等於圖片的高度

垂直居中問題：
　　1：圖片垂直居中：
　　　　hack1: img後面加上span，兩者都加上vertical-align:middle,同時span要加上height:100%與display:inline-block;
　　　　hack2: div加上line-height:0px與font-size:0px, img加上vertical-align:middle;
　　　　hack3: div加上display:table-cell和vertical-align:middle,然後在此基礎上考慮去掉img下面的空隙
　　2：文字垂直居中：
　　　　hack1: 設置div行高等於div高度
　　3: img與span同時垂直居中：
　　　　hack1: img和span的display都要是inline-block,vertical-align都要為middle,然後設置div行高

文本溢出省略號問題：
1.text-overflow:ellipsis(僅在單行溢出時顯示省略標記，與下面的屬性需要一起使用才有效。）
2.width:value; 容器寬度
3.white-space:nowrap; 單行顯示
4.overflow:hidden; 溢出內容為隱藏

margin重合,累加,溢出問題：
　　1.重合：上方元素margin-bottom:50px,下方元素margin-top:50px,間隙還是50px（如果上下不一樣就取較大的margin）；
　　2.累加：左右盒子中間的margin值會累加，不會重合
　　3.溢出：正常文檔流下，父元素沒有邊框且沒有定位或浮動時，子元素的margin-top會同時加到父元素身上

link與@import的區別：
　　1.本質上的區別：link屬於xhtml標簽，而@import是css提供的
　　2.加載順序的差別：link引用的css會跟頁面同時加載，而@import會在頁面下載完後才加載
　　3.兼容性的差別：@import只有在IE5以上才能識別，而link五此問題
　　4使用dom控制樣式時的差別：javascript控制dom改變樣式時，只能使用link標簽，而@import不可控

get與post的區別：
　　1. get從服務器獲取數據，post向服務器傳送數據
　　2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單各個字段一一對應，在URL中可以看到。
　　post是通過HTTP post機制，將表單內各個字段與其內容放置在HTML header內一起傳送到ACTION所指的URL地址，用戶看不到這個過程。
　　3. get方式，服務端用Request.QueryString獲取變量的值；
　　post方式，服務端用Request.form獲取提交的數據。
　　4. get傳送的數據量小，不能大於2k,post傳送的數據量較大，一般被默認為不受限制。
　　建議： 由於get安全性差速度快，在做數據查詢時建議用get方式；
　　有關機密的信息，以及數據添加刪除，建議用post方式

PC端頁面開發基礎-問題總結（一）