面试题
1.在做前端开发的时候，你一般会碰到什么问题，你是怎么解决的？
2.你会怎么把一张平面图转成静态页面的，这个过程需要注意一些什么问题？
兼容性问题
1.1 低版本IE不支持HTML5
1.2 IE9以下不支持媒体查询
1.3 Reset CSS
3.对Bootstrap 了解吗？
2.1 Bootstrap 中12栅格化是怎么实现的
宽度百分比，float，媒体查询
2.2 Bootstrap 中每个栅格化容器的内边距分别是多少？
左右内边距 15px
2.你会怎么把一张平面图转成静态页面的，这个过程需要注意一些什么问题？
兼容性问题
1.1 低版本IE不支持HTML5
1.2 IE9以下不支持媒体查询
1.3 Reset CSS
3.对Bootstrap 了解吗？
2.1 Bootstrap 中12栅格化是怎么实现的
宽度百分比，float，媒体查询
2.2 Bootstrap 中每个栅格化容器的内边距分别是多少？
左右内边距 15px
2.3 Bootstrap 中怎么处理栅格化中第一个和最后一个元素的内边距问题
.row 左右外边距 -15px
2.4 Bootstrap 插件，为什么不用写一行 JavaScript 代码就能用？
data属性
4.CSS选择器的优先级是什么，怎么处理样式冲突的问题？
.row 左右外边距 -15px
2.4 Bootstrap 插件，为什么不用写一行 JavaScript 代码就能用？
data属性
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}4.CSS选择器的优先级是什么，怎么处理样式冲突的问题？
id > class | 伪类 | 属性选择器 > 标签类型 | 伪对象 > 通配符
伪类 :hover
伪对象 :first-child
伪类 :hover
伪对象 :first-child
5.怎么做响应式布局？
响应式三大要素：流体栅格、弹性图像、媒体查询
7.1 怎么实现流体栅格？
clearfix , float , 宽度百分比 ，媒体查询 @media (max-width: 767px) { ... }
7.2 弹性图像的代码应该怎么写？
.img-responsive{
display: block;
max-width: 100%;
height: auto;
}
7.3 怎么处理 IE9 以下浏览器不支持媒体查询？
respond.js [rɪ'spɒnd]
6.box-sizing有什么用，怎么用？
定义盒模型的尺寸解析方式。
content-box（默认值）：元素宽/高=边框+内边距+内容的宽/高
border-box：内容宽/高=盒子的宽/高 - 边框 - 内边距
inherit：元素继承父元素的盒模型模式
7.%，em，rem 的区别是什么，使用时需要注意一些什么问题？
%，em，rem都是度量单位，
区别：
%：相对于父元素的尺寸计算的
em：相对于自身元素的字体尺寸计算的（继承的层级过多，不方便预知子元素的实际字体大小）
body { font-szie:16px; }
.container { font-size:0.8em; }
.inner{ font-size:0.8em; }
<body>
<div class="container ">
字体大小 16px × 0.8
<div class="inner">
字体大小 16px × 0.8 × 0.8
</div>
</div>
</body>
rem：相对于根元素的字体大小来计算的 （IE9以下不支持）
8.怎么提高CSS和JS的性能？
CSS：使用高效的CSS选择器；CSS相关的图片处理（雪碧图）；减少CSS的代码量。
JS：加快 js 文件的加载速度（js 文件引入代码写在 body 结束标签之前）；多次用到的DOM对象，提取出来赋值给DOM变量，然后再对DOM变量进行操作。
CSS文件和JS都进行压缩合并，减少HTTP请求
9.ajax有什么用，.怎么用，需要注意一些什么问题？
GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST反之。
9.1.怎么解决ajax中的缓存问题？
GET方式传递，url?t=new Date()
9.2.怎么防止ajax的重复提交问题？
提交后，按钮设置为不可用
9.3 中文乱码问题？
6.box-sizing有什么用，怎么用？
定义盒模型的尺寸解析方式。
content-box（默认值）：元素宽/高=边框+内边距+内容的宽/高
border-box：内容宽/高=盒子的宽/高 - 边框 - 内边距
inherit：元素继承父元素的盒模型模式
7.%，em，rem 的区别是什么，使用时需要注意一些什么问题？
%，em，rem都是度量单位，
区别：
%：相对于父元素的尺寸计算的
em：相对于自身元素的字体尺寸计算的（继承的层级过多，不方便预知子元素的实际字体大小）
body { font-szie:16px; }
.container { font-size:0.8em; }
.inner{ font-size:0.8em; }
<body>
<div class="container ">
字体大小 16px × 0.8
<div class="inner">
字体大小 16px × 0.8 × 0.8
</div>
</div>
</body>
rem：相对于根元素的字体大小来计算的 （IE9以下不支持）
8.怎么提高CSS和JS的性能？
CSS：使用高效的CSS选择器；CSS相关的图片处理（雪碧图）；减少CSS的代码量。
JS：加快 js 文件的加载速度（js 文件引入代码写在 body 结束标签之前）；多次用到的DOM对象，提取出来赋值给DOM变量，然后再对DOM变量进行操作。
CSS文件和JS都进行压缩合并，减少HTTP请求
9.ajax有什么用，.怎么用，需要注意一些什么问题？
GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST反之。
9.1.怎么解决ajax中的缓存问题？
GET方式传递，url?t=new Date()
9.2.怎么防止ajax的重复提交问题？
提交后，按钮设置为不可用
9.3 中文乱码问题？
10.接触过哪些动态语言?
11.JS中变量有没有加var声明符的区别是什么？
12.用JS写一个重载的例子。
arguments.length
13.如何处理HTML5和CSS3浏览器的兼容问题
1.1 html5shiv 框架让低版本IE支持HTML5
1.2 Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。
1.3 IE浏览器检测，提示升级
1.4 条件注释
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
1.5 Normalize ['nɔ:məlaɪz]
1.5 Normalize ['nɔ:məlaɪz]
14.你用过 CSS 3 中的哪些特性
圆角、阴影、渐变、变换、动画、媒体查询
15.LESS和SASS
CSS 预处理语言，都可以实现变量、运算、混入（Mixin）、函数、继承、嵌套等功能，大大简化了 CSS 编写和维护的难度
好处：
1.1 定义变量: @LESS $SASS
1.2 重复代码
1.3 计算问题
1.4 作用域和命名空间
SASS 扩展库 Compass
1.1 前缀兼容性代码
1.2 Reset
1.3 简化常用 CSS 样式
1.4 提供常用函数
1.5 提供栅格系统和一些简单的布局样式
16.移动优先的设计
渐进增强和优雅降级
浙公网安备 33010602011771号