1.一些常用H5:主要是为了在移动设备支持多媒体,vedio,audio,一些常用语义化标签header,nav,footer,article,section.;
css新特性:圆角border-radius;边框阴影:box-shadow;盒子模型:box-sizing;2D转换:transform:translate移动(x,y) rotate旋转(x,y),scale缩放(x,y)
2。如何让未知宽高的元素垂直水平居中
A:flex布局;display:flex;justify-content:center;align-content:center;
B:对元素进行绝对定位;top:50%;left:50%;用css3新特性的transform:translate(-50%。-50%)
3.ajax
ajax是通过异步加载数据,实现表面无刷新,提高用户体验并且提升页面性能
原理:核心依赖浏览器的XMLHttpRequest对象,进行HTTP请求和HTTP接收,在未收到XHR返回信息时,浏览器可以做其他事情,收到返回信息时渲染页面。
post请求要设置请求头的格式内容
fetch和axios的区别
axios是基于primse用于浏览器和nodejs的HTTP客户端,本质上也是对原生XHR的封装,只不过是primise的实现版本;客户端支持防止CSRF:使请求每次都拿cookie中的key,根据浏览器同源策略,假冒的网站拿不到cookie中的key,这样后端就可以轻易辨别出这个请求是否是用户在假冒网站中输入的,从而采取正确的策略。
fetch是原生js,是es6中primise对象,fetch是基于primise设计的,没有封装
4.em和rem的区别
em是相对长度单位,相对于当前对象内的文本的字体尺寸。如果对行内文本的字体没有设置,则相对于浏览器默认字体尺寸。通俗的讲1em就是font-size值,如果元素本身没有设置font-size值就找父元素的font-size值
rem:相对于HTML根元素字体大小,HTML默认字体大小是16px,
rem和em的原理
px2rem的原理:小鹏哥
5.跨域的出现和解决方式:
跨域是因为浏览器有同源策略,同源策略的定义是协议、域名、端口都要一致。
在跨域的情况下,浏览器出于安全考虑,会限制不同域之间的数据或DOM交互行为,
a:jsonp:使用script标签,src为后端某个文件,加上callback参数。返回一段字符串
缺点:只能用在get方法,不能用在post方法,可以用form来hack
b:websocket;采用ws或者是wss,非HTTP协议。协议不执行同源政策,只要服务器支持就可以通过他进行跨域通信,需要在服务器端设置白名单。
c:服务器代理:在Vue。config。js中设置proxy代理设置
d:document.domain
原理:通过设置document.domain来跨域。
缺点:只适用于主域相同,子域不同的业务场景
6.伪元素和伪类的区别
伪类是不能被普通选择器选择的文档之外的的元素。比如:hover
伪元素是创建通常不存在文档中的元素,比如::before
两者的本质区别是有没有创建不存在的元素,有的话就是伪元素
7.spa单页面的原理
单页面是不会因为用户的操作而进行跳转或者重载,主要是因为ajax实现无跳转刷新和浏览器的history机制,用hash的变化实现界面的变化;缺点是SEO优化不好,可以通过自定义状态取代传统网页网址判断。