94_css笔记10_css的定位流布局（position布局）

一，position属性的值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

二，相对定位：relative

1. 定义：
   1. position: relative;
   2. 相对定位就是相对于自己以前在标准流中的位置来移动
2. 注意点：
   1. 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
   2. 在相对定位中同一个方向上的定位属性只能使用一个
   3. 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
   4. 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局
3. 使用场景：
   1. 用于对元素进行微调
   2. 配合后面学习的绝对定位来使用

三，绝对定位：absolute

1. 定义：
   1.  position: absolute;
   2. 绝对定位就是相对于body来定位
2. 注意点
   1. 绝对定位的元素是脱离标准流的
   2. 绝对定位的元素是不区分块级元素/行内元素/行内块级元素
   3. 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
   4. 一个绝对定位的元素会忽略祖先元素的padding
   5. 参考点
      1. 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
      2. 只要是这个绝对定位元素的祖先元素都可以
      3. 指的定位流是指绝对定位/相对定位/固定定位
      4. 定位流中只有静态定位不行
      5. 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
   6. 水平居中
      1. 只需要设置绝对定位元素的left:50%;
      2. 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
3. 使用：子绝父相
   1. 子元素用绝对定位, 父元素用相对定位
   2. 相对定位弊端:
      相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
   3.  绝对定位弊端:
       默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

四，固定定位：fixed

1. 定义：
   1. position: fixed;
   2. 固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动
2. 注意点：
   1. 固定定位的元素是脱离标准流的, 不会占用标准流中的空间
   2. 固定定位和绝对定位一样不区分行内/块级/行内块级
   3. IE6不支持固定定位
3. 使用场景：

五，静态定位：static

• 默认值。没有定位，元素出现在正常的流中

六，定位属性

position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

1. overflow 属性：规定当内容溢出元素框时发生的事情
   1. visible    默认值。内容不会被修剪，会呈现在元素框之外。
   2. hidden    内容会被修剪，并且其余内容是不可见的。
   3. scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
   4. auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
   5. inherit    规定应该从父元素继承 overflow 属性的值。
2. clip 属性剪裁绝对定位元素
   1. shape    设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
   2. auto    默认值。不应用任何剪裁。
   3. inherit    规定应该从父元素继承 clip 属性的值
3. vertical-align 属性设置元素的垂直对齐方式，是行内元素的基线相对于该元素所在行的基线的垂直对齐
   1. baseline    默认。元素放置在父元素的基线上。
   2. sub    垂直对齐文本的下标。
   3. super    垂直对齐文本的上标
   4. top    把元素的顶端与行中最高元素的顶端对齐
   5. text-top    把元素的顶端与父元素字体的顶端对齐
   6. middle    把此元素放置在父元素的中部。
   7. bottom    把元素的顶端与行中最低的元素的顶端对齐。
   8. text-bottom    把元素的底端与父元素字体的底端对齐。
   9. length     
   10. %    使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
   11. inherit    规定应该从父元素继承 vertical-align 属性的值。
4. z-index 属性设置元素的堆叠顺序。
   1. 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
   2. auto    默认。堆叠顺序与父元素相等。
   3. number    设置元素的堆叠顺序。
   4. inherit    规定应该从父元素继承 z-index 属性的值。