CSS 布局

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 两列等高

1. 背景模拟；
2. 负边距实现；
3. 边框模拟；
4. JS 判断，动态调整；（推荐）
   CSS 本来就是控制显示的，判断是否等高是一种行为，理应由 JS 控制；

4. 三列或多列布局

4.1 两列定宽中间自适应

• 负边距原理；

4.2 左侧定宽右侧及中间自适应

4.3 三列宽度自适应

4.4 三列等高

1. 背景模拟；
2. 负边距实现；
3. 边框模拟；
4. JS 判断，动态调整；（推荐）
   CSS 本来就是控制显示的，判断是否等高是一种行为，理应由 JS 控制；

转载于:https://www.cnblogs.com/HuoAA/p/5074150.html