一.CSS定位之position

1.position之static

  • 静态定位/常规定位/自然定位

    • 作用：使元素定位于常规/自然流中

      （块、行垂直排列下去、行内水平从左到右）

    • 特点

      • 忽略top,bottom,left,right或者z-index声明
      • 两个相邻元素都设置外边距，最终外边距为两者中最大的
      • 具有固定的width和height值得元素，如果把左右外边距设置为auto，则左右外边距会自动扩大占满剩余宽度，即这个块水平居中

2.position之relative

  • 相对定位
    • 作用：使元素成为containing-block 是可定位的祖先元素
    • 特点
      • 可以使用top/right/bottom/left/z-index进行相对定位
      • 相对定位的元素不会离开常规流
      • 任何元素都可以设置为relative，绝对定位的后代都可以相对它进行绝对定位
      • 可以使浮动元素发生漂移，并控制它们的堆叠顺序

3.position之absolute

  • 绝对定位（广告浮动）
    • 作用：使元素脱离常规流
    • 特点
      • 脱离常规流
      • 设置百分比：定位最近祖先元素，若没有则以body为祖先元素
      • lrtb如果设置为auto，则被打回原形

4.positon之fixed

  • 固定定位
    • 与绝对定位很像，其区别为：
      • 相对于某个元素做绝对定位
      • 固定定位元素不随视窗滚动而滚动
      • 继承了absolute特点

5.position之sticky

  • 磁铁定位/粘性定位/吸附定位
    • 作用：relative+fixed制造出吸附效果
    • 特点
      • 若产生偏移，原位置还会在常规流中
      • 若最近祖先元素有滚动，它的偏移标尺就是最近的祖先元素
      • 若最近祖先元素没有滚动，那么它的偏移标尺是视窗
      • 上下左右的偏移规则

二.CSS定位之float浮动

1.float基本参数的介绍

  • -float:left
  • -float:right
  • -float:none
  • -float:inherit 继承父元素的float属性

2.CSS中的定位机制

  • 标准流
  • 定位
  • 浮动

3.浮动副作用的解决

  • 手动给父元素添加高度
  • 通过clear清除内部和外部浮动
  • 给父元素添加overflow属性并结合zoom:1使用
  • 给父元素添加浮动