最新文章:

您的位置: 富录-前端开发|web技术博客 > 前端面试题汇总 > 前端面试题(二)

前端面试题(二)

发布时间:2017年10月25日 评论数:抢沙发阅读数: 2412

    行块元素区别

    块级元素独占一行,在默认情况下,宽度自动填满父元素宽度

    行内元素不会独占一行,宽度随着元素的内容而变化

    行内元素的width和height的设置无效

    行内元素的margin和padding的垂直方向上不产生边距效果

    可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换


    rgba()和opacity的透明效果有什么不同?

    rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,

    而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)


    你能描述一下渐进增强和优雅降级之间的不同吗?

    渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

    优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

    一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。

    图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。

    如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。

    如果图片为css图片,可以使用CSSsprite,SVGsprite(SVG可缩放矢量图形),Iconfont(阿里巴巴矢量图标库)、Base64(用于传输8位字节代码的编码方式之一,采用Base64编码,具有不可读性,及所编码的数据不会被人用肉眼直接看到。)等技术。

    如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。

    如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。


    DIV+CSS与table的优缺点

    table布局

         缺点:1.Table标签就是表格,是用来显示数据和处理数据的,如果用于布局,对SEO(搜索引擎)优化较差

                   2.不利于网站维护

                   3.标签嵌套层级较多,代码冗余量较大

         优点:1.容易上手。

                   2.可以形成复杂的变化,简单快速。

                   3.表现上更加“严谨”,在不同浏览器中都能得到很好的兼容。

       DIV+CSS布局

          优点:1.有利于SEO优化

                    2.有利于网站的维护和改版

                    3.符合W3C标准,代码结构清晰明了,结构、样式和行为分离,带来足够好的可维护性

                    4.用只包含结构化内容的HTML代替嵌套的标签,嵌套层数较少,代码量少,加快页面加载速度

          缺点:1.不容易上手,操作比较复杂

                    2.兼容性较差


    CSS引入方式有哪几种,优缺点分别是什么?

             三种引入方式

             外部引入

             优点:代码量少

                       一个CSS文件可以控制多个页面

                       有利于改版和维护

                       有效的利用缓存机制,加快页面的访问速度

             缺点:对于单个页面,会有多余的代码

                       外部引入种的href属性会给服务器造成请求压力

            头部写入

             优点:代码量少

                       相对于外部引入,单页代码量少

                       没有服务器请求压力

                       适合大型网站的首页

             缺点:结构样式未分离,

                      样式代码不能重复利用

             标签写入

             优点:优先级最高

                       个别特殊的情况下使用

             缺点:结构样式未分离

                      样式代码不能重复利用

                      结构样式耦合度高,不利于维护


    link 和@import 的区别  

    区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

    区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

    区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

    区别4:link支持使用JavaScript控制DOM去改变样式;而@import不支持。


    !important的理解

    !important是CSS1就定义的语法,作用是提高指定CSS属性的优先级。

    important 有何作用

    默认情况下,CSS属性按级层覆盖,例如在CSS文件中的定义样式可以被style属性定义的样式覆盖,反之则不行。然而,对覆盖平衡而言,加上一个“!important”优先级大于正常的CSS属性的优先级。(最大优先级,超越标签内书写)

    important的兼容

    IE7,IE8,firefox,chrome等高端浏览器下,已经可以识别 !important属性, 但是IE6仍然不能完全识别,含! important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里),IE 6.0认为! important优先级较高,否则当含! important的样式属性被同一个{}里的样式覆盖时,IE 6.0认为! important较低。



二维码加载中...
本文作者:DGF      文章标题: 前端面试题(二)
本文地址: http://arbays.com/post-45.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论