11.08号)HTML、CSS面试题总结 (二)

1. 描述css reset的作用和样式：

Reset 重置浏览器的 css 默认属性 ，览器的品种不同，样式不同，然后重置，让他们统一。

2. 解释 css sprites，如何使用？

把多张小图片整合到一张大的png图上，再利用background-size ,background-position等进行背景定位使用，这样做可以减少http请求数量，增强性能。

3. 能否简述一下如何使一套设计方案，适应不同的分辨率，有哪些方法可以实现？

流式布局：
使用非固定像素来定义网页的内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局是移动web开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。
响应式开发：
就是一个网站能够兼容多个终端。针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活。但是开发效率低，代码相对复杂，加载慢。
移动web开发+pc开发：
一般是在已经有pc端的网站的情况下，开发移动端，只需要单独开发移动端。开发效率高，代码简洁，加载快，pad上面体验相对较差。

4. 描述下渐进增强和优雅降级？

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

5. css选择器有哪些，及其优先级是如何

选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。！important >行内样式> ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

6. 用 CSS 定义 p 标签，要求实现以下效果：字体颜色在 IE6 下为黑色(#000000)；IE7 下为红色(#ff0000)；而其他浏览器下为绿色(#00ff00)
   答：p{ color：green；
   *color：blue；
   _color：black； }

7. HTML 与 XHTML——二者有什么区别?
   HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言 最主要的不同：
   XHTML 元素必须被正确地嵌套。
   XHTML 元素必须被关闭。
   XHTML标签名必须用小写字母。
   XHTML 文档必须拥有根元素。

8. CSS hack是什么？ie6,7,8 的 hack 分别是什么？
   css hack: 针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。
   background-color:yellow; /ie8/ +background-color:pink; /ie7/ _background-color:orange; /ie6/

9. display：inline-block 什么时候会显示间隙？
   inline-block 水平呈现的元素间，换行显示或空格分隔的情况下会有间距。
   解决办法：父元素{font-size：0；-webkit-text-size-adjust：none；}

10. overflow有哪些属性：
    默认值visible:内容不会被修剪。
    hidden:内容会被修剪，并且其余内容是不可见的。
    scroll:内容会被修剪，剩余内容以滚动条形式呈现。
    auto: 如果内容被修剪，剩余内容以滚动条形式呈现。

11. css去掉iphone,ipad默认按钮样式：
    input[type=“button”], input[type=“submit”], input[type=“reset”] {
    -webkit-appearance: none; }
    textarea { -webkit-appearance: none;}

12. 用 div+css 网站布局的好处:
    首先是表现和内容相分离，然后能提高搜索引擎对网页的索引效率， 用只包含结构化内容的 HTML 代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。提高页面浏览速度，对于同一个页面视觉效果，采用 CSS+DIV 重构的页面容量要比 TABLE 编码的页面文件容量小得多，前者一般只有后者的1/2大小。然后易于维护和改版，只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面

13. 用table布局有什么影响:
    table之所以存在于html中,只是为了显示表格状的数据。把格式数据混入内容中，这使文件的大小无谓地变大，而且用户访问每个页面时必须下载一次这样的格式信息。而且不利于seo优化。

14. console 有哪些常用方法?
    console.log/console.info/console.error/console.warning/console.time/console.timeEnd/console.trace/console.table

15. 为什么利用多个域名来存储网站资源会更有效？
    首先CDN 缓存更方便 ②突破浏览器并发限制③节约 cookie 带宽④节约主域名的连接数，优化页面响应速度 ⑤防止不必要的安全问题

16. 网页的重绘于重排以及重构：
    重绘是一个元素外观的改变所触发的浏览器行为，例如改变 visibility、outline、背景色等属性。 浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定 伴随重排。
    重排是更明显的一种改变，可以理解为渲染树需要重新计算。下面是常见的触发重排的操作： 1.DOM 元素的几何属性变化 2. DOM 树的结构变化 3. 获取某些属性 4. 此外，改变元素的一 些样式，调整浏览器窗口大小等等也都将触发重排。
    重构分为页面重构和网站重构：
    页面重构：编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。
    网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行 为。也就是说是在不改变 UI 的情况下，对网站进行优化，在扩展的同时保持一致的 UI。
    对于传统的网站来说重构通常是： 表格(table)布局改为 DIV+CSS 使网站前端兼容于现代浏览器(针对于不合规范的 CSS、如对 IE6 有效的) 对于移动平台的优化 针对于 SEO 进行优化。
    深层次的网站重构应该考虑的方面： 减少代码间的耦合 让代码保持弹性 严格按规范编写代码 设计可扩展的 API 代替旧有的框架、语言(如 VB) 增强用户体验 优化响应速度 速度的优化重构： 压缩 JS、CSS、image 等前端资源(通常是由服务器来解决) 程序的性能优化(如数据读写) 采用 CDN 来加速资源加载 对于 JS DOM 的优化 HTTP 服务器的文件缓存

17. 以前端角度谈谈seo优化：
    了解搜索引擎如何抓取网页和如何索引网页 你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。 Meta 标签优化 主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文 字比如 Author（作者），Category（目录），Language（编码语种）等。 如何选取关键词并在网页中放置关键词 搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。首先要给网站确定主关键 词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy）， 突出性（Prominency）等等。 了解主要的搜索引擎 虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有 Google， Yahoo，Bing 等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规 则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如 AOL 网页搜索用的是 Google 的搜 索技术，MSN 用的是 Bing 的技术。 主要的互联网目录 Open Directory 自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网 站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了 主页外还抓取大量的内容页面。 按点击付费的搜索引擎 搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有 Overture 和百度，当然也包括 Google 的广告项目 Google Adwords。越来越多的人通过搜 索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。 搜索引擎登录 网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网 站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如 Yahoo 要 299 美元），但是好消息是（至少到目前为止）最大的搜索引擎 Google 目前还是免费，而且它主宰着 60％以上的搜索市场。 链接交换和链接广泛度（Link Popularity） 网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引 擎以外，人们也每天通过不同网站之间的链接来 Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。合理的标签使用。

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

19. Sass、LESS 是什么？大家为什么要使用他们？
    CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。 为什么要使用它们？ 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

20. 什么是空元素？
    单标签，中间没有内容的元素，如img input br等
    (个人笔记供自己查阅)