温习CSS
选择器分类
image.png
选择权权重
ID选择器 +100
类 属性 伪类 +10
元素 伪元素 +1
其他选择器 +0
字体
字体的fallback机制
字体族不加引号
行高
行高由line-box决定，line-box由inline-box组成，inline-box的高度决定行高
背景
灵活运用CSS可以实现很多有意思的图形
雪碧图的作用：优化页面，减少HTTP请求数
base64和性能优化：节省HTTP连接数，一般只用作少量小图标
边框
边框的属性：线性、大小、颜色
边框之间的衔接是用斜的方式，可以做成三角形
滚动
auto scroll
文字折行
overflow-wrap, word-break, white-space
装饰器属性及其他
font-weight, itatic, text-decoration, cursor
CSS HACK
只在一部分浏览器上生效的手法，叫做CSS HACK
最近几年的前端中，这一块用的越来越少了
面试真题
CSS面试真题
- CSS样式（选择器）的优先级
- 计算权重确定
- ！import
- 内联样式
- 后写的优先级高
- 雪碧图的作用
- 减少HTTP请求数，提高加载性能
- 有一些情况下可以减少图片大小
- 自定义字体的使用场景
- 宣传/品牌/banner等固定文案
- 字体图标
- base64的使用
- 用于减少HTTP请求
- 适用于小图片
- base64的体积约为原图4/3
- 伪类和伪元素的区别
- 伪类表状态
- 伪元素是真的有元素
- 前者单冒号，后者双冒号
- 如何美化checkbox
- label[for]和id
- 隐藏原生input
- :checked + label，切换样式
原型和原型链
构造函数
原型规则
原型规则是学习原型链的基础
- 所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null除外）
- 所有的引用类型（数组、对象、函数），都有一个proto属性，属性值是一个普通的对象
- 所有的函数，都有一个prototype属性，属性值也是一个普通的对象
- 所有的引用类型（数组、对象、函数），proto属性值指向它的构造函数的“prototype”的属性值
- 当视图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的proto（即它的构造函数的prototype）中寻找
[].__proto__ == Array.prototype
true
{}.__proto__ == Object.prototype
true
fn.__proto__ == Function.prototype
true
image.png
作用域和闭包
this
this要在执行时才能确认值，定义时无法确认
- 作为构造函数执行
- 作为对象属性执行
- 作为普通函数执行
- call apply bind
.bind必须是函数表达式的方式，不能是函数声明的方式
作用域
当前作用域没有定义的变量，叫做自由变量
一个自由变量，一直不断的往它的父级作用域去找，形成了一个链式结构
闭包
一个函数的作用域看在它定义时候的作用域，而不是执行时候的作用域
function F1() {
var a = 100
// 返回一个函数（函数作为返回值）
return function () {
console.log(a)
}
}
// f1 得到一个函数
var f1 = F1()
var a = 200
f1()
闭包的使用场景
- 函数作为返回值
- 函数作为参数传递
function F1() {
var a = 100
return function () {
console.log(a) // 自由变量，父作用域寻找
}
}
var f1 = F1()
function F2(fn) {
var a = 200
fn()
}
F2(f1)
真题
- 创建10个a标签，点击的时候弹出来对应的序号
var i
for (i=0; i<10; i++){
(function(i){
// 函数作用域
var a = document.createElement('a')
a.innerHTML = i + '<br>'
a.addEventListener('click', function(e){
e.preventDefault()
alert(i) // 自由变量，要去父作用域获取值
})
document.body.appendChild(a)
})(i)
}
自执行函数，就是不用调用，只要定义完成，立即执行的函数
利用了闭包，保存了状态，调用时获取函数作用域的变量，而不是再外面一层
- 如何理解作用域
- 自由变量
- 作用域链，即自由变量的查找
- 闭包的两个场景
异步和单线程
何时需要异步
- 定时任务：setTimeout, setInterval
- 网络请求：ajax请求，动态<img>加载
- 事件绑定
js是单线程语言，同时只能干一件事
其他知识
Date.now()
Math.random()
数组API
- forEach, every, some, sort, map, filter
对象API
今日感想
- 整理的还是有过于凌乱了，下次可以对重点知识点进行整理，不要面面俱到，区分笔记和总结
- 部分核心概念还是要自己多去钻研钻研
- 抓紧进度
网友评论