前端自我总结面试题

---

排名不分先后
1.你了解哪些h5c3新增的一些属性?

针对h5的新增,大家可以看下我的这篇文章
https://blog.csdn.net/weixin_43072453/article/details/82846150

audio video 视频和音频播放器; 
还有一些操作类样式的一些方法 add,remove,toggle,contains;
C3新增的话可以分为
(1)边框:border-radius圆角  box-shadow阴影 border-images边框图片
(2)背景 bankground-size 图片大小 background-origin定位图片的位置 
(3)文字 text-shadow 文字阴影
(4)2d:transform() 
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
这里分享一篇大佬的技术博客,大佬总结的比较多,其实面试的时候说到几点就可以了!
https://www.cnblogs.com/xkweb/p/5862612.html

伪类选择器
(a)  E:first-child 查找E元素的父元素的第一个子元素E
(b) E:last-child 查找E元素的父元素的最后一个子元素E
(c) E:nth-child(n) 查找第n个子元素
(d) E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算
(e) E:nth-child(even): 所有的偶数
(f) E:nth-child(odd): 所有的奇数
(g) E:nth-of-type(n):指定类型
(h) E:empty 选中没有任何子节点的E元素，注意，空格也算子元素
(i) E:target 结合锚点进行使用，处于当前锚点的元素会被选
 
 伪元素选择器
a   E::before  E::after
i. 是一个行内元素，需要转换成块:display:block   float:**  position:
ii. 必须添加content,哪怕不设置内容，也需要content:””	

2.如何实现跨域?

其实就是让你讲下jsonp的实现原理:
动态的创建script标签利用script的src属性天然跨域的原理,(其实就是不同源),
将数据传到scr中用?链接起来,并且传递一个回调函数,后台将数据打包好并且传递给
定义好的回调函数的函数名,函数名必须保持一致,否则拿不到数据,服务器接受到数据后
调用该回调函数,就可以拿到数据.
这里举一个简单的例子,就像我们引入了jq文件就可以拿到顶级对象$一样,然后
调用$的一些方法,那么这个回调函数,就像顶级对象$一样.

3 对盒模型的理解?

css盒子模型，包含了元素内容（content）、内边距（padding）、
边框（border）、外边距（margin）几个要素
一般使用IE盒模型: box-sizing:border-box

4.对flex布局了解多少?

flex布局常用于移动端,原因就是因为存在兼容性
能对不同屏幕的大小自适应(我觉得这句话是精髓)

div居中:
display: flex;
align-items: center;         /* 垂直居中 */
 justify-content: center;    /* 水平居中 */

 详情阮大大的技术博客:
 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

5 在vue中父子组件中数值的传递?

子向父
父组件通过属性绑定v-bind传递参数,需要驼峰命名,子组件通过,props获取参数,
特点单向下行(父组件值改变,子组件会变化,子组件变化不会改变父组件)
父向子
子组件通过this.$emit()派发事件，父组件利用v-on对事件进行监听，实现参数的传递

6 对原生ajax的了解?

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2. 设置http请求
3. 调用open() send()方法
4. 返回成功或失败的数组

7 对移动端开发了解多少?

1 定义meta标签:
移动web最佳viewport设置： 
布局viewport = 设备宽度 = 度量viewport
<meta name=” viewport” content = “width=device-width, initial-scale = 1,
 user-scalable = no”>
 2.布局最好提flex布局
 3.单位最好用rem (可以说用rem的好处)

8 rem em px rpx的区别?

px:
相对长度单位。像素px是相对于显示器屏幕分辨率而言的;
rem:
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元
素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到
只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合
的连锁反应。
em:
相对父元素的font-size大小,所以值不是固定的
rpx:
 可以根据屏幕宽度进行自适应
 分享一篇写得不错的:感谢:
 https://blog.csdn.net/qq_36208461/article/details/80665125

9 js对字符串的操作?对数组的操作?

字符串:
split() 方法用于把一个字符串分割成字符串数组
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
trim()方法用来删除字符串前后的空格

数组:
1.delete方法：delete删除的只是数组元素的值，所占的空间是并没有删除的
2.splice方法：该方法删除数组指定的元素，并且可以给数组添加新的元素，
即实现删除/替换数组的某项元素。splice(下标，删除的长度，替换的新元素)
3.shift方法:删除第一个数组元素，不带参数，数组的长度会减1,并且返回的
是数组的第一个元素
4 pop方法:删除数组的最后一个元素,数组的长度会减1,并且返回的是数组的
最后一个元素(通过alert()可以查看出返回的是哪个值)
5.unshift()： 方法:在数组的第一个元素前面增加一个元素,数组的长度会加1，
\该方法会改变原来数组的长度.
6.push():在数组的结尾追加元素,可以追加多个元素，该方法会改变原来数
组的长度　
7.concat():合并两个或多个数组，该方法不会改变现有的数组，而仅仅会
返回被连接数组的一个副本
8 sort():该方法是对数组进行升序排序，规则是按ascii表的规则来的
9 reverse():对数组进行翻转操作
10 arr.join()：把数组转换成为字符串，可以自己定义分隔符 
arr.join("自定义分隔符如&")，默认是逗号隔开，如果要没有
分隔符的话，就arr.join("");
11 slice():从当前数组中截取一个新的数组，不影响原来的数组，
参数start从0开始,end从1开始(从第一个元素开始)

更新中>>>>>>>