display, position和float的关系

display, position和float的关系?

(ps:第一次被问到这个问题时候其实是一脸懵逼,因为在此之前压根没把这仨放一起对比研究过,直接把他们有的分到了萝卜筐,有的分到了白菜筐,主观上没觉得有啥关系,只觉得他们是各司其职的,不过稍微一琢磨他们还是有点关联和相互制约的,以下是参考了别人的答案和自己实验得出一些粗浅的关系)


①如果display设置为none,那position和float设置成花都没用,页面上是渲染不出此元素的,这种情况下display比较厉害;

②如果display不为none,假设为inline,然后设置float不为none,如 float: left; 

   此时经浏览器计算后是属性是float: left; display: block; 这种情况下float会强制更改元素display属性;

③如果display不为none,假设为inline,然后设置position: absolute/fixed; float: left;  

   此时经浏览器计算后是属性是 position: absolute; float: none; display: block; 

   这种情况下position会比float和display厉害,然后强制改变float为none、display为block


以上可能只是一些表面的粗浅联系,有时间了再仔细研究下深层次的关系。



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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值