前端相关知识点

标签：相关   刷新   信任   ack   ring   host   范围   sar   实时   

1.哪些是块级元素，哪些是行内元素，有什么区别？

答：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有display的值，display 为block则代表块级元素，display为inline则为行内元素。

   行内元素有:a，b， strong，img，input，select，span

   块级元素有：h1~h6，p，div，ul，li，ol ,dd，dt，dd

补充一下： 常见的空元素 <br><img><hr><input><link><meta>鲜为人知的还有<area><col> <base><source>

 行内元素与块级元素的区别：

      在标准文档流里面，块级元素具有以下特点：
      ①总是在新行上开始，占据一整行；
      ②高度，行高以及外边距和内边距都可控制；
      ③宽度始终是与浏览器宽度一样，与内容无关；
      ④它可以容纳内联元素和其他块元素。

行内元素的特点：
      ①和其他元素都在一行上；
      ②高，行高及外边距和内边距部分可改变；
      ③宽度只与内容有关；
      ④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

2.CSS中的选择器有哪些？优先级先后顺序？

      (1) ID选择器(#myId)

      (2)类选择器(.myclassname)

      (3)标签选择器(div，p，h1)

      (4)相邻选择器(div+p)

      (5)子选择器(ul>li)

      (6)后代选择器(li a)

      (7)通配符选择器(*)

      (8)属性选择器(a[rel="haha"])

      (9)伪类选择器(a:hover)

同权重下优先级就近原则，载入样式以最后载入为主。 id>class>tag

3.CSS中Position：static,relative,absolute,fixed,sticky中的用法。

         static:默认值，默认定位，对于left，right等属性是不可用的.元素在正常的流中进行显示，left,right,top,bottom属性或者z-index声明不可用。

         relative：生成相对定位的元素，相对于元素正常位置进行定位，可以使用left,right,top,bottom属性;当进行left等属性的设置时，元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。

         absolute:生成绝对定位的元素，可以使用left,right,top,bottom属性;相对于static以外的第一个父元素进行定位，脱离文档流

         fixed:生成固定定位的元素，相对窗口定位，可以使用left,right,top,bottom属性;相对于浏览器窗口是固定的.不随着文档进行移动。

         sticky:基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

在目标区域以内，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

4.写出多种清除浮动的方法。并写出其原理。

         1、使用时清除元素本身，不影响其他元素。当页面有两个div被设置成向左浮动时，想要让第二个元素下移，这是就要让第二个元素设置clear:left,让第二个元素左边不存在浮动元素

         2、clear:both清除左右两边的元素。

   它利用清除浮动来把外层的div撑开，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，

   原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

         3、clearfix：清除浮动

        如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开

        ①在外部div容器的内部中设置一个div的style属性为：clear:both；可以将外部div撑开，在子集清除浮动。但是这样做多了一个无关紧要的div。

        ②最好的解决方式就是在外层加入一个类clearfix,让其在div容器最后添加内容，内容不显示，但仍然占据空间，清除两边的浮动，不必在html文件中写入大量无意义的空标签。

            .clearfix { *zoom:1;} 这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。

        ③overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容，从而实现了清除浮动

5.CSS中哪些属性是可以继承的？一个ul的color设置为一个值，li设置为一个值，那么li下面的span的值怎么设置

        可以继承的样式：font-size,font-family,color,ul ,li, dl, dt ,dd

        不可以继承的样式：border ,padding, margin, width, height

        li下面的span中的color是继承了li的color颜色

6.HTML5标签 可以定义全局属性的除了class和id之外还有哪些？

①contentEditable属性：允许用户可以编译元素中的内容，所以该元素必须是可以获取焦点的元素（可以在点击鼠标后，可以提供出一个插入符号，提示该元素中的内容是允许编辑）。属性为true是可以编辑的。

②hidden属性：所有HTML5元素都是可以使用hidden元素，属性为true则表示该元素是不显示出来的

7.offsetWidth，clientWidth，scrollWidth的意义

       offsetWidth当前对象的宽度（Width+border+padding）包括滚动条等边线，会随着对象的显示而变化。style.width 也是表示对象的宽度。但是他们两个是有区别的，①如果页面中的元素设置为百分比，无论页面变大或者变小，style.width返回值的宽度是百分比，而offsetWidth 返回值是数据；②style.width:如果元素没有设置width，则style.width返回值是空。③style.width返回值除了数据之外还会返回单位px。

       clientWidth 对象内容的可视区的宽度，不包括滚动条和边线，会随着对象显示的大小而变化。

       scrollWidth 对象实际内容的宽度，会随着对象内容增多或减少来改变。

8.如何用CSS让一个HTML中的元素垂直居中？

<div class="par">
    <div class="son">Center</div>
</div>

.par{ position: relative; background-color: aquamarine;width:800px;height:400px;}

.par .son{ position: absolute;left:0;top:0;right:0;bottom: 0; height:30%;width:30%;background-color: beige; margin: auto;}

让一个元素居左边部分200px,右边大小自适应的代码怎么描写？

<div id="main">
    <div id="left">Main Content</div>
    <div id="right">Main Content</div>
</div>

#left{  background-color: aqua; height:50px;float: left;width:200px;}
#right{ margin-left: 220px; background-color: aqua; height:50px;}

9.盒子模型并指明对应属性名称。怪异模式下的区别和解决方案？

         盒模型：margin + padding + border + content

         标准模型content不包括其他部分；IE盒子模型content 包含了padding和border

         IE的怪异模式中，元素的width包含了padding和border，而标准模式中padding和border 并不属于宽度的一部分。

         CSS3中有一个元素box-sizing默认属性是content-box；而将box-sizing:border-box，浏览器将会为那个元素应用IE的盒模型。

10.CSS的伪类有哪些？

         :active向被激活的元素添加样式。:focus向拥有键盘输入焦点的元素添加样式。:hover当鼠标悬浮在元素上方时，向元素添加样式。:link向未被访问的链接添加样式。:visited向已被访问的链接添加样式。:first-child向元素的第一个子元素添加样式。:lang向带有指定 lang 属性的元素添加样式。

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

11.写出IE6、IE7、IE8对应的CSS hack 方式。（类属性前后缀和条件注释）

12.用css画出一个三角形

.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}

