理论知识

Posted 2020-10-06 想学IT的小肉肉

想扩展深入了解，点击参考链接

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运作模式都是以该浏览器支持的最高标准运行。
• 兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

（参考：https://segmentfault.com/a/1190000000465431）

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）