static(普通流定位)
默认定位
relative(相对定位)
-
相对本元素的左上角进行定位(相对于自身位置进行定位),本元素需要设置position为relative,top、left、bottom、right都可以有值。
-
虽然经过定位后,位置可能会移动,但是本元素并没有脱离文档流,还占有原来的页面空间。
absolute(绝对定位)
-
相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位,如果在祖代元素中没有有relative定位的,就默认相对于body进行定位。
-
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
-
绝对定位是脱离文档流的,与浮动定位是一样的效果,会压在非定位元素的上方。
fixed(固定定位)
类似于absolute定位,但是是相对于浏览器窗口进行定位
inherit
继承父级元素position属性值
sticky (额外补充)
粘性的-集合了flex和relative,参考杀了个回马枪,还是说说position:sticky吧
float浮动
-
有两个取值:left(左浮动)和right(右浮动)。
-
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
-
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
优点
最初的优点就是在图文混排的时候可以很好的使文字周围在图片周围。另外当元素浮动了起来之后,它具有块级元素的一些性质例如可以设置宽高等,但它与inline- block还是有一些区别的,第一个就是关于横向排序的时候,float可以设置方向而inline-block方向是固定的;还有一个就是inline-block在使用时有时会有空白间隙的问题。
缺点
最明显的缺点就是浮动元素一旦脱离了文档流,就无法撑起父元素,会造成父级元素高度塌陷为0(盒子塌陷)。▲ 注意:设置元素浮动后,该元素的display值会变为block
如果您觉得本文的内容对您的学习有所帮助:
关键字:
css