13.用css绘制一个动画

14.你对网站的兼容性了解多少？使用过什么解决兼容性问题？

      ①IE中的盒模型，是=border+padding+margin+content而标准的盒子模型margin*2+padding*2+border*2+content；

      ②在IE浏览器中设置float时，margin会加倍。解决display:inline，忽略浮动;

      ③垂直居中：vertical-align:middle；可以设置行高line-height:为容器的高度。

       ④IE6下边图片会有间隙：则将display:block;

15.你对优化性能了解多少？

       (1)优化图片，图片格式的选择，比如GIF提供的颜色较少，可用于一些要求不是很高的图片上

       (2)优化CSS。比如压缩合并CSS，如margin-left，margin-right……

       (3)标注高度和宽度。如果浏览器没有找到这两个参数，它需要在下载图片的时候计算出大小，如果图片很多，浏览器会不停的调整页面，不但影响速度，还会影响浏览体验。当浏览器知道宽度和高度是，即使图片无法显示，也会腾出位置，加载后面的内容，从而加载时间快了，浏览体验更好。

16.你对DOCTYPE有哪些了解？你知道多少种文档类型？

         告知浏览器使用哪种版本的HTML和XHTML规范。标签可声明三种dtd类型，严格版本，过渡版本，以及基于框架的HTML文档。

         HTML4.0.1规定了三种文档类型：Strict，Transitional及Frameset。

         XHTML1.0 规定了三种XML文档类型：Strict，Transitional及Frameset。

         Standards标准模式用于呈现遵循最新标准的网页，而Quirks包容模式用于呈现传统浏览器而设计的网页。

         HTML5的只需要写，不基于SGML,因此不需要对DTD进行引用，但需要doctype来规范浏览器的行为。

