js相关知识点总结

定位的三个参照点

静态定位（static）： 一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。
绝对定位（absolute） ： 如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，
如果以上情况都没有， 它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）
相对定位（relative） ： 相对定位 （参照物：自己所在的位置）
1、如果没有定位偏移量，对元素本身没有任何影响
2、不使元素脱离文档流，空间是会被保留。
3、不影响其他元素布局
固定定位（fixed）： 相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

js里面的变量的命名规则
以字母、下划线、$开头；区分大小写；由字母、下划线、$或数字组成；
不能使用关键字和

js数组相关
concat() 连接两个或更多的数组，并返回结果
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度
shift() 删除并返回数组的第一个元素
unshift() 向数组的开头添加一个或更多元素，并返回新的长度
splice() 删除元素，并向数组添加新元素
reverse() 颠倒数组中元素的顺序
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
toString() 把数组转换为字符串，并返回结果
toLocaleString() 把数组转换为本地数组，并返回结果
toSource() 返回该对象的源代码(只有Gecko内核的FireFox支持)
valueOf() 返回数组对象的原始值

js常见的事件
blur失去焦点
focus获得焦点
change下拉列表选中项改变，或文本框内容改变
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
load页面加载完毕
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
select文本被选定
submit表单提交

1.indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
3.Math.random()方法返回大于等于 0 小于 1 的一个随机数。
4.Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；

移动端单位 百分比 rem em
rem 和 em 的区别
一、 rem的特点：
1、rem的大小是根据html根目录下的字体大小进行计算的。
2、当我们改变根目录下的字体大小的时候，下面字体都改变。
3、rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。

二、em的特点：
1、字体大小是根据父元素字体大小设置的。

移动端设置横屏竖屏的属性
orientation:CSS媒体属性屏幕方向可用于测试视口
viewport(或者对于分页 媒体而言的页面框盒)的横纵方向
portrait:viewport; 处于纵向， 高度大于宽度
portrait:viewport; 处于横向， 宽度大于高度

less 里面的基础语法
变量 @变量名: 值;
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

/* less中的选择器嵌套写法 */
#header {
    .logo {
       width: 300px;
    }
}

如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接
a{
  &:hover{
      color:red;
  }
}

h5的新标签

    header:头部标签
    nav:导航标签
    article:内容标签
    section:块级标签
    aside:侧边栏标签
    footer:尾部标签

视频的属性

2d转换
旋转：translate:rotate(角度)
rotate 旋转、deg度数
transform: rotate(度数)
角度为正时，顺时针，角度为负时，逆时针
默认旋转的中心点是元素的中心点
设置元素旋转中心点(transform-origin)
transform-origin: x y;
x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
给 x y 设置像素或者方位名词( top 、 bottom 、 left 、 right 、 center )

过渡：transition:
transition-property:属性名称
transition-duration:需要花费的时间
transition-timing-function:过渡曲线
transition-dalay:延迟时间

位移： translate

透视：perspective
perspective:300px; 放在父一级 (值越小透视越明显，值越大透视越不明显)
rotateX(deg) 围绕Ｘ轴旋转
rotateY(deg)围绕Ｙ轴旋转
translateZ(90px) Ｚ轴
transform-origin:center/top/bottom; 旋转的一个位置
transform-style:preserve-3d; 一般放在字里面

伸缩盒子

display:flex

    1.伸缩项主轴的对齐方式
        justify-content: flex-start;设置伸缩容器中的伸缩项, 和伸缩容器主轴的起点对齐
        justify-content: flex-end设置伸缩容器中的伸缩项, 和伸缩容器主轴的终点对齐
        justify-content: center;设置伸缩容器中的伸缩项居中
        justify-content: space-between; 两端对齐, 第一个伸缩项会和主轴的起点对齐,最后一个伸缩项会和主轴的终点对齐,其它项目平分多余的间隙
        justify-content: space-around; 环绕对齐, 给所有伸缩项的两遍都添加间隙
    2.伸缩项侧轴的对齐方式
        align-items: flex-start 侧轴的默认对齐方式: 和侧轴的起点对齐
        align-items: flex-end和侧轴的终点对齐
        align-items: center 和侧轴的中点对齐
        align-items: baseline按照所有伸缩项内容的基线对齐
        align-items: stretch拉伸对齐

    3.侧轴换行的行对齐方式
        align-content: flex-start
        align-content: flex-end
        align-content: center
        align-content: space-between
        align-content: space-around
        align-content:strech(默认值)
        属性的含义和justify-content一样

超出出现省略号：text-overflow:ellipsis
overflow:hidden;
white-space:nowrap

执行顺序：transform: translate() rotate() scale()