1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css定位 position与float同时使用的情况

css定位 position与float同时使用的情况

时间:2020-10-12 00:15:32

相关推荐

css定位 position与float同时使用的情况

一、css定位

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通流中定位。

2.绝对定位:position:absolute/fixed;元素框脱离普通文档流。

3.浮动:float:left/right;元素脱离普通文档流。

二、对元素同时使用position和float的情况

经过实践发现,无论position和float谁写在前面或后面,都是position先起作用。

1.当position为absolute/fixed时,元素已脱离文档流,再对元素应用float失效(即不起作用)。

2.当position为static/relative时,元素依旧处于普通流中,再对元素应用float起作用。

三、css定位机制之绝对定位机制与浮动定位机制的区别

1.用position使元素脱离普通流后,该元素不占据空间,用top/bottom/left/right决定位置。

2.用float使元素脱离普通流后,该元素占据空间,用margin,padding等决定和周围内容的距离等。

(该文供学习交流,欢迎大家共同探讨~)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。