HTML相关
1.HTML元素属性href和src的区别
- href: link, a 1.超链接 2.建立通道 3.点击元素可以连接到目标资源
- src: img, style, script, iframe 1.下载目标资源 2.替换当前元素 3.嵌入文档中
CSS相关
1.calc()应用场景
1.水平垂直居中 (支持不同单位混合计算)
img {
height: 250px;
width: 300px;
padding-top: calc(50vh - height/2);
padding-left: calc(50vw - width/2);
}
- 响应式开发布局，两列，三列布局
- 渐变色
2.CSS 过渡与动画的区别
- trasition: 1.只有初始和结束两种状态 2.不能持续循环 3.易于结合js 4.需要:hover等方法触发 5.子属性少，动画简单
- animation：
1.可以设置多个状态
2.可以添加infinite属性遍历循环，偏向纯css
4.js结合不友好
3.不需要触发，自动运行
5.子属性多，动画复杂
3.CSS等高布局
- table布局，内部元素设置display:table-cell。但是限制较多
- flexbox布局，display:flex，配套组建较多
- grid布局，display:grid; grid-auto-flow:column
- 较短的一列用padding-bottom:99999px撑开父元素，再用margin-bottom:-99999px拉回父元素，最后用overflow:hidden剪掉多余的地方。兼容性好
4.CSS Flexbox适用场景
1.水平垂直居中
<div>
<img>
</div>
div {
display: flex;
justify-center: center; //主轴居中
align-item: center; //垂轴居中
flex-direction: column; //设置主轴
}
2.flex布局子元素可以用margin-left/right:auto来代替float
3.flex两栏布局
div.domain {
display:flex; //父元素设置flex
flex-wrap:wrap;宽度不足变为垂直方向两栏布局
}
div.main nav {
flex: 0 0 300px; //放大 缩减 宽度
}
div.main div.content {
flex: 1 0 0; //自动填满剩下的空间
}
4.圣杯布局
div.main {
flex: 1;
}
div.left, div.right {
flex: 0 0 50px;
}
div.left {
order: -1;
}
5.CSS 不使用border创建边框
box-shadow: x轴偏移，y轴偏移，模糊度，扩散，颜色
box-shadow: 0 0 0 5px #fcf876
box-shadow: inset可以用于设置内边框
6.常用的隐藏方法
- display: none
- visibility: hidden
- opacity: 0
7.CSS BFC
BFC不影响全局的布局，起到隔离保护作用
position:absolute或者fixed
float:不是none
overflow:不是visible
display:inline-block或者flex
8.[CSS伪类和伪元素的区别]
9.用CSS画三角形/原型
- 三角形：用border，把其他三个设为transparent
- 圆形：border-radius
10.CSS如何让超宽文本替换为省略号
单行省略分为四步：
1.设置宽度：witdh:80;
2.强制一行显示：white-space:nowrap;
3.隐藏溢出内容：overflow：hidden；
4.溢出进行省略：text-overflow:ellipsis;
11. 如何水平居中元素
普通流block：
- text-align:center；
- margin:0 auto;
浮动元素：
width: 200px;
position: relative
left: 50%;
transform: translateX(-50%);
//margin-left: -100px;
绝对定位：
- margin: 0 auto
- left + transform
12.CSS清除浮动的多种方法
对元素进行浮动以后脱离了文档流，如果父元素没有高度，或者高度自适应就会造成浮动塌陷。
- 在最底部新建一个block元素，并且设置clear:both来撑开父元素
- 创建BFC：父级设置overflow：auto/hidden或者设置父级一起浮动
- 伪元素:after设置为block元素，并且clear:both来清除浮动(最优解)
13.CSS外边距塌陷
1.只会发生在块级元素的垂直方向
- 外边距计算，两正取最大，两负取最小，一正一负取和
14.如何处理图片间的空隙
1.去除img元素间的空格 2.font-size:0 3.letter-spacing:-100px;
15.rem\em区别
rem是root em根据根元素的字体大小的相对大小元素
em是根据自己的font-size大小，如果自己没有font-size就向上找父级元素的font-size
JS相关
1.Javascript原型链
function Supermarket(){};
Supermarket.product = "口罩"；
function Shop(){};
Shop.prototype = new Supermarket();
// person.__proto__ === Shop.prototype;
var person = new Shop();
console.log(person.product);
2.Javascript原型对象
- 基本类型：string, number, boolean, object, null, undifined
- 引用类型：String, Number, Boolean, Object, Function, Array, Date, Error, RegExp
3.闭包
for (var i = 0; i < 5; i++) {
(function(x){
setTimeout(function(){
console.log(x++);
}, 4000);
})(i);
}
//每次立即执行函数在传输完x的之后销毁执行上下文，后续任务队列里将用x进行计算
4.this关键字
- 默认绑定：全局调用/没有指定调用者则默认为window
- 隐式绑定：自动绑定调用自己的Object
- 硬绑定：call/apply，指定this对象
- 构造函数绑定：创造出的实例化对象指向构造函数对象
- use district不会默认指向window，会指向unde fined
5.Javascript加法运算
88 + NaN = NaN
Infinity + -Infinity = NaN
Infinity + Infinity = Infinity
+0 + +0 = +0
-0 + -0 = -0
+0 + -0 = +0
"10" + 10.10 = 1010.1
"1" + 2 + 3 + 4 = "1234"
1 + 2 + 3 + "4" = "64" //从左到右计算
1 + (2 + "3") + 4 = "1234"//括号内优先运算
"1" + [] = "1"
"1" + ["123"] = "1123"
"1" + [2,3,4] = "12,3,4"
"1" + function uu(){} = "1function uu(){}"
"1" + {} = "1[object Object]"//Object会自动转化为[object Object]
6.函数/变量作用域(链)
- 全局
- 局部
- 块级作用域
7.document.write()和element.innerHTML区别
8.运算符typeof和instanceof区别
- typeof 检测数据类型并输出类型名字
- instanceof 检测对象之间的关联性，左边必须是实例化对象
9.Javascript对调两个变量的数值
- 设置临时变量
- 加减法
a += b;
b = a - b;
a -= b;
- 异或运算
10. == 和 === 区别
- ==相等运算符，会进行隐式类型转化，先转化为数值再转化为字符串
- ===全等运算符
'' == 0 // true
' ' == 0 // true
null == undefined // true
null == 0 // false
undefined == ' ' // false
'false' == false // false,false会转为'0'
NaN == NaN // false, NaN不等于任何值
var a = {}
var b = {}
var c = a
a == b // false, a 和 b 实际存的是栈指针
a === b // false
a == c // true
a === c // true
11. 小数精度问题
0.1 + 0.2 = ？(0.300000000000004)
JS采用64位双精度：符号位(1),指数位(11),有效位置(52)
可以用parseFloat((0.1 + 0.2).toFixed(1))先截取为一位小数的字符串，再用parseFloat转化为小数
12. map()和parseInt()
['1','2','3'].map(parseInt)会返回什么？
- map用来处理数组，默认传入三个值(element, index, array)
- parseInt(数值，几进制) 答案: 会返回[1, NaN, NaN]
13.var/let/const区别
- var可以重复定义和修改值
- let不能重复定义，但是可以修改值，没有变量提升
- const不能重复定义，也不能修改值
- 在打括号里使用let/const可以形成块级作用域，不随着全局变量改变而改变
14.箭头函数和普通函数区别
- 普通函数进入消息队列以后会由全局来调用回调函数
- 回调函数会绑定到最近一层的普通函数的this
15.原生js实现call，apply，bind
- call, person.call(egg)相当于在egg中加入了call然后egg再调用person()发生隐式绑定
- 判定obj是否为空对象，如果是就默认绑定window
- 在egg中暂时加入person方法
- 用字符串拼接剩余arguement
- 调用egg中的person()方法
function person(){
console.log(this.name);
}
var egg = {
name : 'hahaha'
}
Function.prototype.newCall = function (obj) {
//当前function的this指向person
obj = obj | window;
obj.person = this;
var newArguments = [];;
for (var i = 1; i < arguments.length; i++) {
newArguments.push('arguments['+i+']');
}
var result = eval('obj.person('+newArguments+')');
delete obj.person;
return result;
}
person.newCall(egg,'argue1','argue2','argue3');
- apply接受两个参数，第一个是要绑定的对象，第二个是array of arguement,只要判断一下有没有arguement并改一下for循环就行
- bind会返回一个函数
Function.prototype.bind = function(context) {
var _fn = this;
var _args = Array.prototype.slice.call(arguments, 1);
// 新的实例是拷贝了_fn的原型属性的实例
var newFn = Object.create(_fn.prototype);
function Fn () {
Array.prototype.push.apply(_args, arguments);
_fn.apply(this instanceof newFn.constructor ? this : context || window, _args);
}
// 将Fn的原型指向了新的实例
Fn.prototype = newFn;
return Fn;
}
