前端面试题（二）

行块元素区别

块级元素独占一行，在默认情况下，宽度自动填满父元素宽度。
行内元素不会独占一行，宽度随着元素的内容而变化。
行内元素的 width 和 height 的设置无效。
行内元素的 margin 和 padding 的垂直方向上不产生边距效果。

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

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

rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba() 只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

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

• 渐进增强（Progressive Enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，以达到更好的用户体验。
• 优雅降级（Graceful Degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

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

• 图片懒加载：在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
• 图片预加载：如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
• CSS 图片优化：如果图片为 CSS 图片，可以使用 CSS Sprite，SVG Sprite（可缩放矢量图形），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 引入方式有哪几种，优缺点分别是什么？

三种引入方式

• 外部引入：

  • 优点：
    1. 代码量少。
    2. 一个 CSS 文件可以控制多个页面。
    3. 有利于改版和维护。
    4. 有效利用缓存机制，加快页面访问速度。
  • 缺点：
    1. 对于单个页面，会有多余的代码。
    2. 外部引入中的 href 属性会给服务器造成请求压力。

• 头部写入：

  • 优点：
    1. 代码量少。
    2. 相对于外部引入，单页代码量少。
    3. 没有服务器请求压力。
    4. 适合大型网站的首页。
  • 缺点：
    1. 结构样式未分离。
    2. 样式代码不能重复利用。

• 标签写入：

  • 优点：
    1. 优先级最高。
    2. 个别特殊情况下使用。
  • 缺点：
    1. 结构样式未分离。
    2. 样式代码不能重复利用。
    3. 结构样式耦合度高，不利于维护。

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 较低。