1. 自我介绍
2. 项目介绍
3. CSS
1）介绍一下css盒模型
盒模型基本成了面试必问的问题。有W3C的盒模型和IE浏览器下的盒模型，盒模型从外到里包括：margin、border、padding、content。
（1）W3C盒模型的宽度 = content的宽度
（2）IE盒模型的宽度 = border+padding+content的宽度
2）CSS 的选择符种类
2.1 标签选择器（如：body,div,p,ul,li）
2.2 类选择器（如：class=”head”,class=”head_logo”）
2.3 ID选择器（如：id=”name”,id=”name_txt”）
2.4 全局选择器（如：*号）
2.5 组合选择器（如：.head .head_logo,注意两选择器用空格键分开）
2.6 继承选择器（如：div p,注意两选择器用空格键分开）
2.7 伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
2.8 字符串匹配的属性选择符(^ $ *三种。分别相应開始、结尾、包括)
3）CSS3了解吗
3.1 Word-wrap & Text-overflow 样式
（1）设置word-wrap: break-word的话，在单词换行的情况下，可保持单词的完整性。与 word-wrap 是协同工作的，word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行
（2）text-overflow 则设置或检索当当前行超过指定容器的边界时怎样显示, 我们在父容器设置overflow: hidden,然后设置“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。"clip"表示直接分割。"ellipsis"表示用省略号取代。
3.2 文字渲染（Text-decoration）
（1）Text-fill-color: 文字内部填充颜色
（2）Text-stroke-color: 文字边界填充颜色
（3）Text-stroke-width: 文字边界宽度
3.3 CSS3 的多列布局（multi-column layout）
（1）Column-count：表示布局几列。
（2）Column-rule：表示列与列之间的间隔条的样式
（3）Column-gap：表示列于列之间的间隔
3.4 边框和颜色（color, border）
支持rgba和hsl表示颜色, 支持圆角。阴影等效果
3.5 CSS3 的渐变效果（Gradient）
支持线性渐变和径向渐变
3.6 CSS3 的阴影（Shadow）和反射（Reflect）效果
阴影效果，阴影效果既可用于普通元素，也可用于文字
3.7 CSS3 的背景效果
（1）Background Clip：该属确定背景画区
（2）Background Origin：用于确定背景的位置，通常与 background-position 联合使用，您能够从 border、padding、content 来计算 background-position
（3）Background Size：经常使用来调整背景图片的大小，注意别和 clip 弄混。这个主要用于设定图片本身
（4）Background Break：CSS3 中，元素能够被分成几个独立的盒子，如使内联元素 span 跨越多行
（5） background-break：用来控制背景怎样在这些不同的盒子中显示
（6）多背景图片支持
3.8 CSS3 的盒子模型
display: -webkit-box; display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
（1）“display: -webkit-box; display: -moz-box;”针对 webkit 和 gecko 浏览器定义了该元素的盒子模型
（2）“-webkit-box-orient: horizontal;”。他表示水平排列的盒子模型。假设配合元素的box-flex属性：
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
.flex2 {
-webkit-box-flex: 2;
}
水平方向设下的宽度。就能够依照1:2的比例关系自己主动去计算了
3.9 CSS3 的 Transitions, Transforms 和 Animation
（1）Transitions
transition-property：用于指定过渡的性质。比方 transition-property:backgound 就是指 backgound 參与这个过渡
transition-duration：用于指定这个过渡的持续时间
transition-delay：用于制定延迟过渡的时间
transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
（2）Transforms
指拉伸。压缩，旋转，偏移等等一些图形学里面的基本变换
（3）Animation
定义动画。CSS3 动画差点儿支持全部的 style 变化，能够定义各种各样的动画效果以满足我们用户体验的须要
4）有一个元素定高定宽，怎样让元素垂直和水平居中
position设为absolute，top和left各为50%。margin-top为高度的负一半，margin-left为宽度的负一半
//关键代码
div {
position: absolute;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
- 将元素设置为 display:none 后，元素在页面上将彻底消失。不再占用空间，也就是说它会导致浏览器的重排和重绘
- 将元素设置为 visibility:hidden 后，在页面消失后。其占领的空间依然会保留着，所以它仅仅会导致浏览器重绘而不会重排
6）position的几个属性：static、relative、absolute、fixed、inherit，讲讲详细是什么意思
属性 | 描写叙述 |
static | 默认值。忽略 top, bottom, left, right和z-index |
relative | 生成相对定位的元素，相对于其正常位置定位。元素的位置通过left, right, top, bottom进行规定 |
absolute | 生成绝对定位的元素。相对于static定位以外的第一个父元素进行定位。元素的位置通过left, right, top, bottom进行规定 |
fixed | 生成绝对定位的元素，相对于浏览器窗体进行定位。元素的位置通过left, right, top, bottom进行规定 |
inherit | 从父元素继承该属性的值 |
7）有没有做过移动端的开发
没有做过移动端的开发，使用过BootStrap。知道H5能够做移动端的开发。实际项目中临时没实用到
8）有没有写过移动端的样式
没有
9）em这个单位知道吗
（1）em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置。则相对于浏览器的默认字体尺寸。
（2）任意浏览器的默认字体高都是16px。全部未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，须要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说仅仅须要将你的原来的px数值除以10。然后换上em作为单位即可了
（3）em的值并非固定的。em会继承父级的元素中的字体大小。很多其它能够參考 javascript:void(0)
4. HTML
1）谈谈对html语义化的理解
（1）HTML 在刚開始设计出来的时候就是带有一定的「语义」的。包括段落、表格、图片、标题等等，HTML 规范一直在往语义化的方向上努力。很多元素、属性在设计的时候，就已经考虑了怎样让各种用户代理甚至网络爬虫更好地理解 HTML 文档。
（2）HTML5 在之前规范的基础上。将语义描写叙述进行了改动或者删除。添加了不少能够表达更丰富语义的元素。比方nav，header。footer等，所谓语义本身就是对符号的一种共识。被认可的程度越高、范围越广，人们就越能够依赖它实现各种各样的功能。
2）随便列举一些html标签的语义
hr、br、strong、i、a、span、img、ul、ol、li、dl、dt、p、div等
3）ul和ol的差别
（1）ul 是无序列表，也就是说没有排列限制能够任意加 li；
（2）ol就序列表，会依照你写的li前后依次排列
（3）多说一句：dl是定义列表，会默认前后层级关系；
<dl>
<dt>我是头</dt>
<dd>我是内容</dd>
<dd>我是内容</dd>
</dl>
4）一个input元素，想关闭自己主动完成功能。怎么做，浏览器的特性
autocomplete = off
5）@import 闪屏的原因
@import属于CSS范畴。仅仅能载入CSS。必须是在 style 标签内，或者一个CSS文件里，而且是要在样式定义之前使用。 导入的外部样式定义会被文档中的定义覆盖，@import尽管写在样式表最前面，但浏览器解析的时候是最后才解析的，这样非常easy导致IE6中的闪屏或者在打开页面的过程中无样式直到页面载入完成才会载入样式的现象出现。
6）怎么让chrome支持小于12px的文字？
body{
-webkit-text-size-adjust:none;
}5. JavaScript
1）cookie、localStorage、sessionStorage 了解吗
（1） cookie 非常小，它的限制大小为4KB左右。主要用途有保存登录信息，通过在 Cookie 中存入一段辨别用户身份的数据来实现的
（2）localStorage 是 HTML5 标准中新添加的技术，用于实现本地化存储
（3）sessionStorage 与 localStorage 的接口相似。但保存数据的生命周期与 localStorage 不同。它仅仅是能够将一部分数据在当前会话中保存下来，刷新页面数据依然存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
2）这三种方式怎么选择使用
特性 | Cookie | localStorage | sessionStorage |
数据的生命期 | 一般由server生成，可设置失效时间。假设在浏览器端生成Cookie。默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
存放数据大小 | 4K左右 | 一般为5MB | 一般为5MB |
与server端通信 | 每次都会携带在HTTP头中。假设使用cookie保存过多数据会带来性能问题 | 仅在client（即浏览器）中保存，不參与和server的通信 | 仅在client（即浏览器）中保存，不參与和server的通信 |
易用性 | 须要程序猿自己封装，源生的Cookie接口不友好 | 源生接口能够接受，亦可再次封装来对Object和Array有更好的支持 | 源生接口能够接受。亦可再次封装来对Object和Array有更好的支持 |
（1）考虑到每一个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简，比較经常使用的一个应用场景就是推断用户是否登录。针对登录过的用户。server端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码。下次仅仅要读取这个值就能够推断当前用户是否登录啦。
以前还使用 Cookie 来保存用户在电商站点的购物车信息，现在使用 localStorage来保存。
（2）还有一方面 localStorage 接替了 Cookie 管理购物车的工作。同一时候也能胜任其它一些工作。比方HTML5游戏一般会产生一些本地数据，localStorage 也是非常适用的。
（3）不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。
使用它们的时候，须要时刻注意是否有代码存在 XSS 注入的风险。
因为仅仅要打开控制台，你就任意改动它们的值。也就是说假设你的站点中有 XSS 的风险。它们就能对你的 localStorage 肆意妄为。
所以千万不要用它们存储你系统中的敏感数据。
