简述弹性盒子 flex 布局及 rem 布局？（必会）
rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root
html{font-size:10px} 则 2rem=20px
通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html
字体的大小
适配方案步骤：
1、首先动态计算 html 的 font-size
2、将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根
据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-size 大小）
important 的作用？（必会）
!important，作用是提高指定样式规则的应用优先权（优先级）。语法格式
{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}。
在 CSS 中，通过对某一样式声明! important ，可以更改默认的 CSS 样式优先级规则， 使
该条样式属性声明具有最高优先级
浏览器识别
ie7 及 ie7+,firefox,chrome 等浏览器下，已经可以识别 !important 属性， 但是 IE
6.0IE6 及更早浏览器下仍然不能完全识别。important 的样式属性和覆盖它的样式属性单
独使用时(不在一个{}里)，IE 6.0 认为! important 优先级较高，否则当含! important 的样
式属性被同一个{}里的样式覆盖时，IE 6.0 认为! important 较低
如何解决 margin"塌陷"？（必会）
外边距塌陷共有两种情况：
第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给
margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况
的方法为：两个外边距不同时出现
第二种情况：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生
上边距，父子元素会进行粘连，决绝这种情况的方法为：父级添加一个 css 属性，overflow：
hidden，禁止超出
外边距重叠就是 margin-collapse
解决方案：
1、为父盒子设置 border，为外层添加 border 后父子盒子就不是真正意义上的贴合（可
以设置成透明：border：1px solid transparent）；
2、为父盒子添加 overflow：hidden；
3、为父盒子设定 padding 值；
4、为父盒子添加 position：fixed；
5、为父盒子添加 display：table；
6、利用伪元素给父元素的前面添加一个空元素
什么是外边距重叠？重叠的结果是什么？
外边距重叠
外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距
的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界
宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果
没有正边界，则从零中减去绝对值最大的负边界。只有外边距才可以是负值，内边距不允
许为负值
在 CSS 中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方
式被称为折叠，并且因而所结合成的外边距称为折叠外边距
重叠情况
1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
3、两个外边距一正一负时，折叠结果是两者的相加的和
4、外边距不重叠的情况
水平 margin 永远不会重合
设置了 overflow 属性(visible 除外)的元素和它的子元素之间的 margin 不会重叠
设置了绝对定位（position:absolute）的盒模型，垂直 margin 不会被重叠，和子元素之 间
也不重叠
设置了 display:inline-block 的元素，垂直 margin 不会重叠，和子元素之间也不重叠
根元素(如 html)与 body 的 margin 不会重叠
5、防止外边距重叠的方法
元素绝对定位 postion:absolute;一般用在内层元素
内层元素 加 float:left;或 display:inline-block;
外层元素用 padding 增加边距
外层元素设置 overflow:hidden;
内层元素透明边框 border:1px solid transparent;
HTML5 的 input 增加哪些 type？（必会）
在 HTML5 中，为 input 元素新增了以下一些 type 属性值，用来丰富文本框的类型。
color：用于指定颜色的控件 dao
date：用于输入日期的控件（年，月，日，不包括时间）
datetime：基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）
datetime-local：用于输入日期时间控件，不包含时区
email：用于编辑 e-mail 的字段
month：用于输入年月的控件，不带时区
number: 用于输入浮点数的控件
range：用于输入不精确值控件
search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除
tel：用于输入电话号码的控件
time：用于输入不含时区的时间控件
url：用于编辑 URL 的字段
week：用于输入一个由星期-年组成的日期，日期不包括时区
30、雪碧图 （ 精灵图 ）？（必会）
雪碧
是把网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的 HTTP 请求数
量，该图片使用 css background 和 background-position 属性渲染，这也就意味着你的
标
签变得更复杂了，图片是在 css 中定义，并非在<img>标签中
优点：
1、减少网页的 http 请求，从而加快了网页加载速度，提高用户体验
2、减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会
共用同一个头信息，从而减少了字节数
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需
要对每一个小元素进行命名
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就
可以改变
缺点：
1、在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
2、CSS Sprites 在开发的时候，要通过 photoshop 或其他工具测量计算每一个背景单元
的精确位置
3、在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片
4、精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，CSS3 新属性
可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标
代替精灵图
less 和 Scss 的配置使用以及特点？（必会）
less
安装依赖
1 npm install less less-loader --save
或者
2 cnpm install less less-loader --save
修改配置
在 vue 项目中 build/webpack.base.conf.js：
moduls 对象的 rules 数组中最后添加
{
test: /\.less/,
loader: "style-loader!css-loader!less-loader"
}
**引入**
在每个想要使用 less 的 vue 文件中
style 加上 lang="less"
1 \