3-5 布局都有什么方式,float和position有什么区别?


1. 标准盒子

布局时遵守块级元素单独占一行,行内元素一行可以布置多个元素。

2. 浮动布局

float。盒子脱离标准流,但还在文档或容器中占据位置。如果父盒子为标准盒子,则会一直浮动到最左边界或者最右边界。要浮动,全浮动。

3. 定位

相对定位:相对于自身的位置。 绝对定位:相对于最近一级相对定位/绝对定位的父级盒子来进行布局。脱离标准流,不占据位置。固定定位:相对于视窗来进行定位 脱离标准流

4. display:flex

弹性盒子布局。按照x、y轴来布局

5. 百分比布局

盒子宽高按照父盒子的百分比进行布局

6. 网格布局

二维布局方式

float和position有什么区别?

float:脱离文档流,但不会脱离文字流,文字会产生环绕效果
position:absolute 会脱离文档流和文字流。不会产生环绕效果

相关