帅帅哥曾经遇到面试相关

来源：互联网发布：天龙八部mac 编辑：程序博客网时间：2024/05/02 00:26

帅帅哥的ms

主题

什么是行内元素？什么是块级元素？

块级元素：div、table、ul、li、menu、p

行内元素：span、label、strong、input、textarea、address

块级元素可以独占一行，宽度自动填满整个父级元素的宽度，可以设置 margin和padding。

行内元素不会独占一行，相邻的元素会在一行，除非一行排不下才会换行，而且只有水平方向有用，坚向没有用，只用实现 marign-left、margin-right、padding-left、padding-right。

css的长度单位有哪些？

css的长度单位包括：相对单位和绝对单位。

相对单位：em、ex、ch、rem、vw、vh、vmax、vmin、

绝对单位：cm、mm、q、in、pt、px、pc

注）特殊值的单位可以省略。比如：margin: 0px；可以写成 marign: 0；

伪类和伪元素的区别？

伪类：一个冒号

伪元素：两个冒号

什么叫文档流？

文档中可以显示对象在页面所占的位置。

什么叫数据表现与分离？

类似于MVC结构，HTML控制结构、CSS控制表现、JS的数据联系表现和结构。对网页的数据、更新、维护有帮助。

web标准？

web标准不是指某一个标准，而是一系列标准的集合。

网页由三部分组成：结构（html）、表现（css）、　行为（JS）。

Position的相对定位和绝对定位有什么特点？

relative 定义：相对定位

相对定位的对象不可层叠，可以依据left、right、top、bottom属性在正常文档流中偏移位置。

absolute 定义：绝对定位

绝对定位就是将对象从文档流中脱离出来，可以使用 left、right、top、bottom属性进行绝对定位。些时不存在边距。但仍有补白和边框。

绝对定位不能和 float一起使用。

通常情况下我们使用 position: relative; position:absolute进行布局。

父级：position:relative

子级：position:absolute; left bottom right top

如果父级不用 position:relative。直接用 postion：abosolute定位的话，那么父级则为 <body>；使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。

css 填空题

css 的单位中，设定元素的长度或者宽度与父元素的字体大小相关的单位是 em，与html文档相关的元素是rem。

在css中使用 link的 media个关键字判断不同的屏幕使用不同的 css文件，使用css 的 @media 键字判断屏幕使用有同的css样式表。

现在有三个异步 ajax请求，一个为别写出以下两种情况下回调函数的执行代码？

a) 只要其中任意一个请求成功返回时执行。

b) 三个请求全部成功的时候执行代码。

分析：

一种是常规方法，成功一个执行一个，每个函数都加一个pan断，三个函数执行的时候都设置为 flase，执行一条成功后变为ture时，即时执行第二条一直到true时截止。

第二种是promise。

参考https://segmentfault.com/a/1190000002395343

包裹长文本

文字超过文本的长度

white-space:pre-line

word-wrap: break-word

合理的页面布局常说的结构与表现分离，表现是什么？分离是什么？

表现是HTML

分离是CSS

html5可省略标签有哪些？可省略结束标签有哪些？有省略属性标签有哪些？

省略标签有哪些？省略属性标签有哪些？

省略结束标签有哪些？

dd、dt、li、p、option、rt、rp、thread、tfoot、tr、td、th、optgroup

“不允许写结束标记”是指，不允许使用开始标记与结束标记将元素括起来的形式，只允许使用“<元素/>”的形式进行书写。

“可以省略结束标记”是指，该元素可以完全被省略，请注意，即使标记被省略了，该元素还是以隐式的方式存在的。例如将body元素省略不写时，但它在文档结构中还是存在的，可以用document.body进行访问。

不允许写结束标记的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

可以省略结束标记的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th

可以省略全部标记的元素有：html、head、body、colgroup、tbody

另外，html5在指定属性值时做了一些改进，在属性值不包括“<”、">"、"="、单引号、双引号等字符时，属性值两边的引号可以省去。例如：

给一个div固定宽度，如何实现它的高度和宽度相等（css实现）

<div>

</div>

<style>

