display, position和float的关系

WEB前端 waitig 507℃ 百度已收录 0评论

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

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


本文由【waitig】发表在等英博客
本文固定链接:display, position和float的关系
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)