文档流

1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?

答：文档流指元素在文档中的位置由元素在html里的位置决定，块级元素独占一行，自上而下排列；内联元素从左到右排列
脱离文档流的方式：

• 浮动，通过设置float属性
• 绝对定位，通过设置position:absolute
• 固定定位，通过设置position:fixed

2.有几种定位方式，分别是如何实现定位的，使用场景如何？

• 要想了解CSS元素定位就需要了解position属性了，position属性有几个常用值如下：

值	属性
inherit	规定应该从父元素继承 position 属性的值
static	默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative	生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px会向元素的 left 位置添加20px
absolute	生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right以及 bottom属性进行规定
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right以及 bottom属性进行规定
sticky	CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置

• 示例图：

效果图.png

3、absolute, relative, fixed偏移的参考点分别是什么？

• absolute参考点是离其最近设置了fixed、relative的父级（祖先）元素，如果父级元素没有，则一层一层往上找，最终到body元素
• relative的参考点是其原来自身的位置
• fixed的参考点是浏览器的窗口

4、z-index 有什么作用? 如何使用?

答：因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
z-index只有在使用了定位属性即positon的元素上才可使用；有较高z-index值的元素比z-index值较低的元素离读者更近；z-index值是正负整数

示例图.png

如上图所示，我最后一个div虽然设置了z-index为2，比第二个div的z-index还高，但是因为没有设置position，所以还是第二个div遮挡了最后一个。

5、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

• position: relative;是单独对元素本身进行渲染，不影响其他元素的布局；

1.png

• 而给margin设置负值，不但改变了元素本身，还改变了周围其他元素的布。

2.png

6、如何让一个固定宽高的元素在页面上垂直水平居中?

可以利用position: absolute;将元素脱离文本流，然后设置left: 50%; top: 50%;从而使元素的左上角点位于页面中点，最后通过调节元素的margin值（左上各负一半）将元素居中。如下图：

3.png
更多垂直居中方法参考：CSS制作水平垂直居中对齐

7、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

答：在 CSS 中，我们通过 float 属性实现元素的浮动。
特征：

• 浮动元素脱离文档流，原位置不继续占用空间；
• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
• 浮动元素表现类似于有不同的z-index值，即“浮”在页面，使得其他块框元素不受其影响。
• 虽然块框不受其影响，但是浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框，造成文字环绕浮动元素显示。

对浮动元素的影响.png
由上图可看出，对其它浮动元素的影响：浮动元素会依次排在其之前浮动元素左边或右边，直到其父元素不能放下，将会被挤到新的一行 对普通元素的影响.png
由上图可看出，对普通元素的影响：浮动元素将会浮在页面上，其后的普通元素将会占据其原来位置 对文字的影响.png
由上图可看出，对文字的影响：块级元素会忽略浮动元素，但块级元素内的内联则会留意浮动元素的边界，环绕着浮动元素

8、清除浮动指什么? 如何清除浮动?

• 清除浮动是指清除浮动所带来的影响，比如由于浮动，父元素无法撑起高度，影响与父元素同级的元素；与浮动元素同级的非浮动元素会紧随其后；若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响布局
• 如何清除浮动：可以通过clear属性来清除浮动（清除浮动只能针对元素本身）CSS中的属性是 clear：left | right | both | none；

清除浮动.png
更多清除浮动方法参考：知乎