17.提高页面加载速度的方法有哪些,减少页面加载时间，具体是什么？

         (1)优化图片，图片格式的选择，比如GIF提供的颜色较少，可用于一些要求不是很高的图片上

         (2)优化CSS。比如压缩合并CSS，如margin-left，margin-right……

         (3)标注高度和宽度。如果浏览器没有找到这两个参数，它需要在下载图片的时候计算出大小，如果图片很多，浏览器会不停的调整页面，不但影响速度，还会影响浏览体验。当浏览器知道宽度和高度是，即使图片无法显示，也会腾出位置，加载后面的内容，从而加载时间快了，浏览体验更好。

18.location知多少

          1.location.href：全部长度，完整的URL

          2.location.host：中间，url主机名称和端口号 127.0.0.1:8080

          3.location.hostname：不包含端口号 127.0.0.1

          4.location.search：从当前的URL？开始的字符串

          5.location.protocol：协议

          6.navigator.userAgent：返回浏览器的类型useragent

19.描述一下渐进增强和优雅降级？

      优雅降级：Web站点在所有新式浏览器都能正常工作，如果用户使用的是老式的浏览器，则代码会检查以确认他们是否能够正常工作，由于IE独特的盒模型布局问题，针对不同版本的IE的Hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验不至于完全失效

      渐进增强：从被所有浏览器支持的基本功能开始，逐步的增加那些只有新式浏览器的才支持的功能，向页面增加无害于基础浏览器的额外样式和功能。当浏览器支持时，他们自动的呈现并发挥效果。

20.JSONP的工作原理是什么？与AJAX 有什么区别？尽可能多的写出Jquery中$.ajax()可传入对象的属性、方法并标注其作用。

         JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

　　　　首先我们要知道的是JSONP是跨域请求的，具体的请看面试题的分析，https://my.oschina.net/courage123/blog/724251

　　　　核心是动态添加<script>标签来调用服务器提供的js脚本不提错误的处理，Ajax的核心是通过xmlHttpRequest开获取非本页面的内容

　　　　知道了这些这道题就并不难，只需要将给出的传递参数传过去就可以了

　　　　$.ajax{(

    　　　　url: ‘http:~~~~‘,

    　　　　type:‘ ‘,

   　　　　 dataType:‘jsonp‘,

   　　　　 jsonpCallback:‘jsonCallback‘,

    　　　　success:function (data){

        　　　　console.log(data);        

　　　　　}

　　　)}

跨域５、window.name

关键点：window.name在页面的生命周期里共享一个window.name;

兼容性：所有浏览器都支持；

优点：

最简单的利用了浏览器的特性来做到不同域之间的数据传递；

不需要前端和后端的特殊配制；

缺点：

大小限制：window.name最大size是2M左右，不同浏览器中会有不同约定；

安全性：当前页面所有window都可以修改，很不安全；

数据类型：传递数据只能限于字符串，如果是对象或者其他会自动被转化为字符

AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！

 $.ajax({  
        type: "POST",  
        url: "/newcircle/view/flash/", //与后端定制的接口
        data: {"orderId":orderId,"commant":commant},   //根据需要传递数据
        dataType:"json",  
        async:false,  
        cache:false,  
        success: function(data){  
        //包数据解析为json 格式                                                            

        },  
        error: function(json){  
            alert("出错了.");  
        }  
    });  

21.sessionStorage,localStorage和cookie的区别和使用方法？

         cookie在服务器和浏览器之间来回传递，在客户端的磁盘上以很小的文件保存一定量的数据。

         失效时间：表示cookie何时应该被删除的时间戳。表示在这个时间范围内，每次访问该网站都会向该网站的服务器发送这个已经保存在本地的cookie值，但是如果这个日期是以前的日期，那么该cookie值就会被删除。

         而sessionStorage和localStorage不会。他们都是浏览器端存储数据的

          sessionStorage和localStorage存储空间较大，有各自独立的存储空间，有更多丰富易用的接口。可以方便在web请求中保存数据，不需要来回请求，是HTML5的Web Storage API提供的。            sessionStorage是对于浏览器窗口不关闭，刷新页面或进入同源另一页面时数据也不会消失，关闭窗口后，数据才会消失。    localStorage如果不进行销毁，会一直存在在浏览器中。                    localstorage的setItem放入数据，getItem方法取出数据

