本教程版权归小圆和饥人谷所有，转载须说明来源
问答
1. 文档流的概念指什么？有哪种方式可以让元素脱离文档流?
- 文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素
-
脱离文档流的方法：浮动、定位（
position: relative除外）、display: none
2. 有几种定位方式，分别是如何实现定位的，使用场景如何？
| 定位方式 | 实现 | 使用场景 |
|---|---|---|
| absolute | 生成绝对定位的元素 相对于static定位以外的第一个父元素进行定位 |
适用于实现水平垂直居中 |
| relative | 生成绝对定位的元素 相对于浏览器窗口进行定位 |
一般与绝对定位配合使用 |
| fixed | 生成相对定位的元素 相对于其正常位置进行定位 |
适用于固定顶部导航条，广告弹窗等 |
3. absolute,relative, fixed偏移的参考点分别是什么
- absolute：相对于static定位以外的第一个父元素
- relative：相对于浏览器窗口
- fixed：相对于其正常位置
4. z-index 有什么作用? 如何使用?
- 作用：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- 使用：该元素设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为复数则表示离用户更远。只有在使用了position并脱离了文档流（absolute、fixed）的情况下可以使用，其他情况使用z-index不起作用。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position: relative会使元素脱离文档流，并相对于其原来位置发生偏移，但不会影响其他元素（可能会覆盖其他元素）；而负margin不仅会使元素本身发生偏移，还会影响其他元素的位置，因为元素仍存在于正常文档流。
6. 如何让一个固定宽高的元素在页面上垂直水平居中?
1. 使用绝对定位
设置top：50%，left：50%，负margin-top和负margin-left各为元素宽和高的一半
position:absolute
2. 使用margin值
设置margin:50%,auto;
margin
7. 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
浮动元素脱离了文档流，不占用文档流位置，其他浮动元素会按照浮动规则在脱离文档流中排队依次显示，对普通元素的位置不受影响，但是普通元素中的文字会被挤出原来的位置显示，环绕浮动元素排列。
8. 清除浮动指什么? 如何清除浮动?
清除浮动指清除掉元素的float属性
- 使用伪元素清除
.box::after{
content:"";
display:block;
clear:both;
}
.left,.right{
width:100px;
height:100px;
background:red;
float:left;
}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
- 将父容器也进行浮动
.box{
float:left;
}
.left,.right{
width:100px;
height:100px;
background:red;
float:left;
}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
- 使用overflow:hidden清除
.box{
overflow: hidden;
} //overflow:auto也是可以的
.left,.right{
width:100px;
height:100px;
background:red;
float:left;
}
<divclass="box">
<divclass="left"></div>
<divclass="right"></div>
</div>
- 使用空div清除
.clear{
clear:both;
}
<divclass=”clear”></div>
