前端面试题（二）

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

行块元素区别

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

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

行内元素的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较低。