面试题系列均来自鱼皮的知识星球——编程导航

什么是 CSS 盒子模型?

CSS 盒子模型(CSS box model)指的是用于布局和设计网页的 CSS 样式规范。CSS 盒子模型将每个 HTML 元素表示为一个矩形的盒子,这个盒子包括内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。

具体来说,盒子模型中各个部分的含义如下:

  • 内容(content):元素的实际内容,由 width 和 height 属性决定。
  • 内边距(padding):内容和边框之间的空间,由 padding 属性决定。
  • 边框(border):内容和外边距之间的边框,由 border 属性决定。
  • 外边距(margin):盒子边缘和其它元素之间的空间,由 margin 属性决定。

CSS 盒子模型中,盒子的总大小由这四个部分加起来决定,即 width + padding + border + margin。需要注意的是,CSS 盒子模型有两种,分别是标准盒子模型和怪异盒子模型。

  • 标准盒子模型中,盒子的大小 = width + padding + border + margin
  • 怪异盒子模型中,盒子的大小 = width + margin,因为 width 已经包含了 padding + border

ES5 中的类和 ES6 中的 class 有什么区别?

在 ES5 中,我们通常使用构造函数来创建对象和实现继承,而在 ES6 中,引入了类(class)的概念来简化对象创建和继承的过程。下面是 ES5 中类和 ES6 中的 class 的一些区别:

  • 语法不同:ES5 中使用构造函数来定义类,而 ES6 中使用 class 关键字来定义类。
  • 继承方式不同:ES5 中使用原型链继承来实现继承,而 ES6 中使用 extends 关键字和 super 函数来实现继承。
  • 类方法的定义方式不同:ES5 中类方法定义在构造函数的原型对象上,而 ES6 中类方法定义在类的内部。
  • 类属性的定义方式不同:ES5 中类属性定义在构造函数的原型对象上,而 ES6 中类属性定义在类的内部,并且需要使用 static 关键字来定义静态属性。
  • 类的调用方式不同:ES5 中需要使用 new 关键字来创建类的实例,而 ES6 中类的调用方式更加简单,只需要像函数一样调用即可。

需要注意的是,虽然 ES6 中引入了类的概念,但在底层实现上仍然是基于原型链的。因此,理解原型链继承和类的继承是理解 JavaScript 面向对象编程的关键。

说说你对 TypeScript 的理解?与 JavaScript 的区别?

TypeScript是一种开源的编程语言,它是JavaScript的一个超集,支持静态类型、类、接口等特性,并且在编译时进行类型检查。TypeScript的设计目标是提高代码的可维护性和可读性,并且可以在大型项目中提供更好的代码组织和重用。

相比于JavaScript,TypeScript具有以下特点:

  • 支持类型:TypeScript支持静态类型,在编译时进行类型检查,能够在代码编写阶段发现类型错误,减少运行时错误。
  • 支持面向对象编程:TypeScript支持类、接口、泛型等面向对象编程特性,可以更好地组织代码和重用代码。
  • 支持ES6+特性:TypeScript支持ES6+的语法和特性,可以使用最新的语言特性来提高代码质量和可读性。
  • 更好的编辑器支持:TypeScript 提供了更好的编辑器支持,包括类型检查、代码补全、重构等功能,可以提高开发效率。
  • 更好的可维护性:TypeScript 的类型系统和面向对象特性可以提高代码的可维护性和可读性,使得代码更加易于维护和扩展。

总之,TypeScript 可以看作是 JavaScript 的一个超集,它扩展了 JavaScript 的功能,提供了更好的类型检查和面向对象编程特性,可以提高代码的可维护性和可读性。