- 手写一个布局，带header以及左右两栏，左栏宽度固定，高度自适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS布局</title> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>第一种：
-
*{ margin：;padding:0; } html, body{ height:100%; } #left{ 200px; height:100%; background-color:pink; float:left } #right{ height:100%; background-color:black; margin-left:300px; } - 第一种添加margin-left我为了和第一个模块并列 300px为left的宽度
-
第二种：
-
*{ margin：;padding:0; } html, body{ height:100%; } #left{ 200px; height:100%; background-color:pink; float:left } #right{ height:100%; background-color:black; overflow:hidden; }第二种方法用的BFC（块级格式化上下文）来防止文字环绕的原理来实现的
- BFC 是一个相对独立的布局环境，它的内部元素不受外面布局的影响可通过以下方式来创建
- 1 float值不为none
- 2 position 不为static relative
- 3 display 值为 table-cell table-caption inline-block flex inline-flex中其中一个
- 4 overflow 值不为visible
- 小结：首先为固定宽度的元素设置（左浮动或者有浮动——根据那边固定来定）；接下来为自适应元素设置（margin-left或者margin-right值——根据固定元素设置的左浮动或者右浮动来定）或者为其设置overflow:hidden。
- this作用域：
-
var name = "Jay Global";
var person = {
name: 'Jay Person',
details: {
name: 'Jay Details',
print: function() {
return this.name;
}
},
print: function() {
return this.name;
}
};
console.log(person.details.print()); // ?
console.log(person.print()); // ?
var name1 = person.print;
var name2 = person.details;
console.log(name1()); // ?
console.log(name2.print()) // ?
VM95:14 Jay Details
VM95:15 Jay Person
VM95:18 Jay Global
VM95:19 Jay Details - 要记住，
this关键词是在函数调用时才做绑定的。name1()前面是什么？什么都没有。因此this关键词就将指向全局的window对象去。 name1中this指向window - name2里面的this指向
Jay Details'，因为print是name2调起的，而name2指向details。 - http://caibaojian.com/deep-in-javascript-this.html
- 数组常用的api及应用场景
- some 其中一个满足条件就返回true
- every 所有满足条件返回true
- forEach是遍历所有数组 得到的是返回值
- sort是 排序 var px = arrSort.sort(function(a,b){ // 从小到大 return a - b; // 从大到小 // return b - a;
- map var cz = arr.map(function(item,index){ return '<b>'+item+'</b>' }) console.log(cz)//["<b>1</b>", "<b>2</b>", "<b>3</b>"]
- filter 过滤掉不符合的数组元素 比如要>3的 数组返回的是＞3的数
- slice 是截取数组
- index 0f 与；last indexof获取的是位置
- https://blog.csdn.net/Aries406532/article/details/78426151
- 轮播图
- https://blog.csdn.net/diligentkong/article/details/55209861
- 虚拟dom
- 它是直接用js实现dom树 组件html结构并不会直接生成dom 而是生成虚拟jsdom结构 react通过这些虚拟的dom实现diff算法 找出最小变量 再把这些变量写进实际的dom中，这个虚拟的dom以js结构形式存在 计算性能比较好，而且减少了实际dom的请求次数 性能较大提升。
- https://blog.csdn.net/jian_xi/article/details/72841891