1. 自我介绍
2. 对前端的理解
3. 为什么li中间会出现空隙
li{
display: inline-block;
background: red;
width: 300px;
height: 100px;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
4. 实现图片瀑布流(自适应多列)
/*瀑布流层*/
.waterfall {
-moz-column-count: 4;
/* Firefox */
-webkit-column-count: 4;
/* Safari 和 Chrome */
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/*一个内容层*/
.item {
padding: 1em;
margin: 0 0 1em 0;
-moz-page-break-inside: avoid;a
-webkit-column-break-inside: avoid;
break-inside: avoid;
border: 1px solid #000;
}
column-count 一行需要分割多少列column-gap 每一列的列距column-rule-style 列边框样式column-rule-width 列边框宽度column-rule-color 列边框颜色column-rule column-rule-* 所有属性的简写。 如：column-rule: 1px solid #ccc(与border使用相似)column-span 指定元素跨越多少列column-width 指定列的宽度
5. css选择器选择一个表格中第二行第二列的td
table tbody tr:nth-child(2) td:nth-child(2){
background: red;
}
6. 从一个表格中第二行第二列的td开始之后的所有的td
//可以修改第几行第几列，即为第n+1行第n+1列 这里的n为1
tr:nth-child(n)~tr>td:nth-child(n)~td {
background: red;
}
7. 做移动端有没有遇到兼容性的问题
8. 处理过canvas？
9. canvas跨域
10. canvas贝塞尔曲线
11. 点击事件的生命周期？
12. 委托点击事件对象的target与currentTarget是谁？
// 实现功能是点击li，弹出123：
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
// 传统的方法 需要通过循环对多个li进行时间绑定
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(123);
}
}
}
// 事件委托的方式
// Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}
13. 对vue的掌握
14. 父组件与子组件的通信
15. 如果是爷孙通信？假如是跨多层组件通信？
16. localStorage与cookies区别？
17. localStorage跨域问题？cookies跨域问题？
18. www.baidu.com/m/index.html ； m.baidu.com/n/index.html m设置了一个cookies，n这个页面可以访问吗？