html定位属性，锚点，滚动条

CSS文档流

CSS 有三种基本的定位机制：普通流、浮动流、定位流。

POSTION

position定位属性，检索或设置对象的定位方式

position属性值

static	默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给 予的位置（static元素会忽略任何 top、bottom、left或 right 声明）
absolute	相对于已经定位父级元素的绝对定位，浮出、脱离布局流，它不占据空 间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置， 可直接指定“left”、“top”、“right” 以及 “bottom”属性。若 父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value)
relative	是相对于默认位置的相对定位，通过设置left、top、right、bottom值 可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位 置上的移动，【不会破坏正常的布局流，占据空间】）
fixed	相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元 素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。 不论窗口滚动与否，元素都会留在那个位置。
sticky	可以看出是 position:relative 和 position:fixed 的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的 时候，表现为fixed。

元素水平居中三种方法：

第一种

父元素{position:relative;}

子元素{position:absolute;

top:50%

left:50%

margin-top:-50px;

margin-left:-50px

}

第二种

父元素{position:relative;}

子元素{

position:absolute;

top:0;

left:0;

bottom:0;

right:0;

margin:auto;

}

第三种（可以多个元素居中）

父元素{position:relative;}

子元素{

display:flex;

justify-content:center;

align-items:center;

}

fixed

二、绝对定位和相对定位的区别

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

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

包含块

包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；

默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

定位元素层次关系

z-index : auto |number

检索或设置对象的层叠顺序。

auto：默认值。

number:无单位的整数值。可为负数

没有设置z-index时，最后写的对象优先显示在上层(都拥有定位)，设置后，数值越大，层越靠上；

子元素在浏览器窗口居中的方法

让一个元素始终在浏览器窗口水平、垂直位置居中：

1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}

2、

div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}

锚点

命名锚点链接的应用：

命名锚点的作用：在同一页面内/其他页面的不同位置进行跳转。

制作锚标记：

1)给元素定义命名锚记名

语法：<标记   id="命名锚记名"></标记>

2)命名锚记连接

语法：<a href="#命名锚记名称"></a>

扩展：scroll-behavior: smooth;

注意：减号两边有空格

滚动条

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

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

  overflow-x 水平方向内容溢出时的设置  

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

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

  visible,scroll,hidden,auto.

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

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

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

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

滚动字幕

语法：

<marquee behavior=“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=""(左右滚动范围)