任务10-浮动、定位

Q1:文档流的概念指什么？有哪种方式可以让元素脱离文档流?
答：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)。

脱离文档流方式：设置position:absolute/fixed和浮动会让元素脱离文档流

Q2:有几种定位方式，分别是如何实现定位的，使用场景如何？
答：
- 相对定位relative：相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
- 绝对定位absolute：相对于离自己最近的设置了定位的父级元素的位置进行偏移，可用于实现水平居中。
- 固定定位 fixed:：绝对定位的元素，相对于浏览器窗口进行定位。
- 静态static：静态定位,是position属性的默认值,跟从文档流定位。
Q3:absolute, relative, fixed 偏移的参考点分别是什么
答：
- absolute：参考祖先中的第一个position值不为static的元素。
- relative：参考元素原来的位置。
- fixed：参考浏览器窗口。
Q4:z-index 有什么作用? 如何使用?
答：设置元素的堆叠顺序，z-index越高元素位置越考上。前提是设置了postition。
Q5:position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
答：
- 设置position:relative只是改变了元素显示的位置，没有改变元素在文档流中的位置，会出现覆盖其他元素情况。
  
  Paste_Image.png
- 设置margin文档流位置会改变，后面的元素会随之改变。
  
  Paste_Image.png
Q6:如何让一个固定宽高的元素在页面上垂直水平居中?
答:使用position:absolute配合负margin实现。

Paste_Image.png
Q7:浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
答：
- 脱离文档流
- 只能水平偏移不能上下偏移，随着水平方向偏移，碰到边框或者其他浮动元素停止。
- 默认与内容同宽。
  
  空间宽裕
空间不足

对普通元素影响：浮动元素之后的元素为围绕着他。

对文字的影响:浮动元素还在文档流中
Q8:清除浮动指什么? 如何清除浮动?
答：清除浮动元素指：让元素指定位置（某一边货两边）不能出现浮动元素。
如何清除：
- 使用clear属性
  
  Paste_Image.png