1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?
- 文档流概念：网页布局最原始的一种元素自身所在位置的布局方向。内联元素从左到右从上到下，块元素占据一行从上到下。如下图：
Paste_Image.png
-
脱离文档流方式：
-
浮动(float)：
Paste_Image.png
-
-
定位 (position)：
Paste_Image.png
2.有几种定位方式，分别是如何实现定位的，使用场景如何？
1.position:static(默认值)
Paste_Image.png
2.position:relative: 占据文档流位置，用于微调自己的位置，且不会改变其他元素的位置。
Paste_Image.png
3.position:absolute:自身不占据文档流位置，也不会改变其他元素的位置。
Paste_Image.png
4.position:fixed:自身不占位置，相对窗口来定位，比较适合做广告框，让人恶心的一直出现在屏幕上。
Paste_Image.png
3.absolute, relative, fixed偏移的参考点分别是什么？
前面内容中有提及也都有图示，这里就不做图示了，简单回答一下。
- absolute：不占据文档流位置，相对它的祖先元素中第一个position值不为static的元素来偏移（不包括边框）。
- relative：占据文档流位置，相对自身占据的文档流初始位置来做偏移。
- fixed：不占据文档流位置，相对整个web窗口来做偏移。
4.z-index 有什么作用? 如何使用?
- 只对定位元素有效
z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的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
-position:fixed+margin点击查看代码
Paste_Image.png
7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
-
不占据文档流块元素位置，其他块元素会无视它的存在正常显示在本来的位置上，但是影响内联元素在文档流中的位置。
Paste_Image.png - 对于其他浮动元素占据位置，根据代码先后其他浮动元素紧跟其后。
Paste_Image.png
8.清除浮动指什么? 如何清除浮动?
-
清除浮动指的是将浮动元素拉回文档流内，让它撑起浮动后在文档流中所占用的位置。下图可以看出不设置父容器宽高，浮动元素在父容器边框外。
Paste_Image.png - 在两个浮动元素后面添加一个没有内容的div， 通过clear:left，清除浮动。
Paste_Image.png
- 给浮动元素一个父容器，并使用E ::after，其实原理一样，如下图显示：
代码
Paste_Image.png
前面的代码展示连接由于失误，点击显示的都是最后这个连接（不明白为什么，难道每次写新题目的代码都要点击new bin？）所以删除了。
本文版权归本人和饥人谷所有，转载请注明来源！
