1、文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流（normal flow）是文档中可显示对象在排列时所占用的位置，我理解的是浏览器默认的输出DOM的方式按自上而下，从左往右的顺序排列（不一定对哈~）。常见的就是块级元素和内链元素，块级元素只要出现就会霸道的占据一整行，而内链元素往往是只要右边还有余位，便会安心的占据。
脱离文档流一般有3种方式：float,positon:absolute,position:fixed。
有一点值得注意的是，文本在遇到float时会环绕着float；而遇到positon:absolute时，将无视它与之重叠排列。
2、有几种定位方式，分别是如何实现定位的，使用场景如何？
-
position:static：默认值，即正常的文档流形式；
正常的文档流
-
position:absolute：绝对定位，相对于有定位方法（除了static定位）的第一个祖先元素进行定位，若无定位的祖先元素则是相对于<html>进行定位，该定位方法脱离文档流；
拥有相对定位的wraps作为祖先元素
无相对定位的wraps，祖先元素为html
-
position:relative相对定位，相对于自己本身的定位方法，并未脱离文档流；
原来的位置依然未被占据
-
position:fixed我把它叫做牛皮鲜定位，相对于浏览器进行定位，它永远固定出现在浏览器中的某个位置。
我在这
你若不离不弃，我必生死相依
至于最终选取什么样的定位方式，那就得具体情况具体分析了。
3、absolute, relative, fixed偏移的参考点分别是什么？
其实第2题已经做出了解答：
- absolute参考的是离自己最近的、拥有定位（除了static）方式的祖先元素。若没有的话就是
<html>; - relative参考的是自身原本的位置；
- fixed参考的是
<html>。
4、z-index 有什么作用? 如何使用?
关于z-index其实很好理解，作为机械专业的学生，必须秀一波我卓越的画图技术了（尼玛快忘完了，凑合着看吧）：
我们假设有3个文档层，设置绿色层z-index:1;黄色层z-index:2;红色层为默认的0,然后定位时移动至下图模样
我们在网页中看到的布局
实际上被分成了三层：
看的更直观一点应该是这样：
显然，在网页布局中，我们能够看到的是黄色图层所呈现的所有元素，以及少量未被遮挡部分的红色元素以及绿色元素（大家其实都在，只是有些被遮挡了），通过这种方式我们可以用z-index画出很多图形，或是实现更加灵活的排版布局。记住一点，z-index数字越大，元素越靠上层。
5、position:relative和负margin都可以使元素位置发生偏移，二者有什么区别？
margin会改变其他元素的位置，而position:relative不会。
6、如何让一个固定宽高的元素在页面上垂直水平居中?
老办法：
CSS3新办法：
7、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
浮动元素脱离了文档流，浮动模型是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
- 对其他浮动元素的影响
字丑勿喷
-
对普通元素的影响
直接凌驾于其它元素之上，其实也是其它元素不鸟它
- 对文字的影响
文字环绕在其周围
8、清除浮动指什么? 如何清除浮动?
清除浮动用于本元素希望消去前面元素因为浮动所带来的布局影响。
如上图所示，3未浮动，1，2先后分别float:right,此时对3分别使用clear:both，clear:left，clear:right，结果如下：
clear:both
clear:left
clear:right
显然，
float:left不对清除浮动有效果。
现在让3向左浮动，并添加box4，由于1,2,3都脱离了文档流，自然4占据了左上角：
现在分别对4进行：clear:both，clear:left，clear:right，结果如下：
clear:both
clear:left
clear:right
我们由上面的测试结果可知：clear的left和right只对上一个浮动元素的方向有效，即浮动元素在左，用left值，反之用right，用both自然是最保险。
网友评论