前端基础面试题

前端基础面试题

块级元素和行内元素的区别

• 行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。
• 行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行
• 行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高
• 块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级

把块级元素转换成行内块遇到的问题

• 有一个间隙，解决方法：消除回车换行,让代码在一行显示
• 一个块内有内容一个块没内容,有内容的块会下坠,有内容的块的文字内容会和没内容的块基线对齐,加一个vertical-align:top,下坠的块就上去了

盒子模型

padding 【内边距】、margin 【外边距】、border 【边框】
1、外盒尺寸计算（元素空间尺寸）
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin

2、 内盒尺寸计算（元素实际大小）
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

JavaScript的数据类型

栈：原始数据类型（Undefined，Null，Boolean，Number、String
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
基本类型变量的复制：从一个变量向另一个复制时，会在栈中创建一个新值，然后把值复制到为新变量分配的位置上。

堆：引用数据类型（对象、数组和函数）
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
引用类型变量的复制：复制的是存储在栈中的指针，将指针复制到栈中为新变量分配的空间中，而这个指针副本和原指针指向存储在堆中的同一个对象，复制操作结束后，两个变量实际上将引用同一个对象，因此改变其中一个，将影响另一个。

变量提升

变量提升是指在声明一个变量之前就使用了变量，在全局作用域中，只有使用var关键字声明的变量才会变量提升，变量提升的时候浏览器只知道有这么一个变量，但你下面定义的值还没有赋值给这个变量，这时候变量的值是undefined的，等到浏览器执行到下面的代码的时候才是一个赋值的过程。所以变量提升的时候没有初始化值。

css3动画

transition、animation和transform

• transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

• animation可以定义任意多的关键帧，因而能实现更复杂的动画效果。在介绍animation具体使用之前，要先介绍keyframe。
  @keyframes 让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。
  要使用关键帧, 先创建一个带名称的@keyframes规则，以便后续使用 animation-name这个属性来调用指定的@keyframes. 每个@keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。
  关键帧的编写顺序没有要求，最后只会根据百分比按由小到大的顺序触发。

• transform就是变形，主要包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。