面试官上来就问了一些比较简单的问题(除了自我介绍和项目经历)
1、块级元素和行内元素分别有哪些?
很简单,但是不容易答好,就跟问API一样,不过既然问了,还是要记一下:用分类法记住好
块级元素
行内元素
2、块级元素和行内元素的区别?
- (1)行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行,水平方向排列。
块级元素各占据一行(默认宽度是他本身父容器的100%,与内容无关),垂直方向排列。块级元素从新行开始,结束接着一个断行。 - (2)块级元素内可以包含行内元素,行内元素不能包含块级元素,只能包含文本或其他行内元素。
- (3)块级元素和行内元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。
3、块级元素、行内元素的转换?
- display:block;转换为块级
- display:inline;转换为行内
4、行内元素如何设置宽高?
- (1)display:block;
- (2)display:inline-block;
- (3)float:left;隐形的将行内元素进行了转化,相当于display:block;float:left;
5、js中如何判断数据的类型?
(1)typeof
缺陷:
1.不能判断变量具体的数据类型比如数组、正则、日期、对象,因为都会返回object,不过可以判断function,如果检测对象是正则表达式的时候,在Safari和Chrome中使用typeof的时候会错误的返回"function",其他的浏览器返回的是object.
2.判断null的时候返回的是一个object,这是js的一个缺陷,判断NaN的时候返回是number
**(2)instanceof **
可以用来检测这个变量是否为某种类型,返回的是布尔值,并且可以判断这个变量是否为某个函数的实例,它检测的是对象的原型
let num = 1
num instanceof Number // false
num = new Number(1)
num instanceof Number // true
明明都是num,而且都是1,只是因为第一个不是对象,是基本类型,所以直接返回false,而第二个是封装成对象,所以true。
这里要严格注意这个问题,有些说法是检测目标的__proto__与构造函数的prototype相同即返回true,这是不严谨的,检测的一定要是对象才行,如:
let num = 1
num.__proto__ === Number.prototype // true
num instanceof Number // false
num = new Number(1)
num.__proto__ === Number.prototype // true
num instanceof Number // true
num.__proto__ === (new Number(1)).__proto__ // true
instanceof只能通过true或者false来判断,不能直接看出来是什么类型
此外,instanceof还有另外一个缺点:如果一个页面上有多个框架,即有多个全局环境,那么我在a框架里定义一个Array,然后在b框架里去用instanceof去判断,那么该array的原型链上不可能找到b框架里的array,则会判断该array不是一个array。
(3)constructor
constructor是prototype对象上的属性,指向构造函数。根据实例对象寻找属性的顺序,若实例对象上没有实例属性或方法时,就去原型链上寻找,因此,实例对象也是能使用constructor属性的。
如果输出一个类型的实例的constructor,就如下所示:
console.log(new Number(123).constructor)
//ƒ Number() { [native code] }
可以看到它指向了Number的构造函数,因此,可以使用num.constructor==Number来判断一个变量是不是Number类型的。
(4)使用Object.prototype.toString.call(value) 方法去调用对象,得到对象的构造函数名。可以解决instanceof的跨框架问题,缺点是对用户自定义的类型,它只会返回[object Object]
6、盒子模型
参考立下flag)每日10道前端面试题-18 关于【盒模型】十问
7、如何实现三列布局?
三列布局,一般指两端固定宽度,中间宽度自适应的布局方式。
参考字节跳动:圣杯布局,有几种办法
当然,这个可以谈到grip,table
8、CSS实现三角形。(敲代码)不用多说
将一个div的宽度和高度设置为0,然后设置边框样式
.triangl