1．常用哪几种浏览器测试？有哪些内核(Layout Engine)?
浏览器：IE，Chrome，FireFox，Safari，Opera。
内核：Trident，Webkit–>blink，Gecko，Webkit，Presto。
2．说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）
行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
兼容性：display:inline-block;display:inline;zoom:1;
3．行内元素有哪些？块级元素有哪些？空(void)元素有那些？CSS的盒模型？
行内元素有：a b span I img input select strong(input用于定义表单中的各个具体的表单元素)
块级元素有：div ul ol li dl dt dd
空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、img
盒模型：margin border padding content
4．前端页面由哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层、表现层、行为层。
网页的结构层：由HTML 或XHTML 之类的标记语言负责创建，即HTML的语义化。说白了就是一些标签；
网页的表现层：就是CSS；
网页的行为层：就是Javascript 语言和DOM 主宰的领域。
5． 清除浮动有哪些方式？比较好的方式是哪一种？
（1）父级div定义height( 父级固定高度 )。
（2）结尾处加空div标签添加clear:both属性。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签添加clear:both。
比较好的是第3种方式，好多网站都这么用。
6．box-sizing常用的属性有哪些？分别有什么作用？
box-sizing: content-box|border-box|inherit;
content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
7．Doctype作用？标准模式与兼容模式各有什么区别?
1、告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2、标准模式的排版和JS运作模式都是以该浏览器 支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
8．你知道多少种Doctype文档类型？
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
9．HTML5 为什么只需要写<!DOCTYPE html> ？
HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
10．页面导入样式时，使用link和@import有什么区别？
1．link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
2．页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3．import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
4．link支持使用Javascript控制DOM去改变样式；而@import不支持
11．简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
12．介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
1、渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
2、JS引擎则：解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
13．html5有哪些新特性？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
1．绘画 canvas;
2．用于媒介回放的 video 和 audio 元素;
3．本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
4．sessionStorage 的数据在浏览器关闭后自动删除;
5．语义化更好的内容元素，比如 article、footer、header、nav、section;
6．表单控件，calendar、date、time、email、url、search;
7．新的技术webworker, websocket, Geolocation;
14．CSS3有哪些新特性？
1．CSS3的选择器
\1) E:last-child 匹配父元素的最后一个子元素E。
\2) E:nth-child(n)匹配父元素的第n个子元素E。
\3) E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
2．@Font-face 特性
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件， 让客户端显示客户端所没有安装的字体。
3．圆角：border-radius: 15px;
4．阴影（Shadow）
5．多列布局 （multi-column layout）：
兼容性不好，还不够成熟。还不能用在实际项目中。
6．CSS3 的渐变效果 ：
-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
7．css弹性盒子模型
8．CSS3制作特效
\1) Transition 对象变换时的过渡效果
\2) Transforms 2D转换效果
\3) Animation动画特效
15．css选择器有哪些，选择器的权重的优先级
一、选择器类型
1．ID #id
2．class .class
3．标签 p
4．通用 *
5．属性 [type=“text”]
6．伪类 ：hover
7．伪元素 ::first-line
8．子选择器、相邻选择器
二、权重计算规则
1．第一等：代表内联样式，如: style=””，权值为1000。
2．第二等：代表ID选择器，如：#content，权值为0100。
3．第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4．第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5．通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6．继承的样式没有权值。
16．简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
17．对BFC规范的理解？
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
BFC触发条件：
1．根元素，即html
2．float的值不为none（默认）
3．position的值为absolute或fixed
4．overflow的值不为visible（默认）
5．display的值为inline-block、table-cell、table-caption
BFC特性：
1．内部的Box会在垂直方向上一个接一个放置。
2．Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
3．每个元素的margin box 的左边，与包含块border box的左边相接触。
4．BFC的区域不会与float box重叠。（可用于清浮动）
5．BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6．计算BFC的高度时，浮动元素也会参与计算。
18．CSS中哪些属性不可以从父元素继承
例如border（边框）、margin（边距）、padding（补白）和背景
19．CSS Sprite是什么，谈谈这个技术的优缺点
CSS Sprite其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行定位。
CSS Sprites能减少图片的字节，加快网页的加载速度。
缺点是开发和维护都是比较麻烦的。
20．HTML与XHTML——二者有什么区别
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“--”
8.图片必须有说明文字
21．xml和json的区别，请用四个词语来形容
1．JSON相对于XML来讲，数据的体积小，传递的速度更快些
2．JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
3．XML对数据描述性比较好；
4．JSON的速度要远远快于XML
22．document.write和innerHTML的区别：
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
23．display:none和visibility:hidden区别？
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
24．怎么让Chrome支持小于12px 的文字？
谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？
针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！
font-size:10px;-webkit-transform:scale(0.8);
25．css实现图片自适应宽高
img { max-width: 100%; max-height: 100%; }
26．1rem、1em、1vh、1px各自代表的含义？
rem：rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em：子元素字体大小的em是相对于父元素字体大小，元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh：全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
px：px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
27．画一条0.5px的直线？
height: 1px;
transform: scale(0.5);
28．画一个三角形？
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /*顺时针旋转90°*/29．如何实现一个最大的正方形
用 padding-bottom 撑开边距：
section {
width:100%;
padding-bottom: 100%;
background: #333;
}
