前端5道常见面试题

Posted 2022-11-01 feihu1024

面试题讲解：
    第一题：行内元素有哪些？块级元素有哪些？有哪些css盒模型？
    
        行内元素举例：a、strong、b、em、i、del、u、ins、span、...
        块级元素举例：h1~h6、p、div、ul、ol、l 、...
        行内块元素举例：img、input、td、...
        
        css盒模型：
            1.盒模型概念：所谓盒模型就是把所有html元素均看作一个个矩形盒子，该盒子由四个部分组成：内容(content:width / height)、内边距(padding)、边框(border)、外边距(margin)
        
        css盒模型举例：
            1.W3C标准盒模型（content-box）：    盒子尺寸 = width
            2.IE标准盒模型（border-box）：      盒子尺寸 = width + padding + border
        
        
        
    第二题：css引入的方式有哪些？link和@import的区别是？
    
        1.CSS的三种引入方式：
            1.内联样式：    通过HTML元素的style属性来定义样式
            
            2.内部样式：    将CSS代码集中于HTML文档的head元素中，并使用style元素定义样式
            
            3.外部样式表：　将所有的样式定义放在一个或多个以.css为扩展名的外部样式表文件中，通过link元素将其链接到HTML文档中2.link和@import的区别：
            link的使用：　　　　<link rel="stylesheet" type="text/css" href="index.css">
            @import的使用：    <style type="text/css">    @import url(‘index.css‘);   </style>
            
            1.属性不同:       link是html提供的标签，不仅可以加载css文件，还能定义RSS、rel 连接属性等。而@import是css中的语法规则
            
            2.加载顺序区别：   加载页面时，link标签引入的CSS被同时加载；@import引入的CSS将在页面加载完毕后被加载。
            
            3.兼容性区别：     @import是CSS2.1才有的语法，故只可在IE5+才能识别；link标签作为HTML元素，不存在兼容性问题。
            
            4.可控制性区别：   link支持使用javascript控制DOM去改变样式；而@import不支持。
            
            5.优先级区别：     @import可以在CSS文件中再次引入其他样式表。
    
    

    第三题：标签上title和alt属性的区别是什么？
    
        1. alt是html标签的属性，而title既是html标签，又是html属性
        
        2.关于title
            title作为标签时，网页的标题就是写在这对标签之内的。
            title作为属性时，可以为元素提供额外说明信息。它可以用在任何标签上，例如img标签和a标签。
            
        3. alt属性只能用在图像中，用于网页中图片无法正常显示时给用户提供文字说明。alt是替代图像作用而不是提供额外说明文字的。（<input type="image" />）
        
    
    
    第四题：解释css sprites，如何使用，以及它的优缺点
    
        1.css sprites(精灵图):
            CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，
　　　　 载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
        
        2.基本原理：
            CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
        background-position可以用数字精确的定位出背景图片的位置。
        
        3.优点：
            1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
            2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
            3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
            4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
            
        4.缺点：    
            1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，
                最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
            
            2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；
            
            3.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，
                又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
    
    
    
    第五题：JavaScript的typeof返回哪些数据类型？
    
        undefined
        string
        boolean
        number(NaN)
        symbol(ES6)
        Object
        function
    
    
    
    第六题：数组方法pop()、push()、unshift()、shift()
    
        var arr = [first, 1, 2, 3, last];

        1.添加元素（可以添加多个元素，返回值为添加后的数组长度）
            arr.push(e1, e2, ...);        //末尾追加
            arr.unshift(e1, e2, ...);    //首位添加
            
        2.删除元素(返回被删除的元素)；
            arr.shift();                //首位删除
            arr.pop();                    //末尾删除
            
        3.删除指定位置的元素：
            arr.splice(start,count)；    //接受两个参数，start指定删除的起始位置，count指定删除的个数，返回被删除元素的集合
            
        4.截取数组：
            arr.slice(start,end)；        //从start开始截取end个元素，返回截取到的子数组
            
        5.数组转字符串:
            arr.jion("分隔符");            //返回由指定分隔符连接的字符串



            
            
            
            
------------------------------------------------------------------------------------------------------------------------------------