前端学习09-CSS元素的定位和浮动

内容回顾

一. 绝对定位(absolute)

1.1. 绝对定位

1.会脱离标准流

2.相对的参照对象

• 最近的祖先定位元素;
• 如果祖先元素都没有定位, 相对视口

3.子绝父相

• 子元素绝对定位
• 父元素相对定位

4.子绝父绝

• 子元素绝对定位
• 父元素绝对定位

5.子绝父固

• 子元素绝对定位
• 父元素固定定位

1.2. position设置absolute/fixed特性

1.都是脱离标准流

2.可以任何设置宽度和高度

3.默认宽度高度是包裹内容

4.不再给父级元素汇报宽度和高度

5.自己内部依然按照标准流布局

6.公式

• 包含块的width = left + right + margin-left + margin-right + width
  • left0 right0 margin 0 auto width: 200px -> 水平居中
  • left 0 right 0 margin 0 -> 宽度沾满包含块的宽度
• 垂直方向也是一样
  • 俺也一样

1.3. 绝对定位案例

网易云item的练习

• 基本布局
• 背景
• 绝对定位

1.4. 粘性定位 sticky

• 基本演练

  • 默认相对定位
  • top: 0 -> 固定(绝对)

• top/bottom/left/right -> 最近的滚动视口

1.5. position多个值总结

1.6. z-index

• 只对定位元素有效
• 兄弟比较

二. 浮动

2.1. 认识浮动

float

• none
• left
• right

2.2. 浮动规则

• 规则一: 向左浮动或者向右浮动
• 规则二: 不能超出包含块;
• 规则三: 浮动元素不能层叠
• 规则四: 浮动元素会将行内级元素内容推出
  • 图文环绕效果
• 规则五: 浮动只能左右浮动, 不能超出本行的高度

2.3. 练习一 - 去除间隙

2.4. 练习二 - 百度页码

2.5. 练习三 - 京东多列布局