CSS | Notion

CSS 三种主要定位机制

1.普通流

普通流指的是，除特殊设定定位方式外，元素默认使用的定位机制

2.浮动

浮动指的是，浮动元素脱离普通流，向指定方向进行浮动定位

3.绝对定位

绝对定位指的是，绝对定位元素脱离普通流，参考最近的已定位的祖先元素，根据相应坐标属性进行定位

CSS四种主要定位方式

1.普通流定位

在CSS定位机制提出之前，元素按照自身默认的状态进行定位，属于普通流定位机制，我们可以称之为普通流定位方式。

其一般是使用table(div)元素帮助定位和布局设置的。另外，也可以通过设定相应块级元素的高度、宽度、内边距、外边距和边框宽度等属性，进行显示位置的调整。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通流定位</title>
    <style type="text/css">
        div.normal{width:100px;height:100px;border: 1px dashed red;}
    </style>
</head>
<body>
    <div class="normal">1.普通流定位元素</div>
    <div class="normal">2.普通流定位元素</div>
</body>
</html>

注意：空间被保留，相互无影响

结果如下：

https://note.youdao.com/yws/public/resource/b4991615f3046448f4f9339afc9ae506/xmlnote/1577FC37E09544E3A5664A3F46B98B8D/779

2.相对定位(relative)

相对定位，是指应用相对定位的元素相对于其应该出现的位置，在上、右、下、左方向上，偏移某个距离进行显示(top,left,right,bottom来改变)。

相对定位属于普通流定位机制，应用相对定位的元素虽然以偏移位置进行显示，但其原本所占的空间将仍旧保留。

案例：