2024-04-09(CSS移动Web+JS进阶)
1.平面转换
作用:为元素增加动态效果,一般和过度配合使用
定义:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)
transfrom属性中有许多方法支持对盒子进行各种变换。
2.空间变换
XYZ三条轴线构成立体空间,同样,也是用transfrom属性支持对盒子在立体空间进行各种变换。
3.定义动画
@keyframes 动画name{
from {}
to {}
}
//方式2
@keyframes 动画name{
0% {}
10%{}
......
100% {}
}
使用动画,animation:动画名称 花费动画时长
4.rem
rem是相对单位,是相对于HTML标签的字号计算结果,1rem = 1HTML字号大小
5.媒体查询
@media(width:320px) {
html {
background-color: pink;
}
}
媒体查询能够检测视口的宽度,然后编写差异化的CSS样式,当某个条件成立,执行对应的CSS样式
6.less
less是一个CSS的预处理器,less文件后缀为.less。扩充了CSS语言,使CSS具备一定的逻辑和计算能力。
实际上就是用less语言,可以有计算能力和逻辑能力的方便的写出CSS,它帮过自动生成
7.Bootstrap
Bootstrap是Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样式,允许开发者结合一定HTML结构以及JavaScript,快速编写功能完善的网页和常见交互效果。
说白了就是提供了许多写好的CSS样式,方便我们快速的使用,修改,达到快速开发的目的
<link rel = "stylesheet" href = "./Bootstrap/css/bootstrap.min.css">
8.栅格系统
栅格化是指将整个网页的宽度分为12等份,每个盒子占用的对应的份数
9.JavaScript也是一切皆对象
10.原型对象
构造函数通过原型分配的函数是所有对象所共享的。
---JS规定,每一个构造函数都有一个prototype属性,指向另一个对象,称之为原型对象
---这个对象可以挂载函数,对象实例化不会多次创建原型上的函数,节约内存
---因此我们可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法。
---构造函数和原型对象中的this都指向实例化的对象
<script>
// Person构造函数
function Person(){
}
// 为构造函数的原型对象新增sayHi方法
Person.prototype.sayHi = function(){
consoloe.log('cxr')
}
//实例化
let person = new Person();
person.sayHi(); // 构造函数实例化的所有实例化对象可以使用原型对象
</script>
注意:如果构造函数中定义的方法和构造函数的原型对象定义的方法名称相同时,实例对象默认调用的是构造函数中的方法
总结:当访问对象的属性或者方法的时候,先在当前实例对象中去查找,然后才会去原型对象中查找,并且原型对象是被所有的实例对象所共享的。因此:实际开发中,把一些重复使用的方法添加到原型对象中。
原文地址:https://blog.csdn.net/weixin_44847812/article/details/137544077
免责声明:本站文章内容转载自网络资源,如侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!