盒子模型塌陷：子元素設定外間距margin-top，導致父元素連帶向下，如下圖
**如下：
*
.box1
.box2
1.給父元素設定border（border-top）父元素高度塌陷：當父元素未設定高度時，其高度為子元素高度，當子元素浮動時，父元素高度變為0，此時父元素下面的元素就會往上移，導致頁面布局混亂，如下圖：2.給父元素設定padding(padding-top)
3.給父元素設定overflow:hidden
**如下：
.box
.content
/*.clear */
1.給父元素設定高度原本是塊元素的元素在使用display:inline-block後會排成一行，此時元素與元素間會留下大約5px的距離，如果不處理，會導致一行排不下，影響頁面布局，如下圖：2.給父元素設定overflow: hidden;
3.新增乙個空標籤清除浮動
**如下：
*
/*ul */
li
1.方法一：給父元素設定font-size: 0; 然後給子元素設定font-size。
2.方法二：將子元素之間的空格和回車鍵全部刪去
float布局導致頁面混亂
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...
引入bootstrap導致布局混亂
專案網頁copy模板，使用後發現引入bootstrap導致頁面布局變小了等問題，查詢後發現，引入樣式的順序應該是 應該將bootstrap首先引入，然後再在下面編寫css或者是引入其他css檔案。一定要將jquery.js檔案放在bootstrap.js之前才行，將重複的js檔案刪除即可 style...
頁面布局混亂問題及解決
初學html和css後編寫前端頁面的時候遇到了兩個控制項混亂的問題，這兩個問題在瀏覽器全屏模式都不會表現出來，所以一開始我也還沒有注意到，我覺得值得記錄一下。1.在頁面插入背景圖的時候，背景圖會隨著瀏覽器的縮放而等比例縮放，如果頁面上只有一張背景圖，這樣就沒關係，但如果背景圖的頁面上還有其他控制項，...