常见小问题区别总结

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

来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。