元素在页面上的定位体系

Posted 2021-03-21 hudingbiao

　共有三大体系：常规流（normal flow） 浮动（float） 绝对定位（absolute position）

　　常规流：在没有css的干预下，块级元素独占一行，宽高可设；行内元素并排显示，宽高自动。

当元素浮动后，脱离文档流。因为子级元素浮动后导致父级高度坍塌。

　　浮动：1.左浮动的元素向上向左排列　　

　　　　　2.右浮动的元素向上向右排列；

　　　　　3.浮动盒子的顶边不得高于上一个盒子的顶边；

　　　　　4.若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左边或右移动（包裹性：块级元素浮动后宽度折叠到内容区域）

　　　　　5.浮动元素会避免常规元素，常规元素无视浮动元素（行内元素浮动后可以设置宽高、padding.margin;块级元素浮动后宽度为：自动，内容有多宽就多宽）　　

　　绝对定位（absolute position）：绝对元素以包含它离它最近的非静态定位元素的（0,0）点（其父级元素position不是static值，就会定位到其父级那，其祖先元素position不是static值，就会定位到其父级那，选择最近），会脱离文档流。