元素定位+锚点

                 元素定位+锚点

1.属性position

  属性值： static默认值  ， absolute绝对定位【绝对定位默认依据(html)定位】 relative相对定位  ，fixed绝对定位（固定定位）

  需要配合方向（top,bottom,right,left）使用。

1.1 绝对定位： 如果父元素有定位，依据有定位的父元素定位 （定位值不为static时）。

     绝对定位会脱离布局流，不占位。

     层级顺序z-index： number；默认为0，数值可以取负值，值越大在上层显示，需要配合定位使用。

1.2相对定位  依据自身原来的位置定位。 子元素依据父元素定位口令 ：子绝父相。  相对定位不会脱离布局流，原来的位置占位。

2.元素始终在窗口上下左右居中

方法一：

position: absolute ;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

方法二：

position: absolute ;

left:50%;

top:50%;

margin:-100px 0 0 -100px;

方法三：

弹性盒

方法四：

将小div转为行内块

在小div后新增一个span标签，给小盒子设置vertical-align：midden

给大盒子设置line-height为大盒子的高度，text-align：center

方法五：

网格布局

3.固定定位

position：fixed

需要配合方向使用。

粘性定位

position：sticky

可以看出是 position:relative 和 position:fixed 的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

4. 绝对定位和相对定位的区别

a参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；  

b绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

说明：当一个元素有绝对定位（absolute）的情况下，如果该元素的子元素需要以该元素为参照物进行绝对定位，那么子元素可以直接加position:absolute;

5.滚动条

  说明：Overflow内容溢出时的设置

  属性： overflow 水平及垂直方向内容溢出时的设置            overflow-x 水平方向内容溢出时的设置  

  overflow-y 垂直方向内容溢出时的设置  

  以上三个属性设置的属性值:

  visible,scroll,hidden,auto.

 visible 默认：其中的内容无论是否超出范围都将被显示。   

  hidden ：任何超出“width”和“height”的内容都会隐藏。

  scroll ：添加滚动条，无论内容是否超越范围，都将显示滚动条。

  auto ：当内容超出范围时，显示滚动条，否则不显示。

6.滚动字幕

语法：

<marqueebehavior=“scroll/alternate”  滚动形式           

direction="up/down/left/right"    滚动的方向           

scrollamount=“value”            滚动速度         

height="value"            滚动的范围  

width="">

</marquee>

behavior（行为）="scroll(滚动)/alternate（晃动）   direction（方向）="up(从下向上)/down（从上向下）   /left（从右向左）/right（从左向右）”  

scrollamount（滚动速度）="value"

height="value(上下滚动范围)" width=""(左右滚动范围)