流式布局思想
"""
页面的尺寸改变动态改变页面布局，或是通过父集标签控制多个子标签，这种布局思想就称之为 - 流式布局思想
1) 将标签宽高设置成 百分比，就可以随屏幕(父集)缩放而缩放
2) 将标签宽高设置成 视图百分比，就可以随屏幕缩放而缩放
3) 将子集字体设置成 继承值，就可以通过父集统一控制子集
"""
例子：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>流式布局</title> <style> /*body { margin: 0 }*/ .box { width: 800px; height: 200px; background-color: orange; /*页面宽度缩放，盒子始终居中*/ margin-left: auto; margin-right: auto; width: 80%; /*vw: view width | vh: view height*/ width: 80vw; width: 80vh; } /*em、rem*/ .sup { font-size: 40px; } .sub { /*font-size: inherit;*/ /*font-size: 1.5em;*/ /* 5em;*/ font-size: 2rem; } html { font-size: 30px; } </style> </head> <body> <div class="box"></div> <div class="sup"> <div class="sub">字</div> </div> </body> </html>
JavaScript函数
简单的举例：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js函数</title> </head> <body> <h1>js函数</h1> </body> <script> // 参数：你传你的，我收我的 function fn1(a, b, c, d) { console.log(a, b, c, d); console.log('fn1 run'); } fn1(1, 2, 3); let fn2 = function (...args) { console.log(args); console.log(args[0]); console.log('fn2 run'); }; fn2(1, 2, 3, 4); (function () { console.log('fn3 run'); })(); let fn4 = () => { console.log('fn4 run'); }; fn4(); // 有参有反 let fn5 = (a, b) => { console.log(a, b); return a + b; }; let res = fn5(1, 2); console.log(res); // 箭头函数函数体如果只有返回值，可以简写 let fn6 = (a, b) => a + b; res = fn6(10, 20); console.log(res); // 当形参只有一个，可以省略() let fn7 = a => a * 2; res = fn7(10); console.log(res); // 当形参为空的简写方式 let fn8 = () => 200; res = fn8(); console.log(res); </script> </html>
面向对象JavaScript
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>面向对象js</title> </head> <body> <h1>面向对象js</h1> </body> <script> // ES6 class Student { constructor(name) { console.log('构造器调用了'); this.name = name; } study() { console.log(`${this.name}在学习`) } } let s1 = new Student('Bob'); console.log(s1.name); s1.study(); //ES5 function Teacher(name) { this.name = name; this.teach = function () { console.log(`${this.name}在教学`) }; this.test = () => { console.log(`${this.name}-test`) } } let t1 = new Teacher('Tom'); console.log(t1.name); t1.teach(); t1.test(); // 可以理解为类属性，所有对象共有 Teacher.prototype.age = 10; Teacher.prototype.sleep = function () { console.log(`${this.name}在睡觉`) }; console.log(t1.age); t1.sleep(); let t2 = new Teacher('Jerry'); console.log(t2.age); t2.sleep(); /* 根组件、局部组件、全局组件都是Vue的对象，所以给Vue原型设置的变量，所有组件的this都可以访问该变量 Vue.prototype.abc = 123; let localTag = {}; Vue.component('',{}); new Vue({ components: { localTag } }); */ // function 与 箭头函数 是有本质区别的 let h1 = document.querySelector('h1'); // h1.onclick = function () { // // alert(this.innerText); // console.log(this); // }; // h1.onclick = () => { // // alert(this.innerText); // console.log(this); // } </script> </html>