问题节选自他人
腾讯TEG高校合作中心
CSS中的position属性有哪些有效值?
-
static
该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 -
relative
该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。 -
absolute
元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。 -
fixed
元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。 -
sticky
当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。
CSS中的display属性有哪些有效值?
-
inline
- 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行。
- 不能更改元素的height,width的值,大小由内容撑开。
- 可以使用padding,margin的left和right产生边距效果,但是top和bottom就不行。
-
block
- 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度。
- 能够改变元素的height,width的值。
- 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果。
-
inline-block
不独占一行的块级元素。 -
grid
Grid 布局学习