近期关于absolute 和 relative学习的一点理解

Posted 2020-06-25

1.relative不脱离文档流，只相对于自身原来的在文档流中的位置进行偏移，所使用top right bottom left是相对于原来的box的对应的margin进行偏移，相对于top(往下)right(往左)bottom(往上)left(往右)这些方向的偏移是正的，相反方向为负，可以总结一下，其实是无论从哪个方向，往内聚的方向为正，往外的方向为负。

 

2.absolute脱离文档流，后面紧随的元素可以补上填充其原来的位置，absolute相对于离其最近的已定位的父元素进行偏移(已定位的可以是relative或absolute或fix),同时top,right,bottom,left也是相对于该元素的对应的padding(注意，absolute是相对于父元素的padding的，relative相对的是margin),同样也是内聚的偏移数值为正。

 

3.一般来说，把需要使用absolute的父元素加上relative，父元素不设置任何的偏移，然后让子元素使用absolute进行相对于父元素的准确偏移，这种情况比较常用。

 

4.float脱离文档流，直到遇到父元素的边界或另一个浮动元素的边界后才停止浮动。

 

5.margin影响附近的元素只影响存在于文档流中的元素。