22.你能说一说http中的状态码？各个代表什么含义吗？

       200 OK 表示请求成功 一切正常

       301 Moved Permanently 重定向，客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL

       302 Found 临时重定向，类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。

       304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求。服务器告诉客户，原来缓冲的文档还可以继续使用。

       400 Bad Request 请求出现语法错误。

       403 Forbidden 资源不可用。

       404 Not Found 无法找到指定位置的资源。

       405 Method Not Allowed 请求方法（GET、POST、HEAD、Delete、PUT、TRACE等）对指定的资源不适用。

       500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。

       501 Not Implemented 服务器不支持实现请求所需要的功能。

23.如果有一个数组中存在一些重复的元素怎么使用JS来操作除掉重复的数字？

①借助hashtable来高效的解决这个问题

function outRepeat(a){
    var hash=[],arr=[];
    for (var i = 0; i < a.length; i++) {
        hash[a[i]]=null;
    }
    console.log(hash);
    for(var key in hash){
        arr.push(key);
    }
    console.log(arr);
}
outRepeat([2,4,4,5,"a","a"]);//["2", "4", "5", "a"]

②借助另一个数组模式，从第一个数组中取出一个元素，放入数组二中，依次从数组一中取出数组进行比较,不重复放入数组。

③

let arr = [1,2,3,3];
let resultarr = [...new Set(arr)]; 
console.log(resultarr); //[1,2,3]

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log(‘type error!‘)
        return
    }
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (res.indexOf(arr[i]) === -1) {
            res.push(arr[i])
        }
    }
    return res
}

24.如何在CSS中设置页面中一些元素不显示在浏览器窗口？

display：none;或者visibility:hidden;

25.数组与链表的区别？

           数组必须事先定义长度，不能适应数据的动态增减，当数据增加时，数组可能会超出原来的定义的个数。当数据减少时，数据的单元空间会浪费。

           链表动态进行存储分配，可以适应数据的插入和删除。

26.this:

        1.构造函数this指向对象

        2.this在setTimeOut指向window

        3.this在事件函数中指向调用的标签

        4.this在普通函数中指向，谁调用指向谁

27.DOM优化https://www.cnblogs.com/mopagunda/p/4740678.html(重绘或重画)

      增加、删除和修改可见DOM元素

      页面初始化的渲染

      移动DOM元素

      修改CSS样式，改变DOM元素的尺寸

      DOM元素内容改变，使得尺寸被撑大

      浏览器窗口尺寸改变

      浏览器窗口滚动

实时搜索框：
var time= null
input.addEventListener("input",function(){
       cleartimeout(time)
      time=setTimeout(()=>{search})
})

28.闭包：受作用域的影响，父级无法访问到子集的变量值，使用闭包。指有权访问另一个函数作用域中的变量的函数。场景，函数座位返回值，函数作为参数传递。特性，函数嵌套函数，内部可以用用外部的参数和变量，参数不可回收

作用域链：查找变量的过程中，先找自己的局部环境有没有声明或者函数，有的话有没有赋值，函数内部没有的话向上一级。局部变量，写在函数中的变量。全局变量，全局范围的声明或者只有赋值没有声明

原型链：通过prototype对象指向父类对象，直到指向object对象为止，形成一个原型链条。数组对象和函数都有一个_proto_（隐式原型），所有函数都有prototype，_proto_（隐式原型）属性值指向他的构造函数的prototype值，当找一个对象的属性时，如果这个对象没有，则会去找他的_proto_（他的构造函数的propotype）

29.vue的原理:

        通过observer监听model的数据变化，object.defineProperty()劫持各个属性的setter和getter，complie来解析编译模板指令，利用watcher作为两者的桥梁，达成双向数据绑定。转载https://blog.csdn.net/lizidemao/article/details/83751690

30.事件委托或者代理

31.vuex

32.border1px

33.bind

34.promise

35.数组的方法

前端相关知识点

标签：相关   刷新   信任   ack   ring   host   范围   sar   实时   

原文地址：https://www.cnblogs.com/xiyu-8023/p/10058177.html