前端基础面试题

未写完 待续…

1.什么是盒子模型？

一个元素在页面中所占的大小，主要包含：width，height，content，margin，padding以及border。

2.页面元素有 行级元素，块级元素 和 行内的块，请简单谈一谈它们之间的区别

行级元素：元素在一行内显示，不支持宽高，不能嵌套块级元素
块级元素：元素独占一行，支持所有样式
并没有行内的块元素，行内的块只是一个css样式display：inline-block 设置而成的。

3.css的引用方式

link：外链
style：内嵌
HTML节点：内联
@import：导入（可以引用其他资源，但除css之外，其他引用资源均不会执行）

4.哪些样式可以使行内元素变成块

display：block
display：inline-block
float：left / right
position：absolute / fixed
display：table

5.块元素转行级元素

display：inline

6.http与https的区别

http：超文本传输协议
https：ssl 加密的超文本传输协议

7.页面由哪几个部分组成，它们之间有什么练习

html：结构
css：表现
js：行为

8.以下代码a的打印结果是什么，请简述原因

<script type='text/javascript'>
	window.onload = function(){
		var a = 10;
	}
	
	alert(a);

	/*
		alert(a)处报 a is not defined
		原因：虽然window.onload中定义了a变量，
		但是此时a的作用域与外面alert(a)的作用域不是同一个
		alert(a)处识别不到window.onload中定义的变量，所以报错

		作用域：<script>和代码块都是域
		<script>是全局作用域，但前提是得从上往下声明
		代码块表示局部作用域，内部变量外部无法获取
	*/
<script>

9.以下代码执行结果是什么，请简述原因

<script type='text/javascript'>
	var a = 10;
	function show(){
		alert(a);
		var a = 20;
	}
	show();

	/*
		执行结果为：弹出undifined
		原因：
			调用方法时，会执行alert()语句，方法体中有局部变量，所以会访问局部变量
			但是因为布局变量定义的位置在弹出语句的后面，
			而方法体中的变量又会预编译成undefined
			所以弹出undefined

		注意：js会把每个作用域的var声明的变量都预解析一遍，
			 每个作用域都有自己的预解析
	*/
<script>

10.js报错分为那几种？

编译型错误：发生错误之前的代码会执行，一直到错误代码后挂掉
语法错误：程序直接挂，例如：分号，逗号，括号等

11.给元素添加背景色有哪些方法

1. 颜色单词设置法：
   background:red

2. 十六进制设置法： 两两为一体，分别是 红色、绿色、蓝色 取值为 0-F
   background:#FF0000

3. rgb设置法：r(红色)、g(绿色)、b(蓝色) 取值为 0-255
   background:rgb(255,0,0)
   background:rgba(255,0,0,0.5)

4. 色调饱和度设置法：色调(0-360)、饱和度(0%-100%)、亮度(0%-100%)
   background:hsl(167,88%,90)
   background:hsla(167,88%,90,0.9)

12.如何让一个块级标签在屏幕中水平并垂直居中

div{
	width:20em;
	height:20em;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;	
}

13.编写js 解决 在谷歌浏览器下 元素 沿X轴旋转360° 的bug

谷歌浏览器比较懒，他认为一个元素在沿X轴旋转0°和旋转360°并没有什么区别，所以他就不转了
这个bug我们可以用js解决

css写法：

transform：rotateX(360deg);
/* 由于是旋转360°，此时会因为谷歌浏览器的懒，并不会有旋转的效果出现 */

js写法

window.onload = function(){
	var oDiv = document.getElementById("oDiv");
	var deg = 0;
	setInterval(function(){
		deg++;
		oDiv .style.transform = 'rotateX('+deg+'deg)'
	},10);
}
//沿 Y 轴 直接改成 rotateY 即可       
//erspective：景深