1.HTML
1-1.html语义化:
增加代码可读性
搜索引擎更容易读懂
1-2.块级&内联
div p ul li ol h1`h6 table display:block/table
img i u a span input button
2.css布局
2-1盒子模型宽度: border+padding+width
2-2 margin 负值问题对上下左右负值的效果?
相邻的margin-top 和margin-bottom 会发生重叠
2-3 BFC应用
2-4 float布局 圣杯和双飞翼布局 :三栏布局,中间最先加载和渲染(内容第一),两侧内容固定,中间宽度自适应,一般用于pc网页
总结:使用float布局,两侧margin负值 ,以便和中间内容横向重叠,防止中间内容被两侧内容覆盖一个用padding一个用margin
2-5 手写clearfix
2-6 flex布局三点色子
3.定位position
3-1 absolute和relative 分别依据什么定位
relative :依据自身定位
absolute : 依据最近一层的定位元素定位(absolute,relative,fixed,body)
3-2 居中对齐的实现方式
水平居中:
inline元素:text-center;
block元素:margin:auto;
absolute元素:left:50% + margin-left负值;
垂直居中:
inline元素:line-height的值等于hight值
absolute元素:top:50% + margin-top负值
absolute元素:transfrom(-50% ,-50%)
absolute元素:top,left,bottom,right=0 + margin:auto;
4.line-height继承
5.响应式
5-1 rem 相对长度单位,相对于根元素,常用于响应式
rem 弊端:: "阶梯"性
px 绝对长度单位
em 相对长度单位 ,相对于父元素,不常用
5-2 css3 : media-query 根据不同的屏幕宽度设置根元素 font-size
5-3 css vw / vh
vh 网页视口高度的 1/100
vw 网页视口宽度的 1/100
vmax / vmin取最大最小
5-4 网页视口尺寸
window.screen.height 屏幕高度
window.innerHeight 网页视口高度
window.body.clientHeight body高度
js一.变量类型
1.值类型和引用类型
1-1.a=100 b=a a=200
1-2.a={age =20} b=a b.age=21
1-3 栈:从上往下排列 值类型a=10/引用类型 a=内存地址
堆:从下往上排列 内存地址={age:20}
1-4常见的值类型:undefined,string,number,boolean,Symbol
1-5常见的引用类型 :object对象, 数组,null(特殊引用类型,指向空地址),函数(特殊引用类型,不用于储存数据没有拷贝复制功能)
2.typeof 能判断那些类型
1.识别所有值类型 undefined string S
2.识别函数
3.判断是否是引用类型 object...
3.深拷贝
二.变量计算--类型转换
1.字符串拼接 100+10 =110 / 100+'10'=10010 ★ parseInt()
2.何时使用 === 和 == :除了==null外,其他一律用 ===
3.if 语句 和逻辑运算
3-1.truely :!!a === true;
falsely:!!a === false;
3-2 逻辑运算 &&与返回FALSE数据 / ||或返回true数据
一.原型
1.题目
1.如何判断一个变量是不是数组?
a instanceof Array
2.手写jq,考虑插件和扩展性
3.class的原型本质,怎么理解?
画图.jpg
2.知识点
1.class的继承 constructor 属性 方法
继承:子类 extends继承父类 子类 constructor 方法中必须有 super ,且必须出现在 this 之前。
2.类型判断instanceof 可以判断引用类型
3.原型
3-1原型(数据. __proto__)隐式原型 /(类名.prototype);
3-2 原型关系:a.每个class都有显示原型prototype
b.每个实例都有隐式原型__proto__
c.实例的__proto__指向对应class的prototype
3-3 基于原型的执行规则
a.获取属性xxx.name或执行方法xxx.sayhi()时,先在自身属性和方法寻找
找不到再去隐式原型__proto__中查找
4.原型链 hasOwnProperty()判断是不是自己的属性