超级基础的面试题总结
一、css基础知识
如何显示背景图片(/images/paper.gif,长40px,宽60px)的元素圆角的样式,
长:150px,宽:200px?
<div id="rcorners1">圆角</div>
// 下面代码的问号部分应该填入什么:
#rcorners1{
???: 5px;
//border-radius:5px ;
background: ???(/images/paper.gif);
//background-image: url(/images/paper.gif);
background-position: left top;
background-repeat: ???;
//background-repeat: no-repeat;
width: 200px;
height: 150px;
}
二、弹性盒子
请写出将3个子元素在长400px,高200px的容器中横向等分的样式
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>
下面代码的问号部分应该填入什么:
.flex-container {
display: ???; // display:flex;
width: 400px;
height: 200px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
margin: 10px;
flex: 1;
}
flex:1; 即就是代表均匀分配元素;
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间
flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长
flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小
flex-basis : 0; // 这意味着div没有这样的起始值,并且将根据可用的屏幕大小占用屏幕。例如: - 如果包装器中有3个div,则每个div将占用33%。
三、box-sizing
box-sizing的属性值为content-box和border-box时,div的宽度分别为:
div {
width: 200px;
border: 25px;
padding: 25px;
box-sizing: [content-box|border-box];
//B 内容盒子向外挤压,IE盒子向内挤压
}
300px/300px B. 300px/200px C. 200px/200px D. 200px/300px
四、margin
上下相邻的两个div,上div的margin bottom为20px,下div的margin top为10px,请问默认情况下,上div下边框到下div上边框的距离为多少?
盒子的大小由内容,内边距和边框决定,外边距只是用来吧周围的东西挤开并不算在盒子的大小里面。也就是说外边距只与自身有关,并不影响其他盒子的距离计算。
换句话说就是上下两个div设置margin,最终的距离由大的决定
五、隐式数据类型转换
//下面js代码执行后终端输出内容是什么?
var str = "abc";
str += 1; //'abc1'
//有个原则,只要有一边是字符串,那这个+就是字符串拼接符,其余的所有的情况都是算数运算符。
var test = typeof(str); //string
if (test.length == 6) {
var sign = "typeof返回结果可能为String";
}
console.log(sign); //typeof返回结果可能为String
六 、数组
var a = [];
a.push(1, 2); //[1,2]
console.log(a);
a.shift(3, 4); //往数组头部删除,返回值是删除的元素(a.shift()===1)
console.log(a); //[2]
a.concat([5, 6]);
console.log(a); //a.concat([5, 6])===[2,5,6]的返回值是concat的元素
a.splice(0, 1, 2); //参数:起始位置,0(要删除的项数),要插入的项 没有返回值
console.log(a); //[2]
七、函数和变量提升机制
function fn(a){
console.log(a); //函数一等公民,函数提升,打印是 a函数
var a = 123; // a声明提升
console.log(a); //123
function a(){}
console.log(a); //123
console.log(b); //undefined
var b = function(){}} //var 声明变量提升,var b
fn(2);
八、正则匹配,第二个参数是带$符的
'a.b.c.d'.replace(/(.)\.(.)\.(.)\.(.)/, '$3.$2.$1.$0'); //D
A. dcba B. d.c.b.a C. .... D. c.b.a.$0
// . 表示匹配单个字符
// ( ) 小括号表示匹配括号中全部字符
// \d 表示数字 \D 非数字
// \ 转义字符 如上基本符号匹配都需要转义字符 如 \* 表示匹配*号
// + 表示匹配 一次到多次 (至少有一次)
// * 表示匹配 零次到多次
const str = 'abcc 1212';
const reg = /([a-c]+)(\s*)(\d+)/g;
console.log(str.replace(reg, '$3$2$1')); // 1212 abcc
NO.3 第一个参数是正则,第二个参数是带$符的字符串
var str3 = '这是一段原始文本,"3c这要替换4d"!';
var newStr = str3.replace( /([0-9])([a-z])/g,"$1" );
console.log( newStr ); //
输出: 这是一段原始文本,"3这要替换4"!';
上面的例子,$1表示regexp中的第一个子表示即([0-9])匹配单个数字,
同理若是$2则表示第二个子表示即([a-z]);
所以,'3c'这个匹配到的整体被第一个子表示说表示的'3'替换,
'4d'被第一个子表示匹配的数字'4'所替换。其他几个同理可得:
(/([0-9])([a-z])/g,”$2″)—>
输出: 这是一段原始文本,”c这要替换d”!';
(3c和4d被相应的第二个子表示匹配出来的c和d替换)
(/([0-9])([a-z])/g,”$'”)—>
输出: 这是一段原始文本,”这要替换d”!这要替换”!”!';
//(3c被3c右侧文本替换,4d右侧是”!替换,所以出现俩次)
九、三元运算
//使用三目运算符简化以下代码(function括弧内代码缩减成一行):
function getPayCode (payType) {
let payCode = null
if (payType === '支付宝') {
payCode = 1
} else if (payType === '微信') {
payCode = 2
}
return payCode
}
//let getPayCode =payType === '支付宝'?1:payType === '微信'?2:''
十、事件循环
console.log("start"); //1
setTimeout(() => {
console.log("children2") //3
Promise.resolve().then(() =>{
console.log("children3") //4
})
}, 0)
new Promise(function(resolve, reject){
console.log("children4") //2
setTimeout(function(){
console.log("children5") //5
resolve("children6")
}, 0)
}).then(res =>{ // flag
console.log("children7") //6
setTimeout(() =>{
console.log(res) //7
}, 0)
})
解析:从上往下,第一个计时器进入宏任务 ,第一个promise进入微任务,里面第一个计时器进入宏任务