1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流也叫常规流，其实就是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式。脱离文档流是指元素被从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
有三种方可以让元素脱离文档流。分别是：float（浮动），absolute（绝对定位），fixed（固定定位）。其中，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute，fixed脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
参考:
1.在网页设计html中什么是文本流，请大家帮忙！！！
2.css脱离文档流到底是什么意思，脱离文档流就不占据空间了吗？脱离文档流是不是指该元素从dom树中脱离？
2.有几种定位方式，分别是如何实现定位的，使用场景如何？
关于定位，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，它会固定在目标位置 |
其中，sticky这个属性，从can i use网站看，
完全支持的是firefox浏览器和safari浏览器，IE和Chrome还在考虑和开发中。
其中，主要用到的是三种定位方式，fixed（固定定位），relative（相对定位），absolute（绝对定位）。
- 1.
position: fixed;设置元素相对于浏览器窗口位置固定，首先设置position: fixed;`使元素脱离文档流，然后设置top、left、right或者bottom的值，这些设置了元素距浏览器的上、左、右或者下边距的距离。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
.item1 {
position: fixed;
right: 10px;
top: 10px;
}
.item2 {
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="item1">饥人谷1</div>
<div>饥人谷</div>
<div>饥人谷</div>
<div>饥人谷</div>
<div>饥人谷</div>
<div>饥人谷</div>
<div>饥人谷</div>
<div class="item2">饥人谷2</div>
</body>
</html>
这是设置class值是item1的div元素在浏览器右上角，距右、上都是10px，class值是item2的div元素在浏览器右下角，距右、下都是10px。
看效果：
图1
图2
图1到图2浏览器右边栏向下滑动，item1,item2相对于浏览器窗口的位置，并没有变化。
position: fixed;主要用于固定一个窗口在页面上，页面向下滑动时，窗口的位置不变，这可以用于显示强制用户接收的信息。例如广告，推广消息等。
- 2.
position: relative;设置元素相对于自身原来的位置移动。然后利用top、left、right、bottom属性设置偏移值。例如，设置top :10px;是表示移动后的元素相对于初始位置向下移动10px。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
html,body {
margin: 0;
bottom: 0;
}
.content {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
left: 100px;
top: 80px;
}
</style>
</head>
<body>
<div class="content">
<p>段落</p>
饥人谷
</div>
相对定位脱离文档流了吗？
<p>下面的段落位置有变化吗？</p>
</body>
</html>
移动前效果：
移动后效果：
从图中可以看出，class属性名是content的div元素，相对于原来的位置是向右移动100px，向下移动80px。还可以看出，移动前后，它周围的元素的位置并没有发生变化。可以看出，元素相对定位后，一开始占据的空间还存在，并没有脱离文档流。
相对定位主要用于为绝对定位提供定位的参考祖先元素。
- 3.
position: absolute;设置元素相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom属性进行规定。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.content div {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 20px;
}
.content {
width: 500px;
position: relative;
border: 1px solid;
left: 100px;
top: 100px;
}
.item2 {
position: absolute;
right: 20px;
top: 20px;
}
</style>
</head>
<body>
<div class="content">
<div class="item1">饥人谷1</div>
<div class="item2">绝对定位</div>
<div class="item3">饥人谷2</div>
</div>
</body>
</html>
效果：
看图可知，item2是相对于它的设置了relative的父元素content进行位移的。
绝对定位主要用在边缘对齐，九宫格效果等方面。
3.absolute, relative, fixed偏移的参考点分别是什么
由问题2得出：
absolute偏移的参考点是具有position属性（除了static属性）的最近的祖先元素。
relative偏移的参考点是元素本身的初始位置。
fixed偏移的参考点是浏览器窗口。
4.z-index 有什么作用? 如何使用?
z-index的作用：为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性。z-index属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。数值越大离用户越近，显示在越前面。
使用：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。可以是负值。只能用在定位元素上。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
.content div {
width: 100px;
height: 100px;
}
.content {
position: relative;
}
.item1 {
background: #f00;
}
.item2 {
background: #0f0;
position: absolute;
top: 30px;
left: 20px;
}
.item3 {
background: #00f;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="content">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
此时效果：
默认不设置z-index时值是0。此时，三个div透明度一样，默认div后面的显示覆盖前面的显示。item3在最上面，遮住了item1和item2。
首先看，在没有定位的元素上设置z-index，有没有效果。对item1，添加
z-index: 1;,
.item1 {
background: #f00;
z-index: 1;
}
效果：
item1的红色方块并没有显示在前面。
item1加上position（除了static），
代码：
.item1 {
background: #f00;
position: absolute;
z-index: 1;
}
效果：
item1显示在前面。
看看数值大小对位置的影响：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
.content div {
width: 100px;
height: 100px;
}
.content {
position: relative;
}
.item1 {
background: #f00;
position: absolute;
z-index: 2;
}
.item2 {
background: #0f0;
position: absolute;
top: 30px;
left: 20px;
opacity: 0.6;
z-index: 3;
}
.item3 {
background: #00f;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
</style>
</head>
<body>
<div class="content">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
效果：
可以看出，z-index大的值显示在外面。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative和负margin都可以使元素位置发生偏移。区别在于，position:relative元素发生偏移时，初始空间还被占据着。而负margin则不再占据初始空间。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
.content {
width: 100px;
height: 100px;
border: 1px solid red;
}
.pa {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid red;
/*margin-top: -20px;
margin-left: -20px;*/
/*position: relative;
top: -20px;
left: -20px;*/
}
.item {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="content">
<p>段落</p>
饥人谷
</div>
<div class="pa">下面的段落位置有变化吗？</div>
<span>下面的段落位置有变化吗？</span>
<div class="item">下面的段落位置有变化吗？</div>
</body>
</html>
未设置position和负margin时，效果：
设置
position: relative;
top: -20px;
left: -20px;
效果：
设置
margin-top: -20px;
margin-left: -20px;
效果：
可以看出元素设置position:relative时，后面的元素位置不变动。负margin时，后面的元素也跟着变动。
6.如何让一个固定宽高的元素在页面上垂直水平居中?
可以用absolute和负margin实现。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直水平居中</title>
<style>
.content {
position: relative;
height: 300px;
border: 1px solid;
}
.item {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="content">
<div class="item">饥人谷</div>
</div>
</body>
</html>
效果：
7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
浮动元素脱离了文档流，浮动模型是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
- 对其他浮动元素的影响，一个元素浮动如果碰到另一个浮动元素的边框，会紧贴着那个边框水平放置，如果父元素宽度不够则会自动下移。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素</title>
<style>
.nav {
width: 280px;
height: 300px;
border: 1px solid;
}
.box {
width: 100px;
height: 100px;
}
.item1 {
background: #f00;
float: left;
}
.item2 {
background: #0f0;
float: left;
}
.item3 {
background: #00f;
float: left;
}
</style>
</head>
<body>
<div class="nav">
<div class="box item1">1</div>
<div class="box item2">2</div>
<div class="box item3">3</div>
</div>
</body>
</html>
效果：
nav的宽度280px,而item1,item2,item3,分别是100px，一行放不下三个块元素。item3下移。
- 对普通元素的影响，同级的普通块级元素会忽略浮动元素的存在。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素</title>
<style>
.nav {
width: 280px;
height: 300px;
border: 1px solid;
}
.item1 {
width: 100px;
height: 100px;
background: #f00;
float: left;
opacity: 0.4;
}
.item2 {
background: #0f0;
height: 120px;
}
.item3 {
width: 100px;
height: 100px;
background: #00f;
float: left;
opacity: 0.6;
}
.item4 {
background: #ccc;
}
</style>
</head>
<body>
<div class="nav">
<div class="item1">1</div>
<div class="item2">
浮动</div>
<div class="item3">3</div>
<div class="item4">饥人谷</div>
</div>
</body>
</html>
效果：
如图示，item1，item3浮动，脱离了文档流，item2,item4的位置不受影响，仍是，占据一行，从上到下排列。
浮动元素的父级元素的高不会被自动撑开。
把上面的例子中的nav的高度设置去掉，则出现这种效果：
可以看出，浮动元素没有撑起父级元素，靠的是文本流内的同级块级元素撑起的。
- 对文字的影响，从上面的同级元素的例子中中也可以看出，文字受浮动元素的影响。浮动元素占据的空间，其他元素的文字不能占据，只能挨着浮动元素排列。
8.清除浮动指什么? 如何清除浮动?
清除浮动指清除浮动带来的影响。主要包括对上级元素和对同级元素的影响。对上级元素的影响如上题所说，浮动元素不会撑起父级元素的高度。对同级元素，是同级元素会忽略浮动元素所占的空间，需要浮动元素所占的空间不被忽略。
清除浮动可以用overflow清除父级元素的浮动。
第七题的例子，父元素没有被完全撑开，在父元素上加上overflow: hidden;，效果则变成下图所示：
父元素被撑开。
还可以用clear清除浮动，
clear: xxx;表示清除元素xxx方向的浮动。对父元素，加
.nav:after {
content: '';
display: block;
clear: left;
}
效果：
伪类元素:after相当于在父元素中增加了一个标签。
对于同级元素，.item2,item4可以加上
clear: left;,效果：
因为.item1设置了透明度为0.4，所以变成图中的颜色。
可以看到，这时父元素也被撑开了。
本文版权归作者和饥人谷所有，转载请注明出处
