1、 文档流的概念指什么？有哪种方式可以让元素脱离文档流?
-
文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签 默认占用宽度也是一整行，因为div标签和p标签是块状对象。 网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。
-
浮动和定位可以让元素脱离文档流
-
浮动通过设置
float属性 -
定位通过设置
position属性为absolute或fixed
Paste_Image.png
2、 有几种定位方式，分别是如何实现定位的，使用场景如何？
| 值 | 描述 | 使用场景|
| ------------- |:-------------|
| static|默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 | 默认不设置|
| absolute| 生成绝对定位的元素，相对于** static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。会脱离文档流。 | 根据需求需要定位在某个参考点的某个相对位置时 |
| fixed| 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 | 广告窗口或底部菜单，用于固定位置显示的地方 |
|relative | 生成相对定位的元素，相对于其正常位置进行定位。占用空间，相当于原元素的位置移动，不会脱离文档流。** |其它元素定位时需要把它作为参考点 |
Paste_Image.png
Paste_Image.png
Paste_Image.png
3、 absolute, relative, fixed偏移的参考点分别是什么
absolute, relative, fixed都是postion属性的值。
- absolute的参考点是离其最近的元素postion设置了fixed、relative的父级或祖先元素，如果父级元素没有，则一层一层往上找，最终到body元素。
- relative的参考点是其原来自身的位置
- fixed的参考点是浏览器的窗口
4、 z-index 有什么作用? 如何使用?
z-index的作用是当两个或n个元素重叠在一起的时候，其决定哪个元素显示在上层
z-index只有在使用了定位属性（positon且值为relative\absolute\fixed)上才可使用；有较高z-index值的元素比z-index值较低的元素离读者更近；z-index值是正负整数，
Paste_Image.png
Paste_Image.png
5、 position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative使元素偏移时，其自身位置并未改变，处在文档流的原始位置
Paste_Image.png
- 负margin使元素偏移时，自身位置改变并且会影响周边元素
Paste_Image.png
6、 如何让一个固定宽高的元素在页面上垂直水平居中?
可以利用position定位的absolute值和负margin使宽高固定的元素在页面上水平居中
Paste_Image.png
7、 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
-
浮动元素的特征如下：
-
元素浮动之后会从文档的正常流中删除
-
元素设置浮动后，会尽可能地向左或向右浮动，直到碰到父元素边框或其余浮动元素
-
元素浮动后会生成一个块级框，而不论这个元素是什么
-
浮动元素不会互相重叠
-
一个浮动元素的顶端不能比其父元素的内顶端更高
-
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
-
如果没有足够空间，浮动元素会被挤到新的一行
-
对其它浮动元素的影响：
-
浮动元素之间是紧跟的关系，碰到同级元素的边缘或者父元素的边缘才停止
-
如果碰到文字文字会围绕在浮动元素周围，下一个普通的元素会占据浮动元素之前的位置，但是普通元素内的元素不会跟着普通元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 400px;
border: solid 1px;
}
.container .box{
width: 100px;
height: 100px;
border: solid 1px;
}
.container .box:nth-child(1){
float: left;
background: red;
}
.container .box:nth-child(2){
background: #0000ff;
}
.container .box:nth-child(3){
background: yellow;
}
.container .box:nth-child(4){
background: pink;
}
.ct3{
/*
width: 400px;
height: 400px;
border: solid 1px;
*/
}
.ct3 .box{
width: 100px;
height: 100px;
border: solid 1px;
}
.ct3 .box:nth-child(1){
background: red;
}
.ct3 .box:nth-child(2){
background: #0000ff;
}
.ct3 .box:nth-child(3){
float: right;
background: yellow;
}
.footer{
clear: right;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
1
</div>
<div class="box">
1
</div>
<div class="box">
3
</div>
</div>
<div class="container">
<div class="box"></div>
<p>
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。
</p>
</div>
<div class="ct3">
<div class="box">
1
</div>
<div class="box">
1
</div>
<div class="box">
3
</div>
</div>
<div class="footer">
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
绝对定位使元素的位置与文档流无关，因此不占据空间。这
</div>
</body>
</html>
Paste_Image.png
8、 清除浮动指什么? 如何清除浮动?
元素浮动之后会使元素脱离正常的文档流，对没有浮动的元素和父元素都会造成影响，也会对文字排版产生影响，所以要清除浮动以解除浮动带来的负面影响。
Paste_Image.png
** 本教程版权归作者和饥人谷所有，转载须说明来源！ **
网友评论