9. CSS相对定位和相对定位

display属性

每一个元素都有默认的display属性,使用最多的是block, inlineinline-block,不常用的是table-cell

根据display属性,我们可以将元素分为块级元素(block)和内联级元素(inline)。它们最大区别是:block元素可以设置宽度,独占一行。inline元素宽度由内容决定,与其他元素并列在一行。

常见的block属性元素有:div, h1-h6, ul, li, ol, dl, dd, dt。常见的inline属性元素有: span, a, em

block

宽高可以自行设置,默认宽度由父容器决定,默认高度有内容决定。自己独占一行。

inline

宽度和高度都有内容决定,与其他元素共占一行。

inline-block

宽度可以自行设置,类似block,但是与其他元素共占一行,类似inline。长用于设置垂直居中。

table-cell

此属性指让标签元素以表格单元格的形式呈现,单元格有一些比较特殊的属性,可以设置元素的垂直居中等。

position属性

元素在页面中的布局遵守一套文档流的方式,默认的定位属性值为static。它其实是未被设置定位的。

元素如果被定位了,那么它的top,left,bottom,right值就会生效,能设置定位的属性是relative,absolutefixed

需要注意的另一点是被定位的元素层次(z-index)会得到提高。

relative(相对定位)

设置了相对定位之后,通过修改top,left,bottom,right值,元素会在自身文档流所在位置上被移动,其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

absolute(绝对定位)

设置了绝对定位之后,元素脱离文档流,其他的元素会调整位置来弥补它偏离后剩下的空隙。元素偏移是相对于是它最近的设置了定位属性(position值不为static)的元素。

且如果元素为块级元素(display属性值为block),那么它的宽度也会由内容撑开。因为:

默认文档流中块级元素如果没有设置宽度属性,会自动填满整行。

fixed(固定定位)

设置了固定定位之后,元素相对的偏移的参考是可视窗口,即使页面滚动,元素仍然会在固定位置。

参考资料