超级基础的面试题总结

一、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进入微任务，里面第一个计时器进入宏任务