浮动、定位（10）

问答

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

• 文档流即指普通流。将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)，这是传统HTML文档的文本布局。
• 文本流和文档流的区别：
  文档流是相对于盒子模型讲的
  文本流是相对于文子段落讲的
  元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。
  但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。
  当然也可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念。
• 脱离文档流的方式

1. position:absolute;
2. position:fixed;
3. display:none;
4. float:left/fight.
   实例

---

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

• position:static 当我们有两个页面同时需要对某个元素进行绝对定位，另外一个不需要时。

  
  
  

  0_1479047619672_upload-5ff5d3e9-6574-4baa-ac1e-7f8d5f9dd6c7
  
  
  

  0_1479047653904_upload-a05d9d54-09ec-486c-ba52-72e1923a5ee3
• position:relative

1. 带有此项属性的父元素常作为具有绝对定位属性的子元素的参照物。
2. 有left right top bottom四个属性，值表示相对于元素文档流中的位置的位移大小
3. 包括IE6以内，全部支持

• position:fixed

1. 网页两侧浮动窗口(播放器,置顶按钮,浮动广告，功能按钮等)
2. 隐藏div实现弹窗功能(通过设置div的定位和z-index控制div的位置和出现隐藏)
3. 有left right top bottom四个属性，值是相对于浏览器页面窗口边框的位移。

• position:sticky 在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。常用于侧边栏的部分区域。值和
  同上。
  实例

---

三、absolute, relative, fixed 偏移的参考点

1. absolute：详情见实例
   相对于非static定位以外的第一个祖先元素（根据用户代理的不同，最初的包含块可能是画布或 HTML 元素）进行定位。
2. relative：相对于元素本身正常位置进行定位
3. fixed：相对于浏览器窗口进行定位
   实例

---

四、z-index的作用？如何使用？

• 作用：z-index数学指定了一个元素及其子元素的z-order.当元素之间重叠时，z-index决定哪一个元素覆盖在其余元素的上方显示。通常来说z-index较大的元素会覆盖较小的那一个。
• 使用对象：定位元素
• 使用方式：z-index:值（此自定义值建议为1、2、3、4等简易数字可以较为明显的看出谁能在堆叠上下文中最上面显示）
  实例

---

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

position:relative使元素位置偏移，但是本来的位置还保存在那，不影响其他和本元素并列的元素。负margin反之。

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

例子

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

• 特征：浮动元素脱离文档流。

1. 其他浮动元素碰到浮动元素的边框就会停住不继续往那个方向浮动。一排可能会有多个浮动元素，满了之后在下一排排列。
2. 会覆盖在普通元素上面。
3. 文字会围绕浮动元素。

---

八、清除浮动指什么? 如何清除浮动?

• 对于浮动元素引起的问题：

1. 浮动元素不会影响父元素的高度。这样做会让父元素塌陷，从而使父元素的高度为“0”，以及忽略其他的属性。
2. 与浮动元素同级的非浮动元素会跟随其后。
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
   我们给予清除浮动的办法。clear: nono|left|right|both
   对元素清理实际上为前面的浮动元素留出了垂直空间，且清除浮动时，添加clear属性只能对自己有效。

• 较为典型的三种方法

1. clear:both
2. overflow:auto/hidden
3. chearfix伪元素
   各种办法
   参考
   实例
   实例
   实例

---

代码

一、

demo

二、

demo