关于position的relative和absolute。还有那个怪异的float的作用。

1 篇文章 0 订阅

(一)定位
relative是相对于自己来定位的,relative 不脱离文档流。
例如:.some {position:relative;top:-50px;},
1).some会在相对于它原来的位置上移50px。
2)他原来的位置会保留着,也就是有了一块空白区域。(因为它不脱离文档流)


absolute是相对于自己最近的父元素来定位的,其默认的父元素就是body。
absolute脱离文档流,所以不会象relative一样留有空白。
更确切描述是:absolute是相对于最近的一个有relative定位的父元素进行绝对定位,如果没有,则以body为父进行绝对定位。


从应用的角度来说,relative常用于包含有absolute元素的容器元素上。 


(二)浮动
对于float,其干的事情也是在做定位。
比如,实现文字环绕一个图片的效果。
一般的使用场景如:采用浮动方法实现页面左右分栏布局,或者是列表排列。
但是这些也可以用其他一些CSS属性(不考虑table)代替实现。


【浮动就是个带有方位的display:inline-block属性】
只不过display:inline-block只能水平从左向右,float可以多个方向。


看下面的英文解释:
Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning,
Absolutely positioned page elements are removed from the flow of the webpage


Float 元素本身就是 Positioning(定位)元素, 他和 Absolute 定位的唯一区别就是:
Float 元素【保留】了它在文档流中本身的位置,
Absolute 元素【移除】了它在文档流中本身的位置。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值