浮动及盒子

1. 浮动(float)

1.1 CSS 布局的三种机制

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

• 标准流
  • 块级元素会独占一行，从上向下顺序排列；
  • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；

浮动：让盒子从标准流中浮起来，主要作用让多个块级盒子一行显示，控制左右

定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，配合 js 特效

1.2 浮动 (float)

作用：让多个盒子水平排列成一行、居左居右

语法：选择器 { float: 属性值; }

属性值：

1. left：元素向左浮动
2. right：元素向右浮动
3. 会浮在标准流的上层显示
4. 不会占标准流盒子的位置
5. 会转换为类似行内块的元素，但元素之间没有间隙
6. 参照父盒子对齐
7. 对齐边框、内边距以内
8. 浮动只会影响它后面的标准流盒子，不影响前面的标准流

• 盒子

• 1、 盒子模型介绍

• 在网页中元素可以产生矩形的一个框，这些框会影响元素之间的距离。

  *盒子模型的概念

  *高和宽设置

  *边框设置

  *内边距设置

  *外边距设置

  2、 盒子模型概念

  *盒子模型用来“放”网页中的各种元素

  *网页设计中内容，如文字、图片等元素，都可以是盒子（DIV嵌套）