前端面试题

前端常见面试题：

rgba()和opacity的透明效果有什么不同？

opacity作用于元素，以及元素内的所有内容的透明度。

rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果）

rgba和opacity的效果对比

SASS、LESS是什么？大家为什么要使用它们？

它们是CSS预处理器。它是CSS上的一种抽象层。它们是一种特殊的语法/语言编译成CSS。

例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数。LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

为什么要使用它们？

1. 结构清晰，便于扩展。

2. 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

3. 可以轻松实现多重继承。

4. 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

CSS中link和@import的区别是？

Link属于html标签，而@import是CSS中提供的。

在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS。

@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题。

Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异。初始化CSS会对搜索引擎优化造成小影响。

HTML与XHTML有什么区别？

1. 所有的标记都必须要有一个相应的结束标记

2. 所有标签的元素和属性的名字都必须使用小写

3. 所有的 XML 标记都必须合理嵌套

4. 所有的属性必须用引号 “” 括起来

5. 把所有 < 和 & 特殊符号用编码表示

6. 给所有属性赋一个值

7. 不要在注释内容中使用 “–”

8. 图片必须有说明文字

谈谈你对web标准及w3c的理解与认识。

标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率，使用外链css和js脚本，结构行为表现的分离，页面下载与加载速度更快，内容能被更多的用户和更广泛的设备访问，更少的代码和组件，容易维护，改版方便，不需要改变页面内容，提供打印版不需要复制页面内容，提高网站的易用性。

行内元素有哪些，块级元素有哪些，css的盒模型包括什么？

行内元素：span input b u i s select

块级元素：div p h1-h6 form ul

css盒模型：内容content + 内边距padding + 边框border + 外边距 margin

列出display的值，说明它们的作用。position的值，relative和absolute的定位原点分别是？

display：

inline：按照行内元素样式显示

block：按照块级元素样式显示

inline-block：按照行内块级元素样式显示

none：隐藏元素

position：

static：静态定位，默认值，标准流中的元素都是静态定位

relation：相对定位，相对于原来的位置移动，依然占据着原来的位置

absolute：绝对定位，若元素没有父元素，或者父元素没有定位，则相对body定位，若父元素有定位（非static），则相对父元素定位，绝对定位的元素脱离标准流

fixed：固定定位，相对浏览器边框定位，固定定位的元素也脱离标准流

清除浮动有哪些方法？

1. 额外标签法（会增加标签，一般不用）：在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，以此来清除浮动。

2. 使用overflow:hidden属性：找到浮动盒子的父元素，给它添加overflow:hidden属性，即可清除浮动的影响。（一般也不用此方法清除浮动，因为溢出的元素会被隐藏）

3. 使用伪元素清楚浮动：

.clearfix:after{content:’’;height:0;line-height:0;display: block;overflow: hidden;clear: both;}