一，文档流的概念指什么？有哪种方式可以让元素脱离文档流?
答：文档流
W3C规范中并没有document flow这个概念，只有normal-flow，那么什么是普通流呢，普通流就是html文档中的元素如块级元素、行内元素依据他们的显示属性按照在html文档中的先后次序依次显示。其中块级元素会自上而下依次排列，行内元素会从左至右依次排布。
有三种方式可以让元素脱离文档流
绝对定位：position: absolute
固定定位：position: fixed
浮动：float:left/right
二，有几种定位方式，分别是如何实现定位的，使用场景如何？
答：资料显示定位有6种方式，包括inherit(继承)、static（默认）、relative、absolute、fixed和sticky。以下我们着重介绍后四种定位方式
| position值 | 语义 | 使用场景 |
|---|---|---|
| relative | 让这个元素"相对于"他自己的位置移动,但是还占居普通流中原来的位置 | 和absolute一起使用，用于文本框或者图片等的定位 |
| absolute | 绝对定位脱离了文档流，位置是相对于距离他最近的那个已定位的祖先元素确定的，祖先元素往往使用relative定位。 | 用于文本框或者图片等的定位 |
| fixed | 悬浮，生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right以及 bottom属性进行规定，它不随滚动条滚动。 | 广告窗口 |
| sticky | 这是CSS3新属性，表现类似position:relative和position:fixed的合体。当在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。 | 搜索框 |
三，absolute, relative, fixed偏移的参考点分别是什么？
答：
- relative：相对于自己在文档流中的位置进行偏移。
- absolute：相对于距离他最近的那个已定位的祖先元素确定的，如果没有已定位的祖先元素，那么就相对于body或者html。
- fixed：相对于浏览器窗口（viewport）进行定位。
四，z-index 有什么作用? 如何使用?
答：，Z-index 属性用来设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面（Z轴：垂直于显示器屏幕。）
图示
1、CSS样式表中Z-index属性的一些特征：
- Z-index属性的默认值是0
- 元素可拥有负的 z-index 属性值，如z-index:-1
- Z-index属性无继承性
- Z-index属性JavaScript 使用语法：object.style.zIndex="1"
- 几乎所有主流浏览器都支持 Z-index 属性
2、CSS样式表中Z-index属性的使用方法：
样式代码：.box {position:absolute; left:0px; top:0px; z-index:12}
CSS样式表中Z-index属性使用的注意事项：
（1）Z-index仅对定位元素有效（如position:relative\absolute\float）；
（2）Z-index只可比较同级元素。这也许是大家很容易忽视的问题。也就是说，Z-index只能对同级元素进行分层展示；
（3）Z-index的作用域：假设A和B两个元素都设置了定位（相对定位、绝对定位、一个相对一个绝对定位都可以），且是同级元素，样式为：.boxA{z-index:4}.boxB{z-index:5}于是，不难看出，元素B的层级要高于元素A，在此需要指出的是，A元素下面的子元素的层级也同样都低于B元素里的子元素，即使你将A元素里的子元素设为z-index:9999；同理元素B里的子元素，即使是设的z-index:1它照样比元素A的层级要高；
（4）这个属性不会作用于窗口控件，如select对象.
（5）在父元素的子元素中设置Z-index的值，可以改变子元素之间的层叠关系;
（6）子元素的Z-index值不管是高于父元素还是低于父元素，只要他们的z-index值是大于等于0的数，他们都会显示在父元素之上，即压在父元素上。只要他们的值是小于0的数，则显示在父元素之下！
（7）相同z-index谁上谁下
相同的z-index其实有两种情况
a. 如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
<div style="position:relative;width:200px;height:200px;background-color:#0e0;"></div><div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;"><div>
示例
b. 如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素
<div style="position:relative;top:50px;width:200px;height:200px;background-color:#0e0;"></div><div style=" width:100px;height:100px;background-color:#00e;"><div>
示例
五，position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
答：
-
position:relative：只有元素本身会发生偏移，它还占据着原来的位置，后面的元素不会受到影响。 - 负margin：
当把元素的margin-top、margin-left设为负数的时候，不仅元素本身会上移、左移，也会影响到后面的元素发生位置偏移。
当把元素的margin-right、margin-bottom设为负值的时候，元素本身不发生偏移，但是后面的元素会受其影响。
参考资料1参考资料2
六，如何让一个固定宽高的元素在页面上垂直水平居中?
答：
- 绝对定位top left各50%。
- 负margin top left 二分之一元素宽 高。
使用以下代码模板
.test{ width: X px; height: Y px; position:absolute; top: 50%; left: 50%; margin-top:-X/2 px; margin-left: -Y/2 px; }
举例说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>normal flow</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
position:absolute;
top: 50%;
left: 50%;
margin-top:-100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="div1">我是在哪里都居中居中</div>
</body>
</html>
居中
七，浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
答：浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。
浮动元素可以向左或向右移动，直到它的外边缘碰到一个元素（块级元素或者行内元素）的边框或另一个浮元素的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
综上：可以细说对其他浮动元素，普通元素，和文字的影响
- 浮动元素之间总是紧紧靠在一起横向排列（按照顺序从左往右，或者是从右向左）。如果父容器宽度有限，就会换行继续横向排列。
- 普通元素会无视浮动元素，按照普通流的顺序继续排列（块级元素从上往下，行内元素从左向右），页面显示时，浮动元素会在普通元素的上方。
- 不管是块级元素的文字还是行内元素的文字，文本都会会环绕浮动元素排列。
参考资料1参考资料2
八，清除浮动指什么? 如何清除浮动?
答：.clear : none/left/right/both用于清除浮动所带来的影响;定义了元素的哪边上不允许出现浮动元素.
一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
网友评论