css：定位部分以及相关拓展知识

一.定位

相对定位、绝对定位、固定定位

position:static 默认值 默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位

**注意：**元素一旦设置了position，并且取值为relative/absolute/fixde其中一种时

1.这个元素被称为已定位元素
2.解锁四个方向的定位属性：top / right / bottom / left
左右冲突以left为准
3.会解锁堆叠属性z-imdex

1.相对定位

position:relative; 配合偏移属性
不脱离文档流，不影响周围元素
如果一个元素设置了相对定位，并且不写偏移属性，这个元素对页面没有任何影响
如何偏移：相对自己原先位置偏移

使用场合：
①做元素位置的微调
②作为绝对定位的祖先级已定位元素

2.绝对定位

position:absolute;配合偏移属性
绝对定位，脱离文档流

如何偏移：
①如果元素没有已定位的祖先元素，绝对定位元素相对body左上角进行偏移
②以“最近的”“已定位的”“祖先级”元素左上角做偏移，子绝父相
使用场合：页面布局中使用，可以让页面移动到页面的任何位置

3.固定定位

position:fixed; 配合偏移属性
如何偏移：相对于body左上角
使用场合：把元素永远固定在页面可视区域的一个位置

4.堆叠顺序

z-index:
1
注意事项：
1.HTML代码中后写的元素堆叠顺序高
2.z-index：默认值大于0小于1
3.浮动在第几层 小于0 大于-1
4.只有已定位的元素才能设置堆叠
5.堆叠顺序对父子级元素无效，儿子永远压着父亲

二、

1.HTML标签

1.1link

作用：引用外部资源
属性：rel、href
主要功能：引入css、网页图标等

<!--引入外部css 
stylesheet定义引入的格式为样式表
 href属性代表引入的链接（地址）
 --> 
  <link rel="stylesheet" href="css/index.css" /

<!--引入外部css 
icon定义引入的格式为网页的图标 
href属性代表引入的链接（地址） 
--> 
<link rel="icon" href="./img/tb.png" />

1.2meta

功能：定义页面的文本编码类型、定义窗口大小对应的 显示模式

<!--定义编码类型为utf-8
--> 
<meta charset="utf-8" />

<!--name="viewport"表示的是定义窗口视图情况 
content="width=device-width, initial-scale=1.0" 
width=device-widthL:表示根据设备的视图宽度调整网页宽度 
initial-scale=1.0：设置浏览器首次加载页面时的初始缩放级别 
-->
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

1.3文本类标签

p：表示一个段落
i：表示斜体文本
span：用于定义单独样式（使用css定义）
strong：表示文本粗体

<p> 
这是一个段落<i>这是i标签的内容</i><br /> 
<span id="" class="">这是span的内容</span><br /> 
<strong>这是strong的内容</strong> 
</p>

1.4其余

video：标签定义视频，比如电影片段或其他视频流
audio：标签定义声音，比如音乐或其他音频流
canvas：用来处理图片、绘制图像等功能，是使用JavaScript操作图像的技术， HTML5 中的新标签
echarts库：用来制作图表的技术，后端程序员需要掌握

2.CSS拓展

2.1`页面中长度单位的定义

vw、vh：
根据屏幕百分比来计算显示使用的像素值，100vw表示占屏幕宽度100%，主要用于移动端开发，适配不
同大小的屏幕
font-size、em：
font-size：用于定义单位长度的像素值
em：1em等于1个font-size的长度
好处：统一了长度的大小，可以只改变font-size，就改变了所有的元素的大小