task 10

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

文档流（normal flow）指按照从左到右、从上到下的布局方式，又称普通流、正常流、标准文档流。
让元素脱离文档流的方式有：

• float——浮动
  浮动的元素脱离文档流，向左或者向右移动至包含块内边缘或者同样浮动的元素外边缘。
• position:absolute 绝对定位
  绝对定位的元素脱离文档流，在原位置上方直至设置了定位值，以最近已定位的祖先元素内边框为参照。
• 固定定位position: fixed;
  固定定位的元素脱离文档流，在原位置上方直至设置了定位值，参照物为浏览器可视区。

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

css的定位机制分为三种：文档流、浮动、定位。

1. 文档流
   是所有元素布局的基础，作为从左到右、从上到下的布局方式，这是最常用的一种排版布局方式。
2. 浮动 实现语法和特性见题1，浮动最初是为了实现文字环绕图片，后来慢慢用于实现多列布局。
3. 定位
   静态定位 :与文档流类似
   相对定位：未脱离文档流，相对原来的位置定位，仍然占据原来位置。适用于层叠效果。
   绝对定位：脱离文档流。 适用：小区块的布局使用频繁
   固定定位：脱离文档流 用于广告等意图一直出现在用户眼前的信息。

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

absolute,参考点为最近已定位的祖先元素的内边框
relative：参考点为内边框
fixed：参考点为浏览器可视区内边框

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

z-index定义了z方向（与显示屏垂直的方向，值越大者堆叠显示在前面）的级别从而使元素有序堆叠显示。 只对已定位的元素生效。

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

position:relative不论偏移到何处只是占据原来的位置，而margin比较霸道——偏移的位置都要被自己占据。

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

Paste_Image.png

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

浮动元素特征：
文字环绕图片。
脱离文档流、不占位置。
浮动的元素，一定程度上可以理解为带方向的inline-block元素，一样可以同行排列，可以设置元素宽高、边距，只是排列顺序可以从右到左。

浮动的影响：
对其他浮动元素 兄弟之间从左到右，从上到下排列。
对普通元素 脱离文档流，不占位置。
对文字 浮动创造的目的就是为了文字环绕图片，所以文字会环绕、包裹浮动元素。

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

清除浮动 清除浮动指的是清除浮动对其他元素造成的影响。
如何清除浮动
清除浮动的方式：
运用clear:both/left/right清除浮动
code1
code2