html + css篇
1.关于 JS 动画和 css3 动画的差异性
渲染线程分为 main thread 和 compositor thread，如果 css 动画
只 改 变 transform 和 opacity ， 这 时 整 个 CSS 动 画 得 以 在
compositor trhead 完成（而 JS 动画则会在 main thread 执行，
然后出发 compositor thread 进行下一步操作），特别注意的是如果
改变 transform 和 opacity 是不会 layout 或者 paint 的。
区别：
功能涵盖面，JS 比 CSS 大
实现/重构难度不一，CSS3 比 JS 更加简单，性
能跳优方向固定对帧速表现不好的低版本浏览
器，css3 可以做到自然降级
css 动画有天然事件支持 css3 有兼容性问题
2.双边距重叠问题（外边距折叠）
多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marigin 会重
叠折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两
个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外
边距一正一负时，折叠结果是两者的相加的和。
3.浮动清除
方法一：使用带 clear 属性的空元素在浮动元素后使用一个空元素如<div class="clear"></div>，并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
方法二：使用 CSS 的 overflow 属性
给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除
浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器
宽高或设置 zoom:1。
在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，
达到了清理浮动的效果。
方法三：给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使
其整体浮动，影响布局，不推荐使用。
方法四：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加 clear 属性。方法五：使用 CSS
的:after 伪元素
结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后
最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个clearfix 的 class，然后给这个 class 添加一个:after 伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
4.CSS 选择器有哪些，优先级呢
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等
同一元素引用了多个样式时，排在后面的样式属性的优先级高；
样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器； 标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，
至少比标签选择器的优先级低；
带有!important 标记的样式属性的优先级最高；
样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部
样式 > 浏览器用户自定义样式 > 浏览器默认样式
5.css 动画如何实现
创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由@keyframes 规则实现，具体情况参见使用keyframes 定义动画序列小节部分。 transition 也可实现动画。
transition 强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如 hover）时才能获取样式，这样就会产生过渡动画。
6.如何实现元素的垂直居中
法一：父元素 display:flex,align-items:center;
法二：元素绝对定位，
top:50%，margin-top：
-（高度/2）法三：高度不确定用 transform：
translateY（
-50%）
法四：父元素 table 布局，子元素设置 vertical-align:center;
7..CSS3 中对溢出的处理
cnkOhu
text-overflow 属性，值为 clip 是修剪文本；ellipsis 为显示省略符号来表被修剪的文本； string 为使用给定的字符串来代表被修剪的文本。
8.对 CSS 的新属性有了解过的吗？
CSS3 的新特性中，在布局方面新增了 flex 布局，在选择器方面新增了
例如
first-of-type,nth-child 等选择器，在盒模型方面添加了 box-sizing来改变盒模型，在动画方面增加了 animation，2d 变换，3d 变换等，在颜色方面添加透明，rbga 等，在字体方面允许嵌入字体和设置字体阴影，最后还有媒体查讯等
9.overflow 的原理
要讲清楚这个解决方案的原理，首先需要了解块格式化上下文，A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxesoccurs and in which floats interact with each other.翻译过来就是块格式化上下文是 CSS 可视化渲染的一部分，它是一块区域，规定了内部块盒 的渲染方式，以及浮动相互之间的影响关系当元素设置了 overflow 样式且值部位 visible 时，该元素就构建了一个 BFC，BFC 在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术 BFC 区域内只有一个浮动元素，BFC 的高度也不会发生塌缩，所以达到了清除浮动的目的。
10.css 定位
固定定位 fixed：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。
Fixed 定位的元素和其他元素重叠。相对定位 relative：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root
（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。默认定位 Static：第 21 页默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left,right 或者 z-index 声明）。
inherit:
规定应该从父元素继承 position 属性的值。
