20-11-面试真题1

css

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？css3新增伪类？

CSS 选择符有哪些？

• id选择器（#id）
• 类选择器（.class）
• 标签选择器（div，h1，p）
• 相邻选择器（h1 + p）
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（ * ）
• 属性选择器（a[title]）
• 伪类选择器（a:hover，li:nth-child）

a:hover 当鼠标bai选定在a标签上时a标签的样式du变化
li:nth-child（3） 表示 li 标签的父元素 ul 中的第三个孩子标签。

• :nth-child(n+4)选取大于等于4标签
• :nth-child(-n+4)选取小于等于4标签
• :nth-child(2n)选取偶数标签
• :nth-child(2n-1)选取奇数标签
• :last-child选取最后一个标签 .demo01 li:last-child{background:#090}

可继承的样式

1. 字体系列属性font，font-family，font-weight，font-size，font-style，font-variant，font-stretch，font-size-adjust
2. 文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color
3. 元素可见性 visibility
4. 表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout
5. 列表布局属性 list-style-type，list-style-image，list-style-position，list-style
6. 生成内容属性 quotes
7. 光标属性 cursor
8. 页面样式属性 page，page-break-inside，windows，orphans
9. 声音样式属性 speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation

优先级算法如何计算？

1. 优先级就近原则，同权重情况下样式定义最近者为准；
2. 载入样式以最后载入的定位为准；
3. !important > id > class > tag；
4. important 比 内联优先级高，但内联比id要高；

css3新增伪类

:first-of-type
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

:last-of-type
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

:only-of-type
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

:only-child
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

:nth-child(n)
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:nth-last-child(n)
p:nth-last-child(2) 同上，从最后一个子元素开始计数。

:nth-of-type(n)
p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

:nth-last-of-type(n)
p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。

:last-child
p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。

:root
:root 选择文档的根元素。

:empty
p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。

:target
#news:target 选择当前活动的 #news 元素。

:enabled
input:enabled 选择每个启用的 <input> 元素。

:disabled
input:disabled 选择每个禁用的 <input> 元素

:checked
input:checked 选择每个被选中的 <input> 元素。

:not(selector)
:not(p) 选择非 <p> 元素的每个元素。

::selection
::selection 选择被用户选取的元素部分。

引入样式link和@import的区别

1. link是HTML标签，@import是css提供的
2. link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完后再加载
3. link没有兼容性问题，@import不兼容ie5以下
4. link可以通过js操作DOM动态引入样式表改变样式，而@import不可以

解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

分两类盒子模型

• W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含 填充（padding）和边框（border）
• IE盒子模型——属性高（height）和属性宽（width）这两个值包含 填充（padding）和边框（border）

box-sizing:content-box
当我们设置box-sizing:content-box;时，浏览器对盒模型的解释遵从我们之前认识到的W3C标准，当它定义width和height时，它的宽度不包括border和padding。

box-sizing:border-box
当我们设置box-sizing:border-box;时，浏览器对盒模型的解释与IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。

js

五种简单数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）。

一种复杂数据类型：obeject

三大引用类型：Object类型、Array类型、Function类型

代码

setTimeout异步循环

for (var n = 0; n < 10; n++) {
	setTimeout(function(){
		console.log(n);
	},5000)
}		//结果五秒后打印十个10

这道题涉及了异步、作用域、闭包。
setTimeout是异步执行，每一次for循环中setTimeout都执行一次，但里面的函数没有执行，而是放到了任务队列中，等五秒后执行。for循环瞬间执行完毕，当主线程执行完成后，才进入任务队列里面执行，i变成了10，打印十个10。

当解决变量作用域。
for循环头部的let不仅将i绑定到for循环快中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。

for (let n = 0; n < 10; n++) {
	setTimeout(function(){
		console.log(n);
	},5000)
}	//结果五秒后打印0——9

setTimeout里面的function()属于一个新的域，通过 var 定义的变量是无法传入到这个函数执行域中的。通过使用 let 来声明块变量，这时候变量就能作用于这个块所以 function就能使用 i 这个变量了。

for循环结束判断依据

for(i=0,j=0; i<10,j<6; i++,j++){
    k = i + j;
}
alert(k);       //弹出10

for(i=0,j=0; i<6,j<10; i++,j++){
    k = i + j;
}
alert(k);       //弹出18

循环继续的判断依据以分号前的最后一项为准，即判断j<6（j<10）符不符合条件

匿名自定义函数，立即调用函数

var fee = "hello";
(function(){
	var bar="world"
	alert(fee+bar)	//hello world
})();
alert(fee+bar);	//报错

此函数是一个匿名自执行函数，会先调用并执行一次，即alert (foo+bar)的字符串拼接；

var bar=”World”是函数内部声明的局部变量，外部无法调用，所以外部的alert(foo+bar)会报错。

函数和函数返回调用

	function fn(n){
		let i = n;
		return function (m){
			console.log(m+(++i));
		}
	}
	const f = fn(10)
	f(10)	//21
	f(15)	//27
	fn(15)(10)	//26
	fn(15)(15)	//31
	f(30);	//43

二进制浮点数

console.log(0.1+0.2 ==0.3);	//false
console.log(0.2+0.3==0.5);	//ture

二进制浮点数表示小数有限制，转成十进制就会有问题。