第十弹-浮动、定位

问答：

1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?

文档流就是Html中的元素 按照自上而下 从左到右的的顺序进行排版
脱离文档流的方法

• 浮动float:left/left
• 定位

      position: absolute;/relative; / fixed; /sticky;     

---

2.有几种定位方式，分别是如何实现定位的，使用场景如何？

• static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
• relative 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:40px会向元素的 left 位置添加40px

div.relative{
  position:relative;
  top:40px;
  left:50px;
}

效果如下，其中红色代表原来位置

Paste_Image.png

• absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定
  left top

Paste_Image.png

right bottom

Paste_Image.png

left bottom

Paste_Image.png

right top

Paste_Image.png

• fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定

 div.fixed{
   position:fixed;
   right:20px;
   top:40px;
}

Paste_Image.png

• sticky CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
  fixed 的兼容性不好 大多数浏览器不支持

  
  
  

  Paste_Image.png

---

3.absolute, relative, fixed 偏移的参考点分别是什么

absolute 参考点是离他最近的定义了 position 并且值不是static 的父级元素
relative 的参考点是是相对与元素本身正常位置的定义
fixed 的参考点是浏览器窗口

---

4.z-index 有什么作用? 如何使用?

z-index 可以改变浏览器的层叠顺序 ，z-index 大的覆盖小的。

---

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

margin和position:relative都可以使元素位置偏移

• 使用position:relative会使元素在原有基础上进行偏移但是文档流的位置还是在偏移前的位置，使用margin属性的时候文档流的位置已经做出改变
  所以在没有设置浮动的情况下 使用 relative 会遮挡住普通元素，而使用margin不会遮挡普通元素
  
  

  Paste_Image.png
• position:relative 是相对与本身元素的位置进行偏移，margin是 改变元素之间的相对位置
  在div 设置float:left属性后 relative和margin都会覆盖前面的普通元素，
  但是 relative会在以前的位置像是留下了一个占位一样，后面的元素不会补位，
  而margin左偏移后没有留下占位，后面的元素会补位跟过来
  
  

  Paste_Image.png

---

6.如何让一个固定宽高的元素在页面上垂直水平居中?

1.在元素外边加一个div 设置position：relative
2.在元素上设置

      position：absolute ;
     top: 50%;
      left: 50%;
      margin-left: -100px; /*宽度一半*/
      margin-top: -100px;/*高度一半*/

---

7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

浮动元素不在文档流中

• 对于其他浮动元素，会占位 （2 遇到1 以后没有跑到1的位置）

Paste_Image.png

• 对于普通元素来说由于浮动元素不占据文档流 ，普通元素会占据文档流的位置
  *如果父级元素的宽度不够的时候，会另起一行

Paste_Image.png

• 还有一种情况我们需要注意 如果 盒 1的高度过高的时候会将盒3挤到一个奇怪的位置，我们在使用浮动排版时要注意 限定浮动元素的高度+浮动元素上加入overfloat属性 避免浮动元素由子元素撑开的过高

Paste_Image.png

• 对于同级的行内元素例如

  标签来说 会产生包裹的效果。

Paste_Image.png

---

8.清除浮动指什么? 如何清除浮动?

对元素清理实际上为前面的浮动元素留出了垂直空间,这样可以解决我们之前的一个问题，看前面的图片的时候我们发现div内的所有元素浮动的话就会不占据文档空间，这样父元素，高度为0，可能很多效果也不见了
使用clear方法清除浮动

    .clear:after{
      content: "";
      display: block;
      height: 0;
      clear: both;
    }

---