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

发布时间 2023-05-31 21:13:40作者: -YBP杨社长

元素自身居中(非内容)

  • 块级元素居中: 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);
}

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