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);
}

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