码迷,mamicode.com
首页 > 其他好文 > 详细

前端5道常见面试题

时间:2019-09-15 10:51:14      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:连接   image   返回   多个   最大的   border   出现   function   ber   

面试题讲解:
    第一题:行内元素有哪些?块级元素有哪些?有哪些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("分隔符"); //返回由指定分隔符连接的字符串 ------------------------------------------------------------------------------------------------------------------------------------

前端5道常见面试题

标签:连接   image   返回   多个   最大的   border   出现   function   ber   

原文地址:https://www.cnblogs.com/feihu1024/p/11521097.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!