前端面试（一）

HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

2.行内元素和块元素分别有哪些，怎么相互转换。

块级元素：div, p（段落）, form（表单）, ul（无序列表）, li（列表项）, ol（有序列表）, dl（定义列表）, hr（水平分割线）, menu（菜单列表）, table（表格）...h1-h5

特点：

 1、块级元素会独占一行，其宽度自动填满其父元素宽度。

 2、可以设置width,height属性。（即使设置了宽度，也是独占一行的，除非用float属性等特殊情况）

 3、可以设置margin(外边距)和padding(内边距)。

行内元素: a b i span , strong, em, br, img, input, label, select, textarea...

特点：

 1、行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化（其宽度由内容撑开）。

 2、设置width,height属性无效。

 3、水平方向上的padding-left,padding-right,margin-left,margin-right产生边距效果，但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生效果。

可变元素--可变元素为根据上下文语境决定该元素为块元素或者内联元素

Button, del (定义文档中已被删除的文本),iframe,ins,map,object,script

转换方式

（1）display

     块级元素和行内元素的基本差异是块元素一般从新行开始，而当加入了css控制之后，这种属性差异就不成为差异了。

（a）给行内元素加上 display:block  这样的属性，让行内元素也有每次都从新行开始的属性。

（b）给块级元素加上 display:inline  这样的属性，让块级元素不具有从新行开始的属性。

 （c）给行内元素加上 display:inline-block 属性，仍为行内元素，但是可以设置width及height属性等。

（2）float

当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白，

（3）position

当为行内元素进行定位时，position:absolute，与position:fixed。都会使原先的行内元素变为块级元素。

3 CSS盒子模型

css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素.盒子模型包括IE盒子模型和标准的W3C盒子模型.

从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度：左右margin+左右border+左右padding+width

IE盒子模型的盒子宽度：左右margin+width

在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，

box-sizing：border-box表示IE盒子模型。默认的情况下是标准盒子模型，仔细观察一下两张图就可以看出他们之间的区别了：

（1）    第一张是标准的盒子模型：

（1）    第二张是IE盒子模型：

4.CSS引入的方式有哪些? link和@import的区别是?

4种：内联 内嵌 外链 导入(指的是使用 CSS 规则引入外部 CSS 文件)

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

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

6.CSS选择符有哪些?哪些属性可以继承?
标签选择符 类选择符 id选择符

一、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐       text-decoration：规定添加到文本的装饰        text-shadow：文本阴影效果       white-space：空白符的处理   unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性

font：组合字体   font-family：规定元素的字体系列    font-weight：设置字体的粗细    font-size：设置字体的尺寸       font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进    text-align：文本水平对齐    line-height：行高    text-transform：控制文本大小写     direction：规定文本的书写方向

word-spacing：增加或减少单词间的空白（即字间隔）      letter-spacing：增加或减少字符间的空白（字符间距）    color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

1、元素可见性：visibility              2、光标属性：cursor

四、内联元素可以继承的属性

1、字体系列属性                            2、除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1、text-indent、text-align

7.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
IE(Trident)火狐（Gecko） 谷歌（webkit） opear(Presto)

10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

11.描述css reset，sprites的作用和用途。
Reset      重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

12.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式

13.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并,文件最小化/文件压缩,使用CDN托管,缓存的使用

16.什么是语义化的HTML?

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
1.语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
4.支持多终端设备的浏览器渲染。

17.清除浮动的几种方式，各自的优缺点
详见链接，8种方式的优缺点。http://www.5icool.org/a/201211/a1661.html

18CSS 伪类

详见连接http://www.w3school.com.cn/css/css_pseudo_classes.asp

19 HTML5 中的新特性

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

20前端开发，火狐浏览器常用的插件

Firebug

JS View

JS View 不像上面的 Firebug 那样大名鼎鼎，但事实上，这几乎算是除了Firebug 之外前端开发人员使用得最频繁的一款插件，装上它之后，开发者可以非常方便地查看当前网站引用了哪些JS 文件和CSS 文件，查看这些文件的内容，获取地址都是非常方便的事情，另外JS View 还加强了Firefox本身“查看源代码”的功能，非常值得试一试。

HTML Validator

这个插件不用多介绍了，提供当前页面的 HTML验证结果（本地验证），非常的简洁、直观。

Regular Expressions Tester

一款强大的正则表达式测试工具，不仅可以帮助开发人员编写正则，还可以方便地进行存储，以后用到就不用再绞尽脑汁了。

ColorZilla

想从页面上提取颜色？用 ColorZilla再方便不过了，并且对提取到的颜色提供了各种色彩表达方式的复制，实用！

Firesizer

Firesizer用来快速将浏览器调整到指定的尺寸，这样开发人员可以模拟页面在不同分辨率下的表现，这款插件预设了几种尺寸，包括800*600 ，1024*768，当然也可以进行自定义设置。