一、原理

• CSS中，存在3种的定位机制： - 标准文档流（Normal flow）

  • 浮动（Floats）
  • 绝对定位（Absolute positioning）

• 标准文档流：

  • 从上到下，从左到右，输出文档内容。
  • 由块级元素和行级元素组成。

• 块级元素：

  • 从左到右撑满页面，独占一行。
  • 触碰到页面边缘时，会自动换行。

• 行级元素：

  • 能在同一行内显示。
  • 不会改变HTML文档结构

• 块级元素和行级元素都是盒子模型。

• 盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸。

• 盒子模型的三维立体结构图:

  • 边框（border），位于盒子的第一层。
  • 元素内容（content）、内边距（padding），两者同位于第二层。
  • 背景图（background-image），位于第三层。
  • 背景色（background-color），位于第四层。
  • 整个盒子的外边距（margin），位于第五层。

---

二、布局

自动居中一列布局

• 块级元素，margin属性—设置自动居中（auto）。
• 原理：（浏览器宽 - 外包含层宽）/ 2 = 外边距。
• 若同时还设置了 浮动或绝对定位，则该方法无法居中。

横向两列布局

• float： 元素会左移，或右移，直至触碰到容器为止。设置了浮动的元素，仍旧处于标准文档流中。
  • 对紧邻其后元素的影响：相邻元素上移，占据其后位置；紧挨着它的，并排显示。
  • 浮动导致问题： 父元素高度无法自动扩展。 元素上移，填满浮动元素右侧（或中间）的间隙。浮动元素对相邻元素的影响，会导致页面布局混乱。
• 清除浮动的常用方法： 1. clear属性—常用clear:both。2. 浮动元素父级同时设置width:100%(或固定宽度) + overflow:hidden。
• 利用浮动实现横向两列布局：****1. 两div均设置左浮动，使用margin设置两者间间距。2. div设置左浮动，另一div设置右浮动。
• 利用定位实现横向两列布局：使用absolute实现横向两列布局—常用于一列固定宽度，另一列宽度自适应的情况。
  • 固定宽度列的高度 > 自适应宽度的列。
  • 弊端：固定宽度列的高度，如果小于自适应宽度的列，则自适应宽度列中的内容，会从父包含块（设置了相对定位的元素中溢出）。
  • 实际布局中，应以浮动布局为主，绝对定位布局为辅。

横向三列布局（圣杯布局）（双飞翼布局）

• 左：position:absolute; left:0; ，右：position:absolute; right:0;，中间：margin:0 左宽 0 右宽; 。（也可用float实现）。
• 左右宽度固定，中间宽带自适应；并且中间先加载（中间一般内容最重要，中间放文档流前面）。

混合布局

• 比如在两列布局的right中又进行两列布局，或在一列布局中加两列布局。

等高布局

• 左右两列高度自适应拓展，并且相等。

.warp { width: 900px; margin: 0 auto; overflow: hidden; }
.left { width: 200px; background: red; float: left; padding-bottom: 10000px; margin-bottom: -10000px; }
.right { width: 700px;background: blue; float: right; padding-bottom: 10000px; margin-bottom: -10000px; }
/*左右高不定，由内容撑开；若左侧内容比右侧多，右高随左定；反之亦然。*/
/*IE6下用margin负值，超出边界的地方都会被父级切掉，因此负值的要加relative。*/

• 原理： 当加了padding-bottom时，会由padding把父级撑开。但又加了margin-bottom负值，减少了该元素所占的大小。因此父级高度塌陷，完全由子级的内容撑开。此时，padding的高度还在，但并不在父级中占面积。