1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?
答：
- 文档流就是按照文档的顺序出现，自上而下自左往右的进行排列，块级元素与行内元素都遵循自己的排版方式来进行排列，这种方式就叫做文档流。
- 脱离文档流就是将一个元素从普通的布局排版中拿走，在原布局排版中的其他元素会当做脱离元素不存在而进行定位。
- 使用float、fixed、absolute可以脱离文档流
- float可以脱离文档流，在脱离文本流时其他元素的盒子会挤占脱离元素的空间，但是盒子的内容会给元素让出位置，围绕在其周围。
- 当使用absolute和fixed进行定位时，其他元素的盒子和盒子内的内容都会无视脱离元素。
2.有几种定位方式，分别是如何实现定位的，使用场景如何？
答：
CSS中有4种方式：
| 值 | 属性 |
|---|---|
| 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 属性进行规定 |
DEMO:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位的demo</title>
<style>
.ct{
width:500px;
height:500px;
border:1px solid;
margin:50px;
}
.box{
width:100px;
height:100px;
border:1px solid;
}
.box:nth-child(1){
background:red;
position:relative;
left:100px;
top:30px
}
.box:nth-child(2){
background:#00ff00;
position:fixed;
top:500px;
left:600px;
}
.box:nth-child(3){
background:#0000ff;
position:absolute;
top:150px;
left:300px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box">relative</div>
<div class="box">fixed</div>
<div class="box">absolute</div>
</div>
</body>
</html>````
效果图：
- 由此我们可以看到fixed是脱离于父元素之外的，一直占据着浏览器的一定空间，这就是脱离文档流的定位，一般fixed可以用来定位网页弹窗、广告、提示消息等等（原来我们所看到的烦人的广告都是这么来的哈哈！）
- 我们可以看到relative元素是相对于自身原来的位置进行定位的，而且与父元素的位置有关，给父元素设置了margin后它也会随之移动。
- absolute会不断的寻找一个已经定位的父元素进行定位，但是在demo中我们并没有给ct进行任何定位，所以元素absolute找到了我们的根节点进行定位。
如果我们给ct加入`<position:relative>`那么就会发生下图情况
对，absolute就会偏移出`<margin:50px>`的距离 也就是相对于ct元素进行定位了。
#####3.absolute, relative, fixed偏移的参考点分别是什么？
答:
- absolute偏移的参考点是具有position属性的最近的祖先元素。
- relative偏移的参考点是元素本身的初始位置。
- fixed偏移的参考点是浏览器窗口。
#####4.z-index 有什么作用? 如何使用?
答：相当于在一个二维的页面的第三个轴，用于区别元素的层级。层级的值越大，也就越靠在上面。
使用方法：z-index只对有position的元素有效，数值越大越在上面，也可以采用负值。
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index的demo</title>
<style>
.ct{
width:500px;
height:500px;
border:1px solid;
margin:50px;
position:relative;
}
.box{
width:100px;
height:100px;
border:1px solid;
}
.box:nth-child(1){
background:red;
position:relative;
}
.box:nth-child(2){
background:#00ff00;
position:absolute;
top:25px;
left:25px;
}
.box:nth-child(3){
background:#00ffff;
position:absolute;
top:50px;
left:50px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box">relative</div>
<div class="box">fixed</div>
<div class="box">absolute</div>
</div>
</body>
</html>
效果图：
如果我们对child(1)加入`<z-index:1>`则会变成
#####5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
答：demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin负值与position:relative的demo</title>
<style>
.ct{
width:500px;
height:500px;
border:1px solid;
margin:50px;
position:relative;
}
.box{
width:100px;
height:100px;
border:1px solid;
}
.box:nth-child(1){
background:red;
position:relative;
z-index:2;
}
.box:nth-child(2){
background:#00ff00;
margin:-20px;
}
.box:nth-child(3){
background:#ffff00;
}
</style>
</head>
<body>
<div class="ct">
<div class="box">relative</div>
<div class="box">fixed</div>
<div class="box">fixed</div>
</div>
</body>
</html>
当对child（2）使用`<margin:-20px>`时 它的表现如下：
当我们设置：``position:relative;
top:-20px;
left:-20px;``
会变成下图：
所以当设置为`<position:relative>`时它只影响自身并不会对底下的元素造成影响，而`<margin>`会使底下的元素跟着变动。
#####6.如何让一个固定宽高的元素在页面上垂直水平居中?
答：先使用绝对定位absolute将上左的值定位50%，此时元素的左上角处于正中心位置再使用margin负值元素宽高的一半，就可以使该元素垂直水平居中了。
#####7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
答：浮动元素特征：
- 浮动元素会脱离文档流，并且后面的浮动元素会跟着前面的浮动元素浮动，直到碰到浮动元素的边，后面的普通元素会自动占据浮动元素原来的位置，但是元素里的内容不会走。
- 浮动元素是针对块级元素的，当父容器不能同时容纳3个浮动的子元素时，第三个子元素会自动下移。
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动元素</title>
<style>
.ct{
width:500px;
height:500px;
border:1px solid;
margin:50px;
}
.box{
width:100px;
height:100px;
border:1px solid;
}
.box:nth-child(1){
background:red;
float:left;
}
.box:nth-child(2){
background:#00ff00;
float:left;
}
.box:nth-child(3){
background:#ffff00;
float:right;
}
</style>
</head>
<body>
<div class="ct">
<div class="box">relative</div>
<div class="box">fixed</div>
<div class="box">fixed</div>
</div>
</body>
</html>
由此可以看出浮动元素可以使块级元素并排在一行中，浮动元素之间是跟进的关系，直到碰到同级元素的边缘或者父元素的边缘才停止。
由此可以看出浮动元素不会占据文字的空间且文字围绕着浮动元素边缘排列。
由此可以看出对普通元素的影响：浮动元素脱离文档流，普通元素会占据浮动元素原来的空间，但是普通元素内的元素不会跟着普通元素。
#####8.清除浮动指什么? 如何清除浮动？
答：元素浮动了会使元素脱离文档流，对没有浮动的元素和父元素会造成影响，也会对文字排版产生影响，所以要清除浮动。
demo：使用`clear:both`清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style>
.ct{
border:1px solid;
margin:50px;
}
.box{
width:100px;
height:100px;
border:1px solid;
}
.box:nth-child(1){
background:red;
float:left;
margin-left:50px;
}
.box:nth-child(2){
background:#00ff00;
float:left;
}
.box:nth-child(3){
background:#ffff00;
float:left;
clear:both;
}
</style>
</head>
<body>
<div class="ct">
<div class="box">relative</div>
<div class="box">fixed</div>
<div class="box">fixed</div>
</div>
</body>
</html>
效果图：
当我们将3号box清除浮动时，3号元素会自己跑到下面去，所以清除浮动只对自己有效，不会影响其他元素。
如果我们需要让父元素包裹浮动元素，那么我们需要使用伪类选择器`:after`
例 .`ct:after {
content: "";
display:block;
clear: both;
}`
**本文版权归本人和饥人谷所有，转载请注明来源。**