常见小问题区别总结

1.link和@import的区别

HTML代码如下：

<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />

HTML代码如下：

<style type='text/css' media='screen'>@import url('CSS文件 ');</style>

虽然，两者都是外部引用CSS的方式，但是还是存在一定区别的：

• 区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
• 区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
• 区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器并不支持。
• 区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import并 不支持。

2.src与href的区别

• src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。
• src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。
  如：<script src ='js.js'></script>，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
• href是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加：<link href='common.css' rel='stylesheet'/>，那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。
  这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式。

3.img的title和alt区别

• Alt 用于图片无法加载的时候显示预先设置好的文字或提示信息
• Title 为该属性提供信息，通常当鼠标滑动到元素上的时候会显示

4.表单提交中Get和Post方式的区别

• get 是从服务器上获取数据， post 是向服务器传送数据。
• get 是把参数数据队列加到提交表单的 action 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中可以看到。 post 是通过 HTTP post 机制，将表单内各个字段与其内容放置在 HTML header 内一起传送到 action 属性所指的 URL 地址 , 用户看不到这个过程。
• 对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。
• get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，一般被默认为不受限制。但理论上， IIS4 中最大量为 80KB ， IIS5 中为 100KB 。
• get 安全性非常低， post 安全性较高。

5.em与rem的区别

• rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数，只相对于根元素的大小

• rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
  作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的天猫tmall就使用这种办法

• em 文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。相对父元素的字体大小倍数

• em（font size of the element）是指相对于父元素的字体大小的单位。
  em与rem的重要区别： 它们计算的规则一个是依赖父元素另一个是依赖根元素计算

6.display:none和visibility:hidden区别

• 在使用CSS的display:none后，被隐藏的元素是不会占有原来的位置空间的，他会引起浏览器的重排->重绘
• 在使用CSS的visibility:hidden后，被隐藏的元素是会占有原来的位置空间的，他的外表只是被隐藏了而已，霸占的空间已然存在，他会引起浏览器的重绘。

使用HTML5中的新增属性hidden=”hidden”，不会占有原来的位置。

7.浏览器标准模式和怪异模式之间的区别

在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染，而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式；如果存在一个完整的`DOCTYPE`则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。

其区别如下：

（1）盒模型：
在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C 盒模型，在 IE 盒模型中：

box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom。

而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。

（2）图片元素的垂直对齐方式:

对于inline元素和table-cell元素，在 IE 标准模式下 vertical-align 属性默认取值为baseline。而当inline元素的内容只有图片时，如table的单元格table-cell。在 IE 怪异模式 下，table单元格中的图片的 vertical-align 属性默认为bottom，因此，在图片底部会有几像素的空间。

（3）<table>元素中的字体:

CSS 中，描述font的属性有font-family，font-size，font-style，font-weigh,上述属性都是可以继承的。而在 IE 怪异模式 下，对于table 元素，字体的某些属性将不会从body或其他封闭元素继承到table中，特别是 font-size属性。

（4） 内联元素的尺寸:

在 IE标准模式 下，non-replaced inline 元素无法自定义大小，而在 IE 怪异模式下，定义这些元素的width和height 属性，能够影响该元素显示的大小尺寸。

（5） 元素的百分比高度:

• CSS 中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值。如果包含块的高度没有显式给出，该值等同于“auto”（即取决于内容的高度）。所以百分比的高度必须在父元素有声明高度时使用。
• 当一个元素使用百分比高度时，在 IE 标准模式下，高度取决于内容的变化，而在 怪异模式 下，百分比高度则被正确应用。

（6） 元素溢出的处理：

在 IE 标准模式下，overflow取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 怪异模式下，该溢出被当做扩展box来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。