1、含义
元素定位 把元素⾃由的在⻚⾯上安排位置
2、定位的三要素
◦ 1.确定⽬标元素
◦ 2.坐标系
◦ 3.定位流
3、定位的属性
（
1）position:
static --------默认 元素不定位 在正常的⽂档流
relative-------相对定位 相对于元素本⾝在浏览器的位置去定位
absolute -----绝对定位 相对于包含块定位
fixed----------固定定位 相对于当前窗⼝定位
sticky---------粘性定位 临界点 css3
（
2）偏移属性
◦ 只有设置了定位属性(属性不是默认值)的元素才能设置偏移属性
▪ top right bottom left
◦ 定位属性position必须和偏移属性⼀起使⽤4、相对定位
（
1）position:relative 相对定位 相对于元素本⾝在浏览器的位置去定位
配合偏移属性:top right bottom left
（
2）相对定位的特点:
1.参考位置:相对于元素本⾝在浏览器的位置去定位
2.相对定位不脱离⽂档流，在正常的⽂档流中的位置会保留
3.⽀持负值
5、绝对定位
（
1） position: absolute 绝对定位 相对于包含块定位
配合偏移属性:top right bottom left
（
2）绝对定位的特点:
▪ 1.参考位置:相对于包含块定位
• 有定位属性并且属性值不是默认值的⽗元素
▪ 2.⽀持负值
▪ 3.脱离⽂档流，在正常的⽂档流中的位置不会保留
▪ 4.⼦元素绝对定位,⽗元素相对定位-------⼦绝⽗相
• 不要对⽗元素使⽤绝对定位，因为这样⽗元素会脱离默认⽂档流，脱离定好的位置，影
响布局
(3)绝对定位的参考位置: 相对于包含块定位
包含块: 有定位属性并且属性值不是默认值的⽗元素
▪ 如果⽗元素没有定位属性,那么该元素会继续往上找，直到找到最近的有定位属性的,并且属
性值不是默认值的 祖先级元素
▪ 如果绝对定位的元素的祖先级元素都没有定位属性，那么该元素会参考浏览器定位
6、固定定位
(1) position: fixed 固定定位 相对于窗⼝定位
配合偏移属性:top right bottom left
(2) 固定定位的特点:
▪ 参考位置：相对于浏览器可视区域的左上⻆定位
▪ 脱离⽂档流
7、 偏移属性
（
1）只有设置了定位属性的元素，属性值不是默认值的，才能设置偏移属性top、 left、 right、bottom
（
2）偏移属性的取值
◦ auto 默认值 元素处于原来在⽂档流的位置不变
◦ 数值
◦ 百分⽐
▪ 相对定位 参考⽗元素的宽⾼
▪ 绝对定位 参考包含块的宽⾼
▪ 固定定位 参考窗⼝的宽⾼
（
3）偏移属性值设置
• 元素有宽⾼时，设置了冲突的偏移属性：
◦ 当⼀个元素同时设置top bottom 会以top为准
◦ 当⼀个元素同时设置left right 会以left为准
• 元素⽆宽⾼时，设置了冲突的偏移属性：
◦ 当⼀个元素没有设置⾼度的时候，同时设置top bottom ，会拉伸⾃⼰以适应top bottom
◦ 当⼀个元素没有设置宽度的时候，同时设置left right ，会拉伸⾃⼰以适应left right
◦ 当⼀个元素没有设置宽度和⾼度的时候，同时设置left right top bottom ，会拉伸⾃⼰以适应
left right top bottom
8、定位对元素的影响
◦ 浮动、绝对定位、固定定位的元素可以让元素直接设置宽⾼
▪ 原因：都是脱离⽂档流的元素，不再遵循默认⽂档流的元素类型
9、元素的⽔平垂直居中
（
1）第⼀种：⾃我计算
使⽤margin来调整元素的位置 要知道⽗⼦元素的宽⾼
（
2）第⼆种：绝对定位 +左上两⽅位各50%+ 左边距、上边距
只需要知道⼦元素的宽⾼
1.⼦绝⽗相
2.⼦{
/* 移到中间去 ，通过这步，⼦元素的左上⻆居中了*/
top: 50%;
left: 50%;/* 回调 ⻓、⾼度为⼦元素的⼀半，因为⼦元素左上⻆为中⼼居中点，移动⼀半宽度，则左
右两边宽度相等，⾼度同理（相当于把⼦元素左右对折、上下对折⼀下）*/
margin-top: -100px;
margin-left: -150px;
（
3）第三种：绝对定位 + 所有偏移值为0 +margin:auto
不需要知道⽗⼦元素的宽⾼，但是⼦元素必须写宽⾼（原理：⼀个不成⽂的规定，margin本来
只是让元素⽔平居中，但是当⼦元素四个⽅向的偏移值都被清除时，margin则还会计算垂直⽅
向，让元素同时⽔平居中）
1.⼦绝⽗相
2.⼦{
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
（
4）第四种：固定定位 + 所有偏移值为0 +margin:auto
1.给需要居中的元素固定定位（
position: fixed）
2.继续给需要居中的元素设置{
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
四、JS（
javascript）
（⼀）、JS基础
1、js的特点（
1）JavaScript是⼀⻔⾯向对象，跨平台的脚本语⾔
▪ ⾯向对象：⽅法和属性跟执⾏顺序没有关系，我可以先设置这个属性，也可以先设置b别的
属性，只要最终能实现效果即可
• ⾯向过程：每⼀步环环相扣，对⽅法和属性进⾏操作时，必须⼀步步来，执⾏完当前的
这⼀步，才能继续执⾏下⼀步
▪ 跨平台：js代码可以依托浏览器，在所有的操作系统中都可以运⾏（window、Linux、
Unix、ios、AndroidRR）【平台即操作系统】
▪ 脚本语⾔（动态语⾔、宿主语⾔）：必须要有宿主环境，代码才能运⾏（
js必须依托与
HTML⽂档才能运⾏，所以HTML⽂档是js的宿主环境）
（
2）JS的出现原因
早期浏览器不具备处理信息的能⼒，所有的信息验证都在服务器中完成，导致浏览器响应
⾮常慢。所以出现了js，可以在浏览器中完成部分的信息处理⼯作
2、组成：
Javascript: ECMAScript DOM BOM
ECMAScript也是⼀⻔脚本语⾔，只提供了最基本的语法，约定了我们的代码如何编写，⽐
如定义变量和函数，循环和分⽀，只是停留在语⾔层⾯，并不能⽤来完成我们应⽤中的实际功
能开发。
JavaScript实现了ECMAScript的语⾔标准，并且在这个基础之上做了⼀些扩展，使得我们
可以在浏览器环境中操作DOM 和 BOM，在node环境中可以做读写⽂件之类的操作。
【补充：ES能在不同的宿主环境中发挥核⼼的脚本编程能⼒，但是ES的语法规则既不会受
宿主环境的改变，也不会改变宿主环境的语法规则。
如：HTML虽然是JS的宿主环境，但是这两种语⾔的语法规则是不同的】
3、JS的特点
• 解释性的脚本语⾔：浏览器⾃带JS的解释器，所以不需要对JS代码进⾏编译，JS先会被
翻译成中间代码，再由解释器对中间代码进⾏解释运⾏（源代码—>中间代码—>机器语
⾔）
• 运⾏在浏览器中（因为JS的运⾏要依托于HTML，HTML要在浏览器中运⾏）
• 弱类型语⾔：定义变量时，不需要强制规定变量的数据类型
如：var a= (取值可以为数值、也可以为⽂本、布尔值……)
▪ 强类型语⾔：定义变量时，需要强制规定变量的数据类型
• 如 int a =（取值只能时整数）
• 事件驱动：可以设置动态效果，对⻚⾯进⾏操作会有反馈
• 跨平台4、JS⽤途
视觉交互(嵌⼊动态⽂本到HTML⻚⾯、对浏览器事件做出响应)
数据交互(读写HTML元素、数据验证、检测访客使⽤的浏览器类型、控制coookies)
node.js(进⾏服务器端编程)
5、JS和H5的关系
我们平时⽤的是HTML4，可以⽤JS来实现H5标签的深层扩展功能（如video标签）
