3-5 布局都有什么方式,float和position有什么区别?
1. 标准盒子
布局时遵守块级元素单独占一行,行内元素一行可以布置多个元素。
2. 浮动布局
float。盒子脱离标准流,但还在文档或容器中占据位置。如果父盒子为标准盒子,则会一直浮动到最左边界或者最右边界。要浮动,全浮动。
3. 定位
相对定位:相对于自身的位置。 绝对定位:相对于最近一级相对定位/绝对定位的父级盒子来进行布局。脱离标准流,不占据位置。固定定位:相对于视窗来进行定位 脱离标准流
4. display:flex
弹性盒子布局。按照x、y轴来布局
5. 百分比布局
盒子宽高按照父盒子的百分比进行布局
6. 网格布局
二维布局方式
float和position有什么区别?
float:脱离文档流,但不会脱离文字流,文字会产生环绕效果
position:absolute 会脱离文档流和文字流。不会产生环绕效果