帅帅哥的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在指定属性值时做了一些改进,在属性值不包括“<”、">"、"="、单引号、双引号等字符时,属性值两边的引号可以省去。例如:
<input type="email">
<input type=email>
<input type=‘email'>
- 给一个div固定宽度,如何实现它的高度和宽度相等(css实现)
<div>
<div class="div">
<span>我是文字</span>
</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
cookie
- 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开发后越来难维护。