定位方式 4+1:利用position有4种,一种float
position定位
-
静态定位(文档流定位)默认状态: static, 块级元素从上到下排列,行内元素从左向右排列,元素的位置通过元素的外边距控制。
-
相对定位:relative,元素不脱离文档流,通过left/right/top/bottom从元素初始位置做位置偏移
当元素需要改变位置,并且其它元素不受影响的情况使用相对定位 -
绝对定位:absolute, 元素脱离文档流,通过left/right/top/bottom移动元素,元素坐标相对于窗口(默认)或某一个上级元素
当元素需要改变位置,并且不希望保留原来的位置时使用绝对定位
所谓不脱离文档流,是指当元素移动时,它原来的位置还占着,会起到阻拦其他元素的作用;脱离文档流就是元素不再占位置,它下方或右方的元素会自动靠过来。
- 固定定位:fixed, 元素脱离文档流,通过left/right/top/bottom移动元素,元素坐标只相对于窗口。
当元素需要固定在窗口的某个位置时使用固定定位
浮动定位
- 脱离文档流,元素从当前所在行向左或向右浮动,当撞到上级元素边框或其它浮动元素时停止
- 浮动元素一行装不下会自动换行,换行时有可能被卡主
- 当元素上面有其它元素浮动后则元素会顶上去,如果不希望元素往上移动可以给元素添加clear属性。
- 当元素的所有子元素全部浮动后,自动识别的高度为0,可以通过给元素添加overflow:hidden解决此问题。
- 通过外边距控制元素位置
- 当需要把纵向排列的元素改成横向时使用浮动定位
溢出设置overflow
- hidden :超出范围不显示
- visible(默认):超出范围显示
- scroll:超出范围滚动显示
- 常用方式:
- 1.解决粘连问题
- 2,当内部元素都浮动时,外层高度自动时别为0,需要加overflow:hidden