1. 盒模型

2. DOCTYPE

1. STRICT（嚴格類型）； 2. TRANSITIONAL（過渡類型）； 3. FRAMESET（框架類型）；

• IE 有Quirks（怪異）模式和Standard（標準）模式。
• 如果DOCTYPE不規范，則會觸發 IE 的Quirks（怪異）模式，
  導致對 CSS 不是以標準進行渲染。

3. 兩列頁面布局

3.1 兩列定寬結構

3.2 兩列自適應結構

• 負邊距；

3.3 單列定寬單列自適應結構

3.4 兩列等高

背景模擬；

負邊距實現；

邊框模擬；

JS 判斷，動態調整；（推薦）
CSS 本來就是控制顯示的，判斷是否等高是一種行為，理應由 JS 控制；

4. 三列或多列布局

4.1 兩列定寬中間自適應

• 負邊距原理；

4.2 左側定寬右側及中間自適應

4.3 三列寬度自適應

4.4 三列等高

背景模擬；

負邊距實現；

邊框模擬；

JS 判斷，動態調整；（推薦）
CSS 本來就是控制顯示的，判斷是否等高是一種行為，理應由 JS 控制；

轉載于:https://www.cnblogs.com/huoteng/p/4970658.html

總結

以上是生活随笔為你收集整理的CSS 布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。