一.文档流的概念指什么？有哪种方式可以让元素脱离文档流?
1.窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
2.脱离文档流：使用定位或浮动
二.有几种定位方式，分别是如何实现定位的，使用场景如何？
三种基本的定位机制：普通流（文档流）、浮动和绝对定位
- 普通流：
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。 - 定位：通过使用 position 属性，我们可以选择 4 种不同类型的定位
| 属性 | 描述 |
|---|---|
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| relative | 相对定位是“相对于”元素在文档中的初始位置进行定位，使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框 |
| absolute | 相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，绝对定位使元素的位置与文档流无关，因此不占据空间 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。对于定位元素，z-index值越大优先级越高 |
三.absolute, relative, fixed偏移的参考点分别是什么
- absolute：相对于 static 定位以外的第一个父元素进行定位， 前提是父元素是定位元素，如果父元素不是定位元素，那么就按照嵌套关系逐级向上寻找，直到根节点（视窗）进行定位。
如图，灰色盒子没有设置相对定位时，2号盒子相对于页面定位，.box设置相对定位时，2号盒子相对于灰色盒子定位
- fixed：fixed属性值相对于浏览器视窗进行定位
如图，红色边框盒子设置fixed属性，相对于浏览器定位
-
relative：相对定位是“相对于”元素在文档中的初始位置进行定位
如图，2号盒子相对于它的初始位置进行定位
四.z-index 有什么作用? 如何使用?
- z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- 元素可拥有负的 z-index 属性值。
-
Z-index 仅能在定位元素上奏效（例如 position:absolute;）
如图，原先3号盒子覆盖2号盒子，3号盒子默认z-index值为0，设置2号盒子z-index属性为1时,2号盒子覆盖了3号盒子
五.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative元素发生偏移时，初始空间还被占据着。而负margin不再占据初始空间。也就是说，margin设置负值，不但改变了元素本身，还改变了周围其他元素的布局。
如图，设置2号盒子的position:relative属性，left为20px，1号盒子和3号盒子不受影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
.box {
width: 550px;
height: 550px;
border: 1px solid;
background-color: #ccc;
}
.box1 {
width: 50px;
height: 50px;
border: 1px solid red;
background-color: red;
}
.box2 {
width: 50px;
height: 50px;
border: 1px solid blue;
background-color: blue;
position: relative;
left: 20px;
}
.box3 {
width: 50px;
height: 50px;
border: 1px solid green;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
如图，设置2号盒子margin：-20px，1号盒子和3号盒子均受影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
.box {
width: 550px;
height: 550px;
border: 1px solid;
background-color: #ccc;
}
.box1 {
width: 50px;
height: 50px;
border: 1px solid red;
background-color: red;
}
.box2 {
width: 50px;
height: 50px;
border: 1px solid blue;
background-color: blue;
margin: -20px;
}
.box3 {
width: 50px;
height: 50px;
border: 1px solid green;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
六.如何让一个固定宽高的元素在页面上垂直水平居中?
.box1 {
width: 50px;
height: 50px;
border: 1px solid ;
background-color:red;
position: absolute;
left: 50%; top: 50%;
margin-left: -25px;
margin-top: -25px;
}
利用position: absolute;将元素脱离文本流，然后设置left: 50%; top: 50%;从而使元素的左上角点位于页面中点，最后通过调节元素的margin值（左上各负一半）将元素居中。
七.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
- 浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
- 浮动框不属于文档中的普通流，顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动，文档中的普通流就会表现得和浮动框不存在一样
- 当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列
-
当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）
如图，1号盒子（红色）设置浮动后不占据原有空间，2号和3号盒子向上移动
如图，设置所有的盒子左浮动，将按顺序从左开始排列
如图，设置浮动对文字造成影响，形成文字环绕
八.清除浮动指什么? 如何清除浮动?
浮动元素引起的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题。
如图，对 p标签设置clear:right，清除浮动，这时文字不再环绕图片
