任务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

Paste_Image.png

• 使用overflow属性

  
  Paste_Image.png

本教程版权归饥人谷和作者所有，转载须说明来源