1、H5 的新特性有哪些？C3 的新特性有哪些？
一、H5新特性：
1、语义化更好的标签(header、nav、aside、footer、article、section)；
2、表单控件，新增search、number、date、color、image、file、time、email；
3、自定义属性data-id；
4、本地存储：sessionStorage(浏览器关闭后自动删除)、localStorage(长期存储数据，浏览器关闭后数据不清除)；
5、新增媒体标签：audio、video
以上为常用的，此外不经常用的还有：canvas、地理API(Geolocation)、webSocket、拖拽Api(ondrop)。
二、C3新特性：
1、边框：border-radius，边框阴影：box-shadow(水平阴影、垂直阴影、模糊距离、阴影尺寸、阴影颜色、inset(从外层的阴影（开始时）改变阴影内侧阴影))
2、文字阴影：text-shadow（水平阴影、垂直阴影、模糊距离、阴影颜色）
3、颜色：新增GRBA、HLSA模式
4、2D转换、3D转换 transform(translate、rotate、scale)
5、弹性布局(flex布局)
6、盒子模型: box-sizing
7、过渡 : transition 可实现动画
8、媒体查询 @media screen and (width:800px){}
9、字体图标font-face
10、背景:background-size background-origin(背景原点、背景起始位置) background-clip(背景绘制区域:border-box|padding-box|content-box)
2、Localstorage、sessionStorage、cookie 的区别
相同点：
都是同源的，且存在于浏览器端。
不同点：
1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发往服务器端，仅在本地保存。此外，cookie还有路径(path)的概念，可以限制cookie只属于某一路径下。
2、存储大小限制不同。因为每次 http 请求都会携带 cookie、所以 cookie 只适合保存很小的数据，大小不能超过4K，比如可以存储会话标识。而sessionStorage和localStorage虽然也有大小限制，但是却比cookie大得多，可以达到5M或者更多。
3、数据有效期不同。sessionStorage仅在当前浏览器关闭前有效，localStorage在关闭浏览器后依然存在。cookie则是在设置的有效期过期前有效。
4、作用域不同。sessionStorage不在不同的浏览器窗口中共享，即使是同一页面，而localStorage和cookie则是在所有同源窗口中都是共享的。
3、如何使一个盒子水平垂直居中？
方法一、定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法二、利用 margin:auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法三、利用 display：flex;设置垂直水平都居中
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex; //父元素设置display：flex；
justify-content: center;
align-items: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
}
方法四、transform
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
4、如何垂直居中一个 img?
#container {
display:table-cell; //会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。
//同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。
text-align:center;
vertical-align:middle;
}
5、CSS 的盒模型
box-sizing:content-box; // border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)。总宽=width+padding+border+margin
box-sizing:border-box;//border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒 模型，总宽=width+margin
6、哪些是块级元素那些是行内元素，各有什么特点?
行内元素: a、span、b、img、strong、input、select、lable、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote、form
7、CSS 选择器有哪些?哪些属性可以继承?
CSS 选择器：
1、id 选择器（ # myid）
2、类选择器（.myclassname）
3、标签选择器（div, h1, p）
4、相邻选择器（h1 + p）
5、子选择器（ul > li）
6、后代选择器（li a）
7、通配符选择器（ * ）
8、属性选择器（a[rel = "external"]）
9、伪类选择器（a:hover, li:nth-child）
继承问题：
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height
8、CSS 中哪些属性可继承，哪些不可以？
能继承的属性
- 字体系列属性:font、font-family、font-weight、font-size、font-style;
- 文本系列属性:
2.1）内联元素：color、line-height、word-spacing、letter-spacing、
text-transform;
2.2）块级元素：text-indent、text-align; - 元素可见性：visibility
- 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、
table-layout; - 列表布局属性：list-style
不能继承的属性 - display：规定元素应该生成的框的类型；
- 文本属性：vertical-align、text-decoration;
- 盒子模型的属性：width、height、margin 、border、padding;
- 背景属性：background、background-color、background-image;
- 定位属性：float、clear、position、top、right、bottom、left、min-width、
min-height、max-width、max-height、overflow、clip
9、CSS 单位中 px、em 和 rem 的区别？
1、px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一
个虚拟长度单位，是计算机系统的数字化图像长度单位
2、em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字
体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大
小，因此并不是一个固定的值
3、rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字
体大小时，仍然是相对大小，但相对的只是 HTML 根元素
4、区别：
IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem
10、rem 适配方法如何计算 HTML 跟字号及适配方案？
通用方案
1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）
2、通过媒体查询分别设置每个屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可换算为 rem
优：有一定适用性，换算也较为简单
劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同
手机，单某款手机尺寸不在设置范围之内，会导致无法适配
网易方案
1、拿到设计稿除以 100，得到宽度 rem 值
2、通过给 html 的 style 设置 font-size，把 1 里面得到的宽度 rem 值代入
x document.documentElement.style.fontSize =
document.documentElement.clientWidth / x + ‘px‘;
3、设计稿 px/100 即可换算为 rem
优：通过动态根 font-size 来做适配，基本无兼容性问题，适配较为精准，换算简便
劣：无 viewport 缩放，且针对 iPhone 的 Retina 屏没有做适配，导致对一些手机的适
配不是很到位
手淘方案
1、拿到设计稿除以 10，得到 font-size 基准值
2、引入 flexible
3、不要设置 meta 的 viewport 缩放值
4、设计稿 px/ font-size 基准值，即可换算为 rem
优：通过动态根 font-size、viewpor、dpr 来做适配，无兼容性问题，适配精准。
劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时，单
位计算复杂
11、CSS 中 link 和@import 的区别？
适用范围不同 ：@import 可以在网页页面中使用，也可以在 CSS 文件中使用，用来将多个 CSS 文件引入到一个 CSS 文件中；而 link 只能将 CSS 文件引入到网页页面中。
功能范围不同： link 属于XHTML 标签，而@import 是 CSS 提供的一种方式，link 标签除了可以加载 CSS 外，还可以定义 RSS，定义 rel 连接属性等，@import 就只能加载 CSS。
加载顺序不同： 当一个页面被加载的时候，link 引用的 CSS 会同时被加载，@import引用CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import 加载 CSS 的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
兼容性：由于@import 是 css2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5以上的才能识别，而 link 标签无此问题控制样式时的差别 使用 link 方式可以让用户切换 CSS 样式.现代浏览器Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”属性(即可在浏览器上选择不同 的风格), 当然你还可以使用 Javascript 使得 IE 也支持用户更换样式
权重区别 ：link 引入的样式权重大于@import 引入的样式
12、Display：none 与 visibility：hidden 的区别？
最常用的为 display:none 和 visibility:hidden
dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失
visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置
区别
1.visibility 具有继承性，其子元素也会继承此属性，若设置 visibility:visible，则子元
素会显示
2.visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。
3.在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可
以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户 体
验
4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘
