任务10-浮动、定位

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？）所以删除了。

---

本文版权归本人和饥人谷所有，转载请注明来源！

---