CSS的五种定位方式【哪一种脱离文档流】

元素自身居中(非内容)

块级元素居中: margin:0 auto;
行内元素和行内块元素: 给上级元素添加 text-align:center;

定位方式

包括:
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
- 浮动定位

静态定位(文档流定位)

格式: position:static; (默认的定位方式 )
特点: 元素以左上为中心, 块级元素从上往下依次排列, 行内元素从左向右依次排列 ,默认情况下无法实现元素层叠显示
如何控制元素的位置?
- 通过外边距控制元素的显示位置

相对定位

格式: position:relative
特点: 元素不脱离文档流(仍然占着原来的位置,后面的元素不会顶上去)
如何控制元素的位置?
- 通过left/right/top/bottom 让元素相对于初始位置做偏移
应用场景: 当需要对某一个元素的位置进行调整,并且其它元素不受影响时使用.

绝对定位

格式: position:absolute;
特点: 元素脱离文档流(不占元素原来的位置, 后面的元素会顶上来)
如何控制元素的位置?
- 通过left/right/top/bottom让元素相对于窗口(默认)或某一个上级元素做位置偏移,如果需要相对于某个上级元素,需要设置上级元素为相对定位
应用场景: 需要让元素相对于某一个上级元素做偏移时使用.

固定定位

格式: position: fixed;
特点: 元素脱离文档流 , 元素固定在窗口的某个位置,不会随着内容移动
如何控制元素位置?
- 通过left/right/top/bottom 让元素相对于窗口做位置偏移
应用场景: 当需要将内容固定在窗口的某个位置时使用

浮动定位

float:left/right
特点: 元素脱离文档流,从当前行向左或向右浮动, 当撞到上级元素边缘或其它元素时停止.
一行装不下会自动折行, 折行时有可能被卡主
当元素的所有子元素全部浮动时, 自动识别的高度为0,后面的元素会顶上来导致显示异常, 给元素添加overflow:hidden解决
应用场景: 纵向排列改成横向排列时使用

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

transition 过渡：实现鼠标放在图片上变化的效果

img{
/*    动画持续时间   transition 过渡*/
    transition-duration: 1s;
}
img:hover{
    transform: scale(1.1);
}

--------------------------------------------------------------------------------------------------------------------------------------------------------------------