文档流的概念指什么？有哪种方式可以让元素脱离文档流?
- 指将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
- 两种。浮动与定位(其中
position：relative不会导致元素脱离文档流)。
有几种定位方式，分别是如何实现定位的，使用场景如何？
| 值 | 描述 | 使用场景 |
|---|---|---|
| absolute | 生成绝对定位的元素，相对于** static 定位以外的第一个父元素**进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 | |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 | 广告窗口 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。占用空间，相当于原元素的位置移动，不会脱离文档流。left:20会向元素的 LEFT 位置添加 20 像素。 |
|
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 | 没用 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.container{
width:400px;
height:400px;
border:1px solid ;
position:fixed;
margin:0px;
left:8px;/*浏览器默认值，不设置也为8px*/
top:8px;/*浏览器默认值，不设置也为8px*/
}
.box{
width:100px;
height:100px;
border:1px solid black;
}
.box:nth-child(1){
background:red;
position:fixed;
left:0px;
top:0px;
}
.box:nth-child(2){
background:blue;
position:absolute;
left:20px;
top:20px;
}
.box:nth-child(3){
background:green;
position:relative;
left:50px;
top:50px
}
.box:nth-child(4){
background:yellow;
position:relative;
left:50px;
top:50px
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>
效果
absolute, relative, fixed 偏移的参考点分别是什么
- absolute：相对于** static 定位以外的第一个父元素**进行定位。
- relative：相对于自身
- fixed：现对于浏览器
z-index 有什么作用? 如何使用?
- 显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
- z-index值较大的元素将叠加在z-index值较小的元素之上。
- 只对定位元素有效
- z-index值相同
- 如果两个元素都没有定位或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
- 如果两个元素都没有设置z-index（使用默认值），一个定位一个没有定位，那么定位元素覆盖未定位元素。
未加入z-index
未加入z-index.png
box1加入z-index
box1加入z-index
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- margin设置负值，改变了周围其他元素的空间布置。
-
position: relative其元素位移的同时，其原本的空间布局并没有变化；
效果
如何让一个固定宽高的元素在页面上垂直水平居中?
- 先让元素
position: absolute; top: 50%; left: 50%;再使用负向marginmargin:-元素高度的一半 0px 0px -元素长度的一半;注意此处不可以使用left与top代替margin功能
代码
效果
浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
- 特征
- 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
- 浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样（即浮动元素不占用空间）。
- 浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间（即文字会受到浮动元素的影响）。
- 元素设为浮动元素之后，会导致其丢失高度，父元素检测不到，导致父元素高度无法撑开。
01.png
02.png
03.png
04.png
05.png
元素设为浮动元素之后，会导致其丢失高度，父元素检测不到，导致父元素高度无法撑开。使得有了后面的浮动清除。
06
清除浮动指什么? 如何清除浮动?
- 清除浮动指通过clear属性将之前浮动元素的影响消除。
- 浮动元素引起的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
1.png
对box2设置清除右浮动。元素3不受影响。
2.png
对box2设置清除左浮动。由于box2左边并没有浮动元素，所以无效。
3
clear属性用于清除浮动，浮动元素在左用left，在右用right，both属性皆生效；
清除浮动是针对元素本身的，只能对自己有效果，不能够影响到别的元素。
本文版权归本人和饥人谷所有，转载请注明来源。
