2019-03-14

1、行内元素有哪些?块级元素有哪些?他们的区别是什么?

行内元素主要有:a b br i span input select
块级元素主要有:div p h1 h2 h3 h4 form ul
行内元素和块级元素之间是可以通过display相互转换的。
行内元素特点
1、和其他元素都在一行上;
2、元素的高度、宽度、行高及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
块级元素特点
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。

2、CSS3新增的伪类有哪些?

CSS3 主要新增了两大类选择器,分别是结构伪类选择器和UI伪类选择器。
结构伪类选择器:
:root:emptyonly-childonly-of-type
:nth-child(n):nth-last-child(n):last-child
:nth-type(n):nth-last-of-type(n):first-of-type:last-of-type
UI伪类选择器:
:enabled:disabledchecked

3、CSS3的优先级如何计算?

下面列表中,选择器类型的优先级是递增的:
1、类型选择器和** 伪元素**
2、类选择器属性选择器伪类
3、ID选择器
4、!important规则。
sp1:通配符关系选择符(+, >, ~, ' ') 和 否定伪类:not()) 对优先级没有影响。(但是,在 :not() 内部声明的选择器是会影响优先级)。
sp2:给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ,因此可看作是具有最高的优先级。.

4、HTTP状态码都有哪些含义?(至少写5个)

根据RFC规范,HTTP状态码主要分五大类,分别是1xx,2xx,3xx,4xx,5xx。
1xx:这一类型的状态码,代表请求已被接受,需要继续处理。这类响应是临时响应,只包含状态行和某些可选的响应头信息,并以空行结束。由于HTTP/1.0协议中没有定义任何1xx状态码,所以除非在某些试验条件下,服务器禁止向此类客户端发送1xx响应。
2xx:这一类型的状态码,代表请求已成功被服务器接收、理解、并接受。
3xx:这类状态码代表需要客户端采取进一步的操作才能完成请求。通常,这些状态码用来重定向,后续的请求地址(重定向目标)在本次响应的Location域中指明。
4xx:这类的状态码代表了客户端看起来可能发生了错误,妨碍了服务器的处理。
5xx:表示服务器无法完成明显有效的请求。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生,也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。

常见状态码:
200:OK(请求成功。)
302:Found(要求客户端执行临时重定向。)
403:Forbidden(服务器已经理解请求,但是拒绝执行它)
404:Not Found(请求失败,请求所希望得到的资源未被在服务器上发现,但允许用户的后续请求)
502:Bad Gateway(作为网关或者代理服务器工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。)

5、js的基本数据类型都哪些?

Undefined、Null、Boolean、Number、String、Symbol(ES6新增)、BigInt(ES10新增)

6、什么是JavaScript闭包?

闭包是函数和声明该函数的词法环境的组合。我的理解是,只要是函数的返回值是函数,或者函数的参数是一个回调函数,都可以理解这是一个闭包

7、Ajax和jsonp的区别?

具体区别参考文章:https://blog.csdn.net/qq_37604843/article/details/78654964

8、JavaScript面向对象中继承如何实现?

JavaScript面向对象中继承的实现方式有五种,分别是:
利用原型链、利用构造函数、组合继承、原型式继承、寄生组合式继承。

9、请实现,鼠标点击任意标签,alert标签的名称。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>这是p标签</p>
    <div>这是div标签</div>
    <span>这是span标签</span>
    <a href="#">这是a标签</a>
</body>

<script>
    var el = document.getElementsByTagName('body');
    el[0].onclick = function (event) {
        evt = event || window.event;
        var selected = evt.target || evt.srcElement;
        alert(selected.tagName);

    }
</script>

</html>

10、请使用css控制3个div,实现以下布局。(总高度310px,左100px,右200px,左侧上面高度150px)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 310px;
            height: 310px;
            background-color: #ddd;
            position: relative;
        }

        .container > div {
            position: absolute;
        }
        .left {
            width: 100px;
            height: 150px;
            left: 0;
            background-color: #9400ff;
        }
        .right {
            width: 200px;
            height: 100%;
            right: 0;
            background-color: #94ff00;
        }
        .bottom {
            bottom: 0;
            background-color: #0094ff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="left bottom"></div>
        <div class="right"></div>
    </div>
</body>
</html>

11、实现点击下面按钮出现提示框,在点击其他地方提示框消失。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #msg {
            width: 180px;
            border: 1px solid #0094ff;
            height: 150px;
            display: none;
            background: #893844;
            position: absolute;
        }

        #btn {
            width: 182px;
            height: 35px;
            line-height: 35px;
            background: #0094ff;
            position: absolute;
            top: 350px;
            left: 300px;
        }
    </style>
</head>

<body>
    <div id="msg">盒子</div>
    <div id="btn">点击按钮显示盒子</div>
</body>
<script>
    document.onclick = function (e) {
        e = e || event;
        var btn = document.getElementById("btn");
        var msg = document.getElementById("msg");
        var target = e.target || e.srcElement;
        if (target !== btn && target !== msg) {
            msg.style.display = "none";
            btn.innerText = "点击按钮显示盒子";
        } else {
            msg.style.top = (btn.offsetTop - 160) + "px";
            msg.style.left = btn.offsetLeft + "px";
            msg.style.display = "block";
            btn.innerText = "点击空白处隐藏盒子";
        }
    }
</script>

</html>

12、请详细说你对vue声明周期的理解。

具体详见文章(写的非常好):https://segmentfault.com/a/1190000008010666

13、编写冒泡排序 var arr = [1,3,5,6,8,7,9,2]

 function bubblingSort(arr){
        var temp;
        for(var i=0;i<arr.length;i++){ 
            for(var j=0;j<arr.length-i-1;j++){ 
                if(arr[j]>arr[j+1]){
                    temp=arr[j];
                    arr[j]=arr[j+1];
                    arr[j+1]=temp;
                }
            }
        };
    return arr;
    }

    var arr = [1,3,5,6,8,7,9,2];

    var s=bubblingSort(arr);

    console.log(s);

14、vue中data,methods、computed、watch之间的区别。

没有实例做支撑很难一句话说清楚,具体参考文章:https://blog.csdn.net/smartdt/article/details/75557369

15、vuex有哪几种属性?

vuex有State、Mutation、Action、Getter、Module五种属性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,348评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,122评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,936评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,427评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,467评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,785评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,931评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,696评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,141评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,483评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,625评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,291评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,892评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,492评论 2 348