CSS 布局的三种机制

网页布局的核心——就是利用用 CSS 来摆放盒子。

CSS 提供了3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位

  1. 普通流（标准流）

    • 块级元素会独占一行，从上向下顺序排列。
    • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
      1. 常见的块级元素：div、hr、p、h1~h6、ul、ol、dl、form、table
      2. 常见的行内元素：a、strong、b、em、i、del、s、ins、u、span

  2. 浮动，让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示。


  1. 定位，将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面应用 js 特效。

三种布局机制的位置关系

定位的盒子在最上层 （天空）
浮动的盒子在中间层 （海面）
标准流在最底层 （海底）

应该使用哪种布局

一个完整的网页是由标准流 、 浮动 、 定位一起完成布局的。每种布局都有自己的专门用法。

  1. 标准流，多用于盒子的行排列。
  2. 浮动，多用于多个块级元素在一行显示 或者 左右对齐盒子。
  3. 定位，定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。 但是每个盒子需要测量具体数值。