一、文档流的概念指什么？有哪些方式可以让元素脱离文档流?

文档里指元素在文档中的位置由元素在html里的位置决定，块级元素独占一行，自上而下排列；内联元素从左到右排列
让元素脱离文档流的方式：
- 浮动，通过设置float属性
- 绝对定位，通过设置position:absolute
- 固定定位，通过设置position:fixed

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: red;
float: right;
}
.box2{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 20px;
top: 20px;
}
.box3{
width: 50px;
height: 50px;
background: green;
position: fixed;
top:300px;
right: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<p>脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式</p>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果图

![脱离文档流效果图](https://img.haomeiwen.com/i2453980/c38deaf48f3b55c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 二、有几种定位方式，分别是如何实现定位的，使用场景如何？
positon的定位方式有三种（整理自CSS权威指南）
- **position:relative**~元素框偏移某个位置，元素仍保持其未定位前的形状，它原本所占的空间仍保留；
- **position:ablosute**~元素框从文档流中完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或初始包含块；元素原先在正常文档流中所占的空间会关闭，就好像该元素不存在一样
- **position:fixed**~元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
position: relative;
top: 100px;
left: 100px;
}
.box2{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 20px;
top: 20px;
}
.box3{
width: 100px;
height: 100px;
background: orange;
position: fixed;
top:200px;
right: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果图
![三种定位方式效果图](https://img.haomeiwen.com/i2453980/a20f6c9a4b862e29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 三、absolute, relative, fixed 偏移的参考点分别是什么？
- absolute的参考点是离其最近设置了fixed、relative的父级（祖先）元素，如果父级元素没有，则一层一层往上找，最终到body元素
- relative的参考点是其原来自身的位置
- fixed的参考点是浏览器的窗口

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
background: #ccc;
}
.box1{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 200px;
left: 250px;
}
.box2{
width: 100px;
height: 100px;
background: blue;
position: relative;
left: 20px;
top: 20px;
}
.box3{
width: 50px;
height: 50px;
background: green;
position: fixed;
top:50px;
right: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果图
![三种定位效果图](https://img.haomeiwen.com/i2453980/3d6e661a72e1e222.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 四、z-index 有什么作用? 如何使用?
- z-index的作用是当两个或多个元素放在一起的时候，其决定哪个元素放在“上层”
- **z-index只有在使用了定位属性即positon的元素上才可使用；有较高z-index值的元素比z-index值较低的元素离读者更近；z-index值是正负整数**，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 500px;
height: 500px;
background: gray;
margin: 100px auto 0 auto;
}
.box1{
width: 50px;
height: 50px;
background: red;
}
.box2{
width: 50px;
height: 50px;
background: blue;
position: relative;
left: 20px;
top: 20px;
z-index: 2px;
}
.box3{
width: 50px;
height: 50px;
background: green;
z-index: 3;
}
</style>
</head>
<body>
<div class="wrapper">
<h3>position:relative</h3>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果图

![z-index效果图](https://img.haomeiwen.com/i2453980/767fd3cce0913c23.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 五、position:relative和负margin都可以使元素位置发生偏移，二者有什么区别？
 - position:relative使元素偏移时，其自身位置并未改变，处在文档流的原始位置；负margin使元素偏移时，自身位置改变并且会影响周边元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 500px;
height: 500px;
background: gray;
margin: 100px auto 0 auto;
}
.box1{
width: 50px;
height: 50px;
background: red;
}
.box2{
width: 50px;
height: 50px;
background: blue;
position: relative;
left: 100px;
}
.box3{
width: 50px;
height: 50px;
background: green;
}
.box4{
width: 50px;
height: 50px;
background: pink;
margin: -20px;
}
</style>
</head>
<body>
<div class="wrapper">
<h3>position:relative</h3>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box1"></div>
<div class="box4"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果图

![问题5](https://img.haomeiwen.com/i2453980/37ebec78144b769d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 六、如何让一个固定宽高的元素在页面上垂直水平居中?
- 可以利用position定位的absolute和负margin使宽高固定的元素在页面上水平居中，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.box{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>

效果图
![垂直水平居中](https://img.haomeiwen.com/i2453980/f066841d330b3b17.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- **更多垂直居中方法[W3CPLUS](http://www.w3cplus.com/css/vertically-center-content-with-css)**

***
## 七、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素的特征如下：
 - **元素浮动之后会从文档的正常流中删除**
 - **元素设置浮动后，会尽可能地向左或向右浮动，直到碰到父元素边框或其余浮动元素**
 - **元素浮动后会生成一个块级框，而不论这个元素是什么**
 - **浮动元素不会互相重叠**
 - **一个浮动元素的顶端不能比其父元素的内顶端更高**
 - **浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高**
 - **如果没有足够空间，浮动元素会被挤到新的一行；浮动元素必须尽可能的高**
 - **整理自CSS权威指南**
- 对其它浮动元素的影响：浮动元素会依次排在其之前浮动元素左边或右边，直到其父元素不能放下，将会被挤到新的一行，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮动元素</title>
<style>
.wrapper{
width: 80%;
height: 500px;
border: 1px solid black;
margin: 0 auto;
color: white;
}
.test1{
width: 200px;
height: 200px;
background: red;
float: left;
}
.test2{
width: 200px;
height: 200px;
background: green;
float: left;
}
.test3{
width: 200px;
height: 200px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
</div>
</body>
</html>

效果图
![对浮动元素的影响效果图](https://img.haomeiwen.com/i2453980/9af179ed9deb1769.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 对普通元素的影响：浮动元素将会浮在页面上，其后的普通元素将会占据其原来位置，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮动元素</title>
<style>
.wrapper{
width: 80%;
height: 500px;
border: 1px solid black;
margin: 0 auto;
}
.test1{
width: 200px;
height: 100px;
background: red;
color: white;
float: right;
}
.test2{
width: 100%;
height: 100px;
line-height: 100px;
background: pink;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test1">我是浮动元素</div>
<div class="test2">我是普通元素</div>
</div>
</body>
</html>

效果图
![对普通元素的影响效果图](https://img.haomeiwen.com/i2453980/64fdec477a7307b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 对文字的影响：块级元素会忽略浮动元素，但块级元素内的内联则会留意浮动元素的边界，环绕着浮动元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮动元素</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 80%;
height: 500px;
border: 1px solid black;
margin: 100px auto 0 auto;
}
.test1{
width: 400px;
height: 100px;
background: red;
color: white;
float: right;
}
.test2{
width: 100%;
background: pink;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test1">我是浮动元素</div>
<p class="test2">我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！</p>
</div>
</body>
</html>

效果图
![文字环绕着浮动元素效果图](https://img.haomeiwen.com/i2453980/88abc6e38bd1452d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
***
## 八、清除浮动指什么? 如何清除浮动?
 - 清除浮动是指清除浮动所带来的影响，比如由于浮动，父元素无法撑起高度，影响与父元素同级的元素；与浮动元素同级的非浮动元素会紧随其后；若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响布局
 - 可以通过**clear**属性来清除浮动（**清除浮动只能针对元素本身**）其值如下
  - left~在左侧不允许浮动元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
float:left;
}
.box2{
clear: left;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了</div>
</div>
</body>
</html>

效果图
![清除左浮动](https://img.haomeiwen.com/i2453980/5fdf453629291e66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 - right~在右侧不允许浮动元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
float:right;
}
.box2{
clear: right;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了</div>
</div>
</body>
</html>

效果图
![清除右浮动](https://img.haomeiwen.com/i2453980/1d5118def78b855c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- both~在左右两侧均不允许浮动元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
float:left;
}
.box2{
width: 100px;
height: 120px;
background: pink;
float: right;
}
.box3{
clear: both;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了</div>
</div>
</body>
</html>

效果图
![both清除左右两侧浮动](https://img.haomeiwen.com/i2453980/8a8fb7b7a781115d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)




**版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！**