美文网首页
2020-05-13

2020-05-13

作者: 枫叶落尽 | 来源:发表于2020-05-13 17:30 被阅读0次

今天的笔试题:

1、CSS选择器有哪些?哪些属性可以继承?优先级算法如何计算?

1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)


可继承的样式:
1.font-size
2.font-family
3.color
4.text-indent

不可继承的样式:
1.border
2.padding
3.margin
4.width
5.height

优先级算法:
1.优先级就近原则,同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高,但内联比 id 要高
样式表、内联、important


2、超链接访可过后 hover样式就不出现的问题是什么?如何解決?

当超链接被点击后,经常会出现hover样式效果不显示的问题。解决这个问题其实很简单,只要对超链接的样式属性进行正确的排序即可。

排列顺序如下:

link -> visited -> hover ->action
1
参考设置:

a:link{
    color:red;
    text-decoration:none;
}
a:visited{
    color: blue;
    text-decoration: none;
}
a:hover{
    color: black;
    text-decoration:over line;
}
a:action{
    color:black;text-decoration:overline;
}
https://blog.csdn.net/qq_36801966/article/details/78425139

3、Css中可以让文字在垂直和水平方向上重叠的两个属性是什么?

垂直方向:line-height 水平方向:letter-spacing

4、div+css的布局较table布局有什么优点?

5、如果让你来优化web前端性能,你会从哪些方面进行优化?

6、如下代码输出结果是什么?解释原因

var a;
alert(typeof a);
alert(b);

结果:

VM98:3 Uncaught ReferenceError: b is not defined
    at <anonymous>:3:7

7、如下代码輸出的结果分别是什么?

undefined == null; //true
1 == true; //true
2 == true; //false
0 == false; //true
0 == ''; //true
NaN == NaN; //false
[] == false; //true
[] == ![] //true
[] == [] //false

8、如下代码輸出的结果是什么?

for (var i = 1; i <= 3; i++) {
    setTimeout(function () { console.log(i); }, 0);
}
// 4
// 4
// 4

9、如下代码輸出的结果是什么?

var obj = {
    a: 1,
    b: function() {console.log(this.a)}
}
var a=2;
var objb = obj.b;

obj.b(); // 1
objb(); // 2
obj.b.call(window); // 2

10、说出以下函数的作用是?空白区域应该填写什么?

//define 
(function(window){
    function fn(str){
        this.str=str;
    }
 
    fn.prototype.format = function(){
        var arg = ______;
        return this.str.replace(_____,function(a,b){
             return arg[b]||"";
      });
    }
    window.fn = fn;
})(window);
 
//use
(function(){
    var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
    console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
})();

函数的作用是使用format函数将函数的参数替换掉{0}这样的内容,返回一个格式化后的结果; 第一个空是:arguments 第二个空是:/\{(\d+)\}/ig

11、给 Object 扩展一个方法 clone ,实现深度克隆对象

12、javascript实现二分法查找

/* 不知道他什么意思,那就按照它要查找一个元素是否存在就ok了,按最简单的来处理*/

13、一次完整的HTTP事务是怎样的个过程?

  • 域名解析
  • 发起TCP的3次握手
  • 建立TCP连接后发起http请求
  • 服务器响应http请求
  • 浏览器得到html代码
  • 浏览器解析html代码,
  • 并请求html代码中的资源(如js、css、图片等)
  • 浏览器对页面进行渲染呈现给用户

14、想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)

回答出概念即可,下面是几个要点 给需要拖拽的节点绑定 mousedown, mousemove, mouseup 事件 mousedown 事件触发后,开始拖拽 mousemove 时,需要通过 event.clientX 和 clientY 获取拖拽位置,并实时更新位置 mouseup 时,拖拽结束 需要注意浏览器边界的情况
参考

15、如果被录用,你期望从工作中获得什么?你觉得前端工程师的价值体现在哪?怎样去体现你对于组织的价值?

相关文章

网友评论

      本文标题:2020-05-13

      本文链接:https://www.haomeiwen.com/subject/rhznnhtx.html