* {margin:0;padding:0;}

.div{width:200px;background:green;vertical-align: middle;display: inline-block;position: relative;}

.div span {font-size: 14px;color:#fff;vertical-align: middle;display:inline-block;text-align: center;}

.div:before{content:'';padding-bottom:100%;display:inline-block;width:.1px;vertical-align: middle;}

</style>

什么叫做单行语句？复合语句？

// 单行语句

var box = 100;

var age = 20;

// 用花括号包含的语句集合，叫做复合语句

// 复全语句，我们一般叫做代码块

{

var height = 200;

var width = 300;

}

用户正在访问一个在线网站，技术人员修改了css样式提交。但是用户不懂技术，不知道 F5刷新，怎么样才能更新用户缓存的代码（以前都是后台处理，现在前端技术可以处理，怎么处理）

前后端分离，不用服务器进行渲染。先加载的前端页面，然后用ajax等访问后台，返回数据。不分离的话服务器会把整修页面给浏览是器。前后端分离可以用localstorage进行token存储，服务器在用户第一次访问数据的时候会生成一个字符串返回客户端，客户端进行存储。每次发送请求的时候都带这个字符串，服务端进么校验判断用户身份。

你直接给css的链接后面加一个?随机数就可以了

例如 a.css?123123

123123换成随机数，每次都能取到最新的

为什么要用 Sass？

sass 能够解决 css的一些问题，解决了问题，有变量、支持语句、复合。

vue介绍?

mvvm, 一种设计模式。vue在这里面只是vm层。传统开发模式用 JQ或者原生JS，需要手动更新 dom,在使用这种 mvvm 的双向绑定，只要关心视图层，不用关心 dom层。

Webpack

整个项目的依赖关系是复杂的，各种关系需要手动维护，webpack可以打包，编译主要通过lodash来处理。

存储（localStorage，cookie，localSession）

localStorage

localSession

web交互的几种方式？

1、利用cookie对象

2、利用session对象

3、利用request重定向，设置setAttribute

4、利用Ajax进行异步数据请求（得到的数据可以以json或xml格式返回，便于处理）

参考：http://blog.csdn.net/luckyrass/article/details/38758007

Script引入跨域了，可以直接用 //***.com/***.js么？

http协议不同，导致跨域了，script路径上写的是http，结果引入失败，因为开发使用的http，线上是https

面试遇到的问题
css部分：
1､html中的DTD是什么意思？
2､HTML和XMHTML最不同的特性是什么？
3､meta的标签有哪些？
4､页面垂直居中有几种方法？
5､css3和html5的新特性有哪些？
6､div、span、p有什么区别？如何让span变成和div一样？
7､左右固定200px，右边自适应有什么方法？
8､h5的存储和cookie有什么区别？
9､清除浮动？
10､隐藏元素的几种方法？
11､sass和css有什么不同？
12､如果用float，页面还是浮动，怎么处理？
13､如何提高网站的加载速度？

js部分：
js的原型链和作用域是什么？
js的call和apply有什么区别？
js字符串转为数字？
一个数组中如何删除重复的内容？
事件冒泡和停止冒泡？
事件委托？
闭包是什么，写出一个案例？
promise创造一个函数？
es6和es5有哪些不同？

ajax部分：
ajax中get和post有什么区别？
异步请求和同步请求的区别是什么？
跨域请求怎么操作？
json和jsonp的区别？jsonp是什么原理？
前后台交互的方法有哪些？
ajax中可以识别几种语言？

vue部分：
1､vue的生命周期？
2､vue的组件化，如何子组件和子组件相联？
3､vue的容器是什么（不是指组件容器）？
4､vue介绍?
mvvm, 一种设计模式。vue在这里面只是vm层。传统开发模式用 JQ或者原生JS，需要手动更新 dom,在使用这种 mvvm 的双向绑定，只要关心视图层，不用关心 dom 层。
5､什么叫前后端分离？
前后端分离，不用服务器进行渲染。不分离的话服务器会把整修页面给浏览是器。前后端分离可以用localstorage进行token存储，服务器在用户第一次访问数据的时候会生成一个字符串返回客户端，客户端进行存储。每次发送请求的时候都带这个字符串，服务端进么校验判断用户身份。

打包工具：
1､Webpack是什么？
整个项目的依赖关系是复杂的，各种关系需要手动维护，webpack可以打包，编译主要通过lodash来处理。

笔试部分：
1､用纯css写出一个 ul 里如果只有一个li时则该 li 的宽度应该为 100%，如果有 2 个或2个以上的li则li的宽度均为 50%。
方法一：
<style>
ul li {
display: block;
width: 50%;
height: 20px;
border: 1px solid #000;
}
ul li:only-child {
width: 100%;
}
</style>
方法二：
<style>
ul{
width: 400px;
}
ul>li:only-chlid {
width: 100%;
}
ul>li {
width: 50%;
float:left;
display: block;
background: pink;
}
ul>li:after {
content: '';
display: block;
padding-top: 75%;
}
</style>

2､有一个ul内有两个li元素宽度为50%，且有左浮动属性，如何在不使用js的情况下实现ul在任意宽度下 li的宽度比例都保持为4:3?
方法一：padding-bottom: 37.5%
方法二：vm
方法三：rem（还是需要要到 js）

3､如何在页面中定义一个 “中心有一个宽高为500px*500px 镂空的” 半透明蒙层（类似于扫一扫的镂空）。

4､页面中一个宽高均为 200px 的div绝对定位，请给出鼠标在此元素上按下时拖动、鼠标抬起时停止拖动的相关思路。

5､请写出当鼠标在某一个“启动图标”上长按时使桌面所有图标均产生摇晃效果（类似ios系统长按图标时的效果）的实现方式。

6､给出在页面中自定义右键菜单的步骤。

7､页面中有一组复选按钮，比如 10个，有一个全选按钮，请以角发事件方式控制选中状态，实现他们中的选中关系？（当 10个按钮都选中时，“全选按钮”这选，当手动将“全选按钮”取消选中时 10 个复选框全部取消选中，如果所有复选框均为选中状态时取消其中任意一个，则“全选按钮”取消选中）

8､自动搜索。在一个input输入框中实现输入过程中调用ajax传入input的值返回搜索结果过行渲染（条件：只有在输入停顿时才调用ajax进行自动搜索）。

9､如何在一个大于10条的数据流中随机抽出 10条数据。

10､在一个容器内包含有1个数字显示框（默认为 0)和多个按钮（每个按钮内显示随机数字文本），当按钮点击数字显示框内的数字则加上对就按钮的值；请以面向对象的思想设计需求中的类与实例）。

