一、文档流的概念指什么?有哪种方式可以让元素脱离文档流?
- 文档流概念:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,元素所占用的位置,即为文档流。块元素(block)独占一行,内联元素(inline),不独占一行。
- 脱离文档流:指元素不占据任何空间
position:absolute
,position:fixed
,float
这几种方式可以让元素脱离文档流
二、有几种定位方式,分别是如何实现定位的,使用场景如何?
-
普通流(文档流)
默认的定位方式,除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
-
浮动
float
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
-
position定位
-
static
:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
-
relative
:生成相对定位的元素,相对于其正常位置进行定位。
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
-
absolute
:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。
-
fixed
:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
-
三、absolute
,relative
,fixed
偏移的参考点分别是什么
-
absolute
:偏移的参考点是其有定位(static除外)的祖先级元素的起始点,如果祖先级元素都没有进行定位,那么则以浏览器左上角作为参考点
-
relative
:偏移的参考点是该元素原本所在位置的起始点
-
fixed
:相对于浏览器窗口进行定位
四、z-index 有什么作用? 如何使用?
- z-index是浏览器的Z轴,用来控制层叠元素的显示优先级,值越大优先级越高
- z-index只能用在有position
定位的元素上(static
会忽略) -
父子元素之间用z-index
不起作用
五、position:relative
和负margin
都可以使元素位置发生偏移,二者有什么区别
区别:
-
position:relative
只是使元素产生位置偏移,不会影响其他元素的布局; - 负
margin
是修改元素的外边距,会影响其他元素的布局