解析:

 canvas 标签的 width 和 height 是画布实际宽度和高度，绘制的图形都是在这个上面。而
style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度。如果 canvas 的 width 和
height 没指定或值不正确，就被设置成默认值 。 

解析:

 Border-image : 图形化边框
Box-sizing : 属性允许您以特定的方式定义匹配某个区域的特定元素。
语法 ：box-sizing：content-box | border-box
Content-box : padding 和 border 不被包含在定义的 width 和 height 之内。对象的实际宽
度等于设置的width值和 border、padding之和，即 ( Element width = width + border + padding)
此属性表现为标准模式下的盒模型 .
Border-box : padding 和 border 被包含在定义的 width 和 height 之内。对象的实际宽度就
等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element
width = width ) 此属性表现为怪异模式下的盒模型。 

解析:

 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功
能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进
行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从
一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安
全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被
认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对
象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)”
的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注
的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，
还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”
成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览
器支持 (Graded Browser Support)”策略的原因所在。
那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆
角，阴影（CSS3），要求兼容（使用图片背景，放弃 CSS3），你会如何说服他？ 

解析:

 IE当 padding+border 的值小于 width 或者 height:
盒模型的宽度=margin(左右)+width（width 已经包含了 padding 和 border 的值）
盒模型的高度=margin(上下)+height（height 已经包含了 padding 和 border 的值）
当 padding+border 的值大于 width 或者 height:
盒模型的宽度=margin(左右)+padding(左右)+border(左右)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一个默认行高 19px）
所以相当于是 padding+border 和 width 或者 height 比大小，谁大取谁。
以上几种 DOCTYPE 都是标准的文档类型，无论使用哪种模式完整定义 DOCTYPE，都会
触发标准模式，而如果 DOCTYPE 缺失则在 ie6，ie7，ie8 下将会触发怪异模式（quirks 模式）
CSS3box-sizing 有两个值一个是 content-box，另一个是 border-box。
当设置为 box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为 box-sizing:border-box 时，将采用怪异模式解析计算；
Css3 弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决定一个盒子在其他盒子
中的分布方式以及如何处理可用的空间。使用该模型，可以很轻松的创建自适应浏览器窗口
的流动布局或自适应字体大小的弹性布局。 

解析:

 写法：animation: name duration timing-function delay iteration-count direction;
下面是对应的属性的介绍
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。