11､请为数组拓展一个 max 方法，该方法返回数组中的最大值。

12､请写出一个能够实现异步请求的链式调用方法。

13､写一个函数用于实现 js对象深拷贝。

14､用js实现一个闭包程序，并写出测试代码。

15､随机生成10000个不重复的8位数字并找出后四位AAAA AABB ABAB 并且后四位不能有4

16､form中input 可以设置为 readonly和 disable,两者有何区别？

17､js如何选中一个checkbox,怎样设置他无效。

18､js的同源策略是什么意思？

19､http常用的状态码有哪些？

20､怎么样拦截事件冒泡？

21､清除浮动的方法有哪些？

22､jq的绑定事件？

23､性能优化方式？

如何解决跨域的问题？
documentdomain+iframe()只有在主域相同的时候才能使用
动态创建script
location.hash+iframe
window.name+iframe
cors
jsonp
websockets

回调函数
function dosomething(damsg,callback)){
alert(damsg);
if(typeof callback == "function")
callback();
}
dosomething("回调函数",function(){
alert("和jq的callbacks形式一样")
})

arguments打包共有函数

个人理解：
1､在移动端开发上，zepto可以完全代替jq,而且文件更小。
2､hybrid业务，微信完全可以使用 weex,rn、h5开发来代替jq。
3､在pc上，如果是spa业务，可以用 ng、vue、react框架，而且jq是以 dom为理念进行逻辑处理，会导致spa开发后越来难维护。

阅读全文

0 0