css布局方式讲解

HTML的三种布局方式：标准流、浮动、定位。

1、定位position的参数有

image.png

1、static是默认参数，标准流。
2、relative 相对定位。还是在正常的标准流中，通过left、top、right、bottom实现偏移（相对自身在标准流中的正常位置）。
3、absolute 绝对定位。脱离正常的标准文档流，通过left、top、right、bottom实现偏移（相对自身在标准流中的正常位置）
4、fixed 固定定位。脱离正常的标准文档流，通过left、top、right、bottom实现偏移（相对于屏幕的四个角点进行定位），不受父元素和子元素的影响。
5、inherit 继承。可以从父元素继承定位方式，即自身的定位方式和父元素保持一致。

image.png

2、浮动float

float和position:absolute有点类似，都具有包裹性（宽度不是整行，变成0）和破坏性（父元素的高度塌陷）。但是float通过left和right控制位置，position:absolute通过left、top、right、bottom实现偏移（相对自身在标准流中的正常位置）。