前言
内容都是东拼西凑的。我把格式调整一下，易于阅读。有的内容也更改了一下，更易于理解。
同时部分内容也许会有错误，我发现会及时更改。如果你有更好的解决方案你可以通过邮件和我一起探讨。
正文
HTML+CSS部分
1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?
行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素
块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；
行元素转换为块级元素方式：display：block；
2.将多个元素设置为同一行?清除浮动有几种方式?
将多个元素设置为同一行：float，inline-block
清除浮动的方式：
方法一：添加新的元素 、应用 clear：both；
方法二：父级div定义 overflow: hidden；
方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
我记得慕课网有关于张鑫旭大神的系列视频，感兴趣可以去看看。
3.怪异盒模型box-sizing？弹性盒模型|盒布局?
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。
产生的原因？
当不对doctype进行定义时，会触发怪异模式。
概念模糊的同学，去网上更详细了解一下。
4.简述几个css hack?
1）图片间隙
在div中插入图片，图片会将div下方撑大3px。
hack1：将div与img写在同一行。
hack2：给img添加display：block；
dt li 中的图片间隙。
hack：给img添加display：block；
2）默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
hack1：给元素添加：font-size：0；
hack2：声明：overflow：hidden；
表单行高不一致
hack：给表单添加声明：float：left；height： ；border： 0；
鼠标指针
hack：若统一某一元素鼠标指针为手型：cursor：pointer；
当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状
hack1：给a加display：inline-block；
hack2：给li加float：left；
测试时注意Jquery的height属性是不计算border和padding的。
5.link import两者之间区别?
1) link属于html标签，而@import是css提供的。
2) 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
3) link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
4) link方式样式的权重高于@import的。
6.href和src区别?title和alt?
href (Hypertext Reference)指定网络资源的位置（超文本引用），从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在 link和a 等元素上使用。
src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html标签，又是html属性，title作为属性时，用来为元素提供额外说明信息.
alt：alt是html标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息.
7.transform？animation？区别?animation-duration?
Transform:它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。
Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.
animation-duration：规定完成动画所花费的时间周期，以秒或毫秒计。
8.nth-of-type | nth-child?
|
|
建议一般使用nth-of-type，不容易出问题。
这个确实，我记得我以前还遇到过这个问题，嘿嘿，你呢？
9. :before 和 ::before 区别?
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
10.如何让一个div 上下左右居中?
我想这个网上一搜一大堆的。我记得以前我也总结过。现在比较方便的使用flex布局来做吧。有关flex布局的学习内容可以去阮老师的博客里看一下，很全面。
|
|
后面这种我经常用。~~
11.css2.0 和css3.0
css3加强了css2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了（columns之类的属性）。在效果方面加入了更多的效果(圆角，动画之类的)，还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好，只有一些高级版本的浏览器支持。
12.弹性盒子模型?flex|box区别?
答：（1）引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
（2）flex和box的区别:
display：box 是老规范，要兼顾古董机子就加上它；
父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。
flex是最新的，董机老机子不支持的；
父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。
Android UC浏览器只支持display: box语法；而iOS UC浏览器则支持两种方式。
不过对于UC浏览器，网上又很多的解决方案。github上有人写了一个关于兼容各种设备的flexCSS方法。地址：https://github.com/lzxb/flex.css
13. viewport的所有属性
1）width :设置layout viewport的宽度，为一个正整数，或字符串’device-width’;
2）initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
3）minimun-scale:允许用户的最小缩放值，一个数字，可以带小数。
4）maximum-scale:允许用户的最大缩放值，一个数字，可以带小数。
5）height:设置layout viewport的高度，这个属性对我们并不重要，很少使用。
6）user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’。
7）target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
target-densitydpi 这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素。特别说明的是，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。因为这个属性只有安卓支持，并且安卓已经决定要废弃 target-densitydpi 这个属性了，尽量避免使用这个属性。
关于viewport，在慕课网专门有个教程专门介绍的这个，有兴趣去看看。
14.如何理解HTML结构的语义化？
所谓标签语义化，就是指标签的含义。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，对搜索引擎友好，有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少的功夫，而且可维护性更高，因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO重要的一步。
15. 伪类选择器和伪元素？c3中引入的伪类选择器有？c3中伪元素有?
伪类选择器：
由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
伪元素选择器：
并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器；
c3中引入的伪类选择器：
:root()选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html。:root选择器等同于html元素。
:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
:nth-child()选择某个元素的一个或多个特定的子元素。
:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素
:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。
:only-child表示的是一个元素是它的父元素的唯一一个子元素。
:first-line为某个元素的第一行文字使用样式。
:first-letter 为某个元素中的文字的首字母或第一个字使用样式。
:before 在某个元素之前插入一些内容。
:after 在某个元素之后插入一些内容。
c3中伪元素：
::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用，见过最多的就是清除浮动
::selection用来改变浏览网页选中文的默认效果
16.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
- HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
- IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
如何区分： DOCTYPE声明\新增的结构元素\功能元素
17.常见兼容性问题？
1) 浏览器默认的margin和padding不同。解决方案是加一个全局的{margin:0;padding:0;}来统一。
2) IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
3)IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
4)Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
5)超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
6)怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用html5推荐的写法：<doctype html>
7)上下margin重合问题
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
ps:多说一下上下重叠的几种情况:
a:普通模式中，俩个或多个块级元素相邻的垂直变，会重合。如果边距都为正数，那么取最大的。如果出现负边距，用正边距减去负边距。
b:一个浮动框和其它框之间不会重叠。
c:绝对定位的和相对定位的，边距不会重合。
18.简述前端优化的方式 旧的雅虎34条|h5新添加的方式
1、尽量减少HTTP请求次数
2、减少DNS查找次数
3、避免跳转
4、可缓存的AJAX
5、推迟加载内容
6、预加载
7、减少DOM元素数量
8、根据域名划分页面内容
9、使iframe的数量最小
10、不要出现404错误
11、使用内容分发网络
12、为文件头指定Expires或Cache-Control 13、Gzip压缩文件内容
14、配置ETag
15、尽早刷新输出缓冲
16、使用GET来完成AJAX请求
17、把样式表置于顶部
18、避免使用CSS表达式（Expression）
19、使用外部JavaScript和CSS
20、削减JavaScript和CSS
21、用代替@import
22、避免使用滤镜
23、把脚本置于页面底部
24、剔除重复脚本
安全
1.四次握手阶段详细过程
1)客户端发出请求（ClientHello）
（1） 支持的协议版本，比如TLS 1.0版。
（2） 一个客户端生成的随机数，稍后用于生成”对话密钥”。
（3） 支持的加密方法，比如RSA公钥加密。
（4） 支持的压缩方法。
2)服务器回应（SeverHello）
（1） 确认使用的加密通信协议版本，比如TLS 1.0版本。如果浏览器与服务器支持的版本不一致，服务器关闭加密通信。
（2） 一个服务器生成的随机数，稍后用于生成”对话密钥”。
（3） 确认使用的加密方法，比如RSA公钥加密。
（4） 服务器证书。
3)客户端回应
（1） 一个随机数。该随机数用服务器公钥加密，防止被窃听。
（2） 编码改变通知，表示随后的信息都将用双方商定的加密方法和密钥发送。
（3） 客户端握手结束通知，表示客户端的握手阶段已经结束。这一项同时也是前面发送的所有内容的hash值，用来供服务器校验。
4)服务器的最后回应
（1）编码改变通知，表示随后的信息都将用双方商定的加密方法和密钥发送。
（2）服务器握手结束通知，表示服务器的握手阶段已经结束。这一项同时也是前面发送的所有内容的hash值，用来供客户端校验。
这个四次握手内容来源来自阮一峰老师的SSL/TLS协议运行机制的概述。
（未完待续）