前端学习---JS
前端学习心得
文章目录
-
- 前端学习心得
- js基本组成
-
-
- js变量
-
- js变量名命名规则
-
- css定位
-
js基本组成
1.ECMAScript（ES）: 负责翻译，为js的核心，解释器。
2.DOM (Document Object Model 文档对象模型)：赋予js操作HTML。
3.BOM (Browser Object Modal 浏览器对象模型)：赋予js操作浏览器。
js变量
一含义
变量：计算机中用来存储数据的”容器”。
二本质
在内存中开辟了一个空间,用来储存数据,本身不是数据,而是装载数据的容器。
三关键字
let 和 var 都是 JS中的声明变量的关键字,但是随着前端技术的不断更迭,let更加严格一些,所以推荐使用let。
四声明和赋值
1.声明
声明(定义)变量有两部分构成：声明关键字、变量名（标识）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
let x = 5;
let y = 6;
let age=999;
script>
body>
html>
2.赋值
声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
let age;
age = 17;
document.write(age);
let str = 'hello world!';
alert(str);
script>
body>
html>
五补充
1.使用 let 时的注意事项：
(1)允许声明和赋值同时进行。
(2)不允许重复声明。
(3)允许同时声明多个变量并赋值。
(4)JS中内置的一些关键字不能被当做变量名。
2.使用 var 时的注意事项：
(1)允许声明和赋值同时进行。
(2)允许重复声明。
(3)允许同时声明多个变量并赋值。
(4)大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let。
js变量名命名规则
关于变量的名称（标识符）有一系列的规则需要遵守：
1.只能是字母、数字、下划线、$，且不能能数字开头。
2.字母区分大小写，如 Age 和 age 是不同的变量。
3.JavaScript 内部已占用于单词（关键字或保留字）不允许使用。
4.尽量保证变量具有一定的语义，见字知义。
css定位
一定位(position)：
定位是一种更加高级的布局手段,通过定位我们可以将一个元素摆放到页面的任意位置
使用position属性来设置定位
可选值：
static:默认值 元素是静止的 没有开启定位
relative:开启元素的相对定位
1.相对定位的特点：
(1)元素开启相对定位以后 如果不设置偏移量(offset) 元素不会发生任何变化
通过偏移量设置元素的位置:
top:定位元素和定位位置上边的距离
bottom:定位元素和定位位置下边的距离
left:定位元素和定位位置左边的距离
right:定位元素和定位位置右边的距离
(2)相对定位是参照与元素在文档流中的位置进行定位的
(3)相对定位会提升元素的层级
(4)相对定位不会使元素脱离文档流
(5)相对定位不会改变元素的性质 块还是块 行内还是行内
absolute:开启元素的绝对定位
2.绝对定位特点:
(1)开启绝对定位后 如果不设置偏移量 元素位置不会发生变化
(2)开启绝对定位后 元素会从文档流中脱离
(3)绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
(4)绝对定位会使元素提升层级
(5)绝对定位是相对于其包含块进行定位的
包含块(containing block):
正常情况下包含块就是离当前元素最近的祖先块元素
绝对定位的包含块： 离它最近的开启定位的祖先元素
如果所有的祖先元素都没有开启定位
则相对于根元素进行定位
fixed:开启元素的固定定位
3.固定定位也是一种绝对定位,所以固定定位的大部分特点和绝对定位一样。唯一不同的是 固定定位永远参照于浏览器的视口(浏览器可视窗口)进行定位。固定定位的元素不会随滚动条滚动上去 而是跟随可视窗口的移动而移动
sticky:开启元素的粘滞定位
粘滞定位的特点和相对定位基本一样
粘滞定位可以在元素到达某个位置时固定
二绝对定位的元素布局
开启定位后的等式：
left+margin-left+border-left+padding-left+width+padding-left+width+padding-right+margin-right+right=包含块内容区的宽度
1.当开启绝对定位后：
水平方向的布局等式就要添加left和right两个值
此时规则和之前一样只是多添加了两个值
2.当发生过渡约束时：
如果九个值中没有auto 则自动调整right值 以使等式满足
如果有auto则自动调整auto的值以使等式满足
可以设置auto的值：margin width left right
left和right的值默认是auto 则等式不满足时，会自动调整这两个值
垂直方向布局的等式也必须要满足：
top+margin-top+margin-bottom+padding—top/bottom+border-top/bottom+height+bottom=包含块的高度
以下设置可以让元素水平垂直都居中:
left: 0;
right: 0;
top: 0;
bottom: 0;