一次前端笔试题

1. 行内元素、块级元素、空元素
2. 行内元素水平居中、行内元素垂直居中、块级元素水平居中、块级元素垂直居中（写出两种方法）
3. 浮动元素居中
4. CSS可继承属性
5. px和em的区别
6. Sass了解到什么程度？
7. CSS选择器有哪些？优先级怎么算？
8. CSS3新增伪类有哪些？
9. cookie、sessionstorage、localstorage的区别？
10. DOM树上添加HTML元素
11. 简单代码演示点击按钮隐藏图片？
12. 使用JQuery为元素添加css类？
13. JQuery的each函数是什么？你怎么使用它？
14. v-model是什么？怎么使用它？
15. 说出4中vue指令和它们的使用？
16. 对vue生命周期的理解？
17. vue-router怎么定义动态路由？怎么获取参数？
18. axios是什么？了解多少？
19. 你对webpack工具了解多少？

---

回答自己有疑问的题目

• px和em的区别
  px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；
  em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值

• CSS可继承属性
  参考这篇文章

• Sass了解到什么程度？
  自己了解多少就写多少，当时我是不怎么了解，没用过，只知道是css的预处理语言，而且属性，选择器 ，可以嵌套使用。

• cookie、sessionstorage、localstorage的区别
  相同点: 都存储在客户端
  不同点：
  1.存储大小
  cookie数据大小不能超过4k。
  sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

  2.有效时间
  localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭.
  3. 数据与服务器之间的交互方式
  cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
  sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

• JQuery的each函数是什么？你怎么使用它？

each(callback) 以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。

//迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
//HTML代码
<img/><img/>
//JQuery代码
$("img").each(function(i){
	this.src = "test"+i+".jpg";
});

• CSS3新增伪类有哪些？

p:first-of-type		//选择父元素的子元素中的第一个p元素
p:last-of-type		//选择父元素的子元素中的最后一个p元素
p:only-of-type		//选择父元素的子元素中的唯一一个p元素，不唯一不选择
p:only-child		//选择父元素的唯一子元素且该元素是p元素
p:nth-child(n）	//选择父元素的第n个子元素且是p元素
:enabled			//选择已启用的表单元素
:disable			//选择已禁用的表单元素
:checked			//选择被选中的单选框或复选框元素