理论知识（1）

想扩展深刻了解，点击参考连接

1.DIV+CSS和table布局的区别：

• DIV+CSS布局比table布局节省页面代码，代码也更加的清晰。
• DIV+CSS的页面对搜索引擎支持好，并且速度更快了，可以比Table更加快速的显示网站内容。
• DIV+CSS布局是网站版面布局修改更简单，由于表面代码都写在独立的css文件里，而table须要在页面中修改信息。

（参考http://www.codesky.net/article/201008/139693.html）

2.px、rem与em的区别：（px：相对于显示器屏幕分辨率而言。em：相对于当前对象内文本的字体尺寸。rem：相对于HTML根元素。）

• px的特色：

1. IE没法调整那些使用px做为单位的字体大小。
2. 国外的大部分网站可以调整的缘由在于使用了em或rem做为字体单位。
3. Firefox可以调整px、em和rem，可是96%以上的中国网民使用IE浏览器（或内核）。

• em的特色：

1. em的值并非固定的。
2. em会继承父级的字体大小。

• rem的特色（除IE8外，全部浏览器均支持）：

1. 只修改根元素就成比例的调整全部字体的大小。
2. 可避免字体大小逐层复合的连锁反应。

（参考：http://www.cnblogs.com/leejersey/p/3662612.html）

3.link和@import的区别：

• link是XHTML标签，除了加载CSS外，还能够定义RSS等其余业务；@import属于CSS范畴，只能加载CSS。
• link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入后加载。
• link是XHTML标签，无兼容问题；@import是CSS2.1提出的，低版本浏览器不支持。

（参考：http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html）

4.页面重绘与页面回流：

• 重绘：每一个页面至少回流一次，就是在页面第一次加载的时候。也就是见受修改影响的部分从新“流一遍”，回流完成后，浏览器从新绘制受影响的部分到屏幕中，这种过程就叫作重绘。
• 回流：当render tree（渲染树）中部分或所有由于元素的规模尺寸，布局，隐藏等改变须要从新构建时。

（参考：http://www.cnblogs.com/chuangweili/p/5160932.html）

5.border：0和border：none的区别：

• 性能区别：
  • • {border:0;}设为0像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
    • {border:none;}设为none即没有，浏览器解析“none”时将不做出限额按动做，也不消耗内存值。
• 兼容性区别：
  • • {border:0;}设为0时，全部浏览器都一致把边框隐藏。
    • {border:none;}设为none时，IE6/7无效边框依然存在。

（参考：http://www.blueidea.com/tech/web/2009/7232.asp）

6.绝对定位absolute与相对定位:relative的区别：

• 绝对定位：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，若是没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其余任何margin折叠。
• 相对定位：对象遵循常规流，而且参照自身在常规流中的位置经过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 

（参考：http://www.cnblogs.com/z-w-r/p/6743846.html）

7.img标签的title和alt属性的区别：

• title：（标题、名目）
  • • 对元素的注释说明和额外补充。（鼠标放到文字/图片上时有title文字显示。）
    • 并不做为搜索引擎抓取图片的参考，更倾向于用户体验。（若是图片旁边已有文字说明，就不必再添加title。）
• alt：（改变、替换）
  • • 主要用于img标签，它规定的图像没法显示时的替代文本。
    • 当用户将鼠标一用到该img上时，IE会显示出alt属性的值（Chormel浏览器不会显示）
    • 有利于SEO，是搜索引擎搜录时判断图片与文字是否相关的重要依据。

（参考：http://playkid.blog.163.com/blog/static/562872602012108115949742/）

8.块行元素的区别：

• 块元素（转换为行元素方法：display: inline;）：
  • • 独占一行显示。
    • 可设置宽高。
    • margin、padding纵横都有效。
    • 除（p、h1-h6）个别特殊元素外，可包含块状元素和行元素。
    • from不能直接包含行元素。
• 行元素（转换为块元素方法：display: block;）：
  • • 高度由内容撑开，可并排显示。
    • 不能设置宽高（内容设置宽高）。
    • margin、padding横向设置有效，纵向无。
    • 除ins和del外，不能包含块状元素。

（参考：http://blog.csdn.net/M_agician/article/details/72232873）

9.display：none与visibility：hidden的区别：

• display：none：会使整个对象完全消失（所占空间改变），当设置为block时对象才会被加载进来。
• visibility：hidden：只是对象隐藏，所占空间不改变。

（参考：http://bbs.blueidea.com/thread-2942695-1-1.html）

10.HTML和XHTML的区别：

• XHTML元素必须被正确的嵌套。
• XHTML元素必须被关闭。
• XHTML元素的标签名必须用小写字母。
• XHTML文档必须拥有根元素。

（参考：http://www.w3school.com.cn/xhtml/xhtml_html.asp）

11.文档声明中标准模式与兼容模式的区别：

• 标准模式：在该模式下的排版和JS运做模式都是以该浏览器支持的最高标准运行。
• 兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点没法工做。

（参考：http://www.javashuo.com/article/p-fbbfstlc-ds.html）

12.em与strong，b与i的区别：

• 默认样式：
  • • strong=b=粗体；
    • em=i=斜体；
• HTML4.01：
  • • strong，em表明语义，从语义的强调，strong>em
    • b，i 无语义，只是样式加粗或斜体（不推荐使用）
• HTML5：
  • • strong：页面上的强调
    • em：句子中的强调
    • b：普通文本中重要性的文本，如：文档概要中的产品名。或者表明强调的排版方式
    • i：普通文章中突出不一样意见或语气或其余的一段文本，如：分类名称，技术术语，一个外语谚语，一个想法等。或者表明斜体的排版方式

（参考：http://www.zhihu.com/question